@dsivd/prestations-ng 19.2.0-beta.12 → 19.2.0-beta.13

package/GOOD_PRACTICES.md

@@ -1,103 +1,104 @@
-# Utilisation technique (DEV)
+# Technical usage (DEV)
 
-> Ce guide décrit les bonnes pratiques pour développer une prestation avec `prestations-ng`.
-> Il a été mis à jour pour la version **v19+** : composants **standalone**, **signals** et
-> fonction **`inject`** (plus de modules, plus d'injection par constructeur). Depuis la **v19.2**,
-> prestations-ng est **zoneless** : les exemples tiennent l'état de vos composants dans des signaux,
-> ce qui fonctionne avec ou sans zone.js (voir [Application zoneless](good-practices#application_zoneless)).
+> This guide describes the good practices to develop a prestation with `prestations-ng`.
+> It has been updated for version **v19+**: **standalone** components, **signals** and the
+> **`inject`** function (no more modules, no more constructor injection). Since **v19.2**,
+> prestations-ng is **zoneless**: the examples hold the state of your components in signals,
+> which works with or without zone.js (see [Zoneless application](good-practices#zoneless_application)).
 >
-> 📚 Pour aller plus loin :
+> 📚 To go further:
 > [ANGULAR_SIGNALS.md](ANGULAR_SIGNALS.md) · [COMPONENTS.md](COMPONENTS.md) · [UPGRADING_V19.md](UPGRADING_V19.md)
 
-## Sommaire
+## Table of contents
 
 - [Documentation](good-practices#documentation)
-- [Mise à jour de la librairie](good-practices#mise___jour_de_la_librairie)
-- [Accessibilité](good-practices#accessibilit_)
-    - [Structure HTML](good-practices#structure_html)
-    - [Le focus](good-practices#le_focus)
-    - [La balise `<label>`](good-practices#la_balise__code__lt_label_gt___code_)
-    - [La balise `<ul>` ou `<ol>`](good-practices#la_balise__code__lt_ul_gt___code__ou__code__lt_ol_gt___code_)
-    - [La balise `<fieldset>` et `<legend>`](good-practices#la_balise__code__lt_fieldset_gt___code__et__code__lt_legend_gt___code_)
-    - [Liseuse d'écran (afficher / masquer)](good-practices#liseuse_d__cran__afficher___masquer_)
-    - [Une page prestations-ng](good-practices#une_page_prestations-ng)
-- [Application zoneless](good-practices#application_zoneless)
-    - [Afficher un état asynchrone](good-practices#afficher_un__tat_asynchrone)
-    - [Agir sur le DOM après le rendu](good-practices#agir_sur_le_dom_apr_s_le_rendu)
-    - [Tester un composant zoneless](good-practices#tester_un_composant_zoneless)
-- [Le routage de vos pages](good-practices#le_routage_de_vos_pages)
-    - [Formulaire simple](good-practices#formulaire_simple)
-    - [Formulaire complexe (sous-routes)](good-practices#formulaire_complexe__sous-routes_)
-- [Création d'un composant réutilisable](good-practices#cr_ation_d_un_composant_r_utilisable)
-    - [Exemple avec foehn-input-date de prestations-ng](good-practices#exemple_avec_foehn-input-date_de_prestations-ng)
-    - [Afficher la validation globale du composant](good-practices#afficher_la_validation_globale_du_composant)
-    - [Éviter des problèmes d'affichage d'erreurs dans une boucle `@for`](good-practices#_viter_des_probl_mes_d_affichage_d_erreurs_dans_une_boucle__code__for__code_)
-- [Validation du formulaire](good-practices#validation_du_formulaire)
-    - [Gestion standard](good-practices#gestion_standard)
-    - [Gestion manuelle](good-practices#gestion_manuelle)
+- [Updating the library](good-practices#updating_the_library)
+- [Accessibility](good-practices#accessibility)
+    - [HTML structure](good-practices#html_structure)
+    - [Focus](good-practices#focus)
+    - [The `<label>` tag](good-practices#the__code__lt_label_gt___code__tag)
+    - [The `<ul>` or `<ol>` tag](good-practices#the__code__lt_ul_gt___code__or__code__lt_ol_gt___code__tag)
+    - [The `<fieldset>` and `<legend>` tags](good-practices#the__code__lt_fieldset_gt___code__and__code__lt_legend_gt___code__tags)
+    - [Screen reader (show / hide)](good-practices#screen_reader__show___hide_)
+    - [A prestations-ng page](good-practices#a_prestations-ng_page)
+- [Zoneless application](good-practices#zoneless_application)
+    - [Displaying an asynchronous state](good-practices#displaying_an_asynchronous_state)
+    - [Deriving a state from view queries](good-practices#deriving_a_state_from_view_queries)
+    - [Acting on the DOM after rendering](good-practices#acting_on_the_dom_after_rendering)
+    - [Testing a zoneless component](good-practices#testing_a_zoneless_component)
+- [Routing your pages](good-practices#routing_your_pages)
+    - [Simple form](good-practices#simple_form)
+    - [Complex form (sub-routes)](good-practices#complex_form__sub-routes_)
+- [Creating a reusable component](good-practices#creating_a_reusable_component)
+    - [Example with foehn-input-date of prestations-ng](good-practices#example_with_foehn-input-date_of_prestations-ng)
+    - [Displaying the global validation of the component](good-practices#displaying_the_global_validation_of_the_component)
+    - [Avoiding error display problems in a `@for` loop](good-practices#avoiding_error_display_problems_in_a__code__for__code__loop)
+- [Form validation](good-practices#form_validation)
+    - [Standard handling](good-practices#standard_handling)
+    - [Manual handling](good-practices#manual_handling)
         - [Back-end](good-practices#back-end)
         - [Front-end](good-practices#front-end)
-- [Validation manuelle d'un composant](good-practices#validation_manuelle_d_un_composant)
-    - [Cacher une erreur](good-practices#cacher_une_erreur)
-    - [Afficher une erreur](good-practices#afficher_une_erreur)
+- [Manual validation of a component](good-practices#manual_validation_of_a_component)
+    - [Hiding an error](good-practices#hiding_an_error)
+    - [Displaying an error](good-practices#displaying_an_error)
 
-> ⚠️ Dans toutes vos pages HTML vous devez avoir un `<foehn-form>` et celui-ci **ne peut pas être
-> conditionnel** (pas de `@if` autour de `<foehn-form>`).
+> ⚠️ All your HTML pages must have a `<foehn-form>`, and it **can't be
+> conditional** (no `@if` around `<foehn-form>`).
 
 ## Documentation
 
 - [PrestaKit](https://www.vd.ch/toutes-les-autorites/departements/departement-des-infrastructures-et-des-ressources-humaines-dirh/direction-generale-du-numerique-et-des-systemes-dinformation-dgnsi/prestakit-sdk-pour-le-developpement-des-prestations-en-ligne/)
 - [prestations-ng](https://dsi-vd.github.io/prestations-ng/)
-- [prestations-ng (doc autogénérée)](https://dsi-vd.github.io/prestations-ng/generateddoc/)
-- [foehn](https://dsi-vd.github.io/foehn-design-system/components/detail/formulaire-prestation--default.html) (Charte graphique)
+- [prestations-ng (generated doc)](https://dsi-vd.github.io/prestations-ng/generateddoc/)
+- [foehn](https://dsi-vd.github.io/foehn-design-system/components/detail/formulaire-prestation--default.html) (Graphic charter)
 - [CSS](https://www.w3schools.com/css/default.asp)
     - [Bootstrap](https://getbootstrap.com/docs/5.3/layout/grid/)
     - [Flex - Bootstrap](https://getbootstrap.com/docs/5.3/utilities/flex/)
     - [Flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
 - [HTML](https://www.w3schools.com/html/default.asp)
-    - [Éléments de section](https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html)
+    - [Section elements](https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html) (in French)
     - [Description list](https://www.w3schools.com/tags/tag_dl.asp)
 - [RXJS](https://rxjs-dev.firebaseapp.com/)
 
-## Mise à jour de la librairie
+## Updating the library
 
-> ℹ️ Maintenez à jour vos librairies en vous inscrivant sur la page [PrestaKit](https://www.vd.ch/toutes-les-autorites/departements/departement-des-infrastructures-et-des-ressources-humaines-dirh/direction-generale-du-numerique-et-des-systemes-dinformation-dgnsi/prestakit-sdk-pour-le-developpement-des-prestations-en-ligne/)
-> et vous serez ainsi notifié des nouvelles releases. Cela vous permettra de profiter des corrections
-> de bug, améliorations et nouvelles fonctionnalités.
+> ℹ️ Keep your libraries up to date by subscribing on the [PrestaKit](https://www.vd.ch/toutes-les-autorites/departements/departement-des-infrastructures-et-des-ressources-humaines-dirh/direction-generale-du-numerique-et-des-systemes-dinformation-dgnsi/prestakit-sdk-pour-le-developpement-des-prestations-en-ligne/)
+> page: you will be notified of the new releases. You will then benefit from the bug fixes,
+> improvements and new features.
 >
-> Prenez le temps de lire le [changelog](CHANGELOG.md) de **prestations-ng** à chaque nouvelle release.
+> Take the time to read the [changelog](CHANGELOG.md) of **prestations-ng** at each new release.
 >
-> N'hésitez pas à ouvrir des tickets JIRA (PRESTAKIT-xxx) dans [PrestaKit (anc SDK Cyber)](https://issuetracker.etat-de-vaud.ch/outils/issuetracker/browse/PRESTAKIT)
-> pour signaler des bugs ou même à faire des propositions d'améliorations afin de
-> [contribuer](CONTRIBUTING.md) au développement de prestations-ng.
+> Don't hesitate to open JIRA tickets (PRESTAKIT-xxx) in [PrestaKit (formerly SDK Cyber)](https://issuetracker.etat-de-vaud.ch/outils/issuetracker/browse/PRESTAKIT)
+> to report bugs, or even to suggest improvements in order to
+> [contribute](CONTRIBUTING.md) to the development of prestations-ng.
 
-Mettre à jour la librairie prestations-ng (npm) :
+Update the prestations-ng library (npm):
 
 ```bash
 ng update @dsivd/prestations-ng
 ```
 
-## Accessibilité
+## Accessibility
 
-> ℹ️ En développant des prestations pour l'État, nous devons faire tout notre possible pour rendre nos
-> pages web les plus accessibles possibles au grand public.
+> ℹ️ When developing prestations for the State, we must do everything we can to make our web pages
+> as accessible as possible to the general public.
 >
-> Prestations-ng fait une bonne partie du boulot pour nous mais c'est au développeur de prendre le
-> soin de mettre les efforts qu'il faut pour que la prestation reste accessible.
+> Prestations-ng does a good part of the job for us, but it's up to the developer to make the
+> necessary efforts so that the prestation stays accessible.
 
-### Structure HTML
+### HTML structure
 
-> ⚠️ Nous recommandons :
+> ⚠️ We recommend to:
 >
-> - une seule balise h1 (`<h1>`)
-> - respecter la hiérarchie h1, h2, h3..
-> - regrouper vos informations dans des sections (`<section>`) si vous avez plusieurs h2 (`<h2>`)
-> - utiliser la classe CSS `col-md-8` de Bootstrap pour définir la largeur de votre formulaire
-> - organisez votre texte avec des paragraphes (`<p>`)
-> - utiliser les balises `<dl>`, `<dt>` et `<dd>` pour afficher des clés / valeurs (voir [foehn-recap-section](https://dsi-vd.github.io/prestations-ng/recap))
-> - utiliser [foehn-abbr](https://dsi-vd.github.io/prestations-ng/misc) pour les abréviations tant que possible et sinon la balise abbr (`<abbr>`)
+> - have a single h1 tag (`<h1>`)
+> - respect the hierarchy h1, h2, h3..
+> - group your information in sections (`<section>`) if you have several h2 (`<h2>`)
+> - use the Bootstrap CSS class `col-md-8` to define the width of your form
+> - organize your text with paragraphs (`<p>`)
+> - use the `<dl>`, `<dt>` and `<dd>` tags to display keys / values (see [foehn-recap-section](https://dsi-vd.github.io/prestations-ng/recap))
+> - use [foehn-abbr](https://dsi-vd.github.io/prestations-ng/misc) for the abbreviations whenever possible, and the abbr tag (`<abbr>`) otherwise
 
-Ce qu'il ne faut **pas** faire :
+What **not** to do:
 
 ```html
 <h1>...</h1>
@@ -107,7 +108,7 @@ Ce qu'il ne faut **pas** faire :
 ... ... ...
 ```
 
-Ce qu'il **faut** faire :
+What **to** do:
 
 ```html
 <h1>...</h1>
@@ -122,27 +123,27 @@ Ce qu'il **faut** faire :
 <section>...</section>
 ```
 
-Quelques attributs HTML utiles :
+Some useful HTML attributes:
 
-- Pour les images (`<img>`)
-    - `title="[texte explicite ici]"`
-    - `alt="[texte explicite ici]"`
-- Pour les liens (`<a>`)
-    - `title="[texte explicite ici]"`
+- For the images (`<img>`)
+    - `title="[explicit text here]"`
+    - `alt="[explicit text here]"`
+- For the links (`<a>`)
+    - `title="[explicit text here]"`
     - `target="_blank"`
-- [Rendre les balises accessibles](https://www.w3.org/TR/wai-aria-1.2/#intro_ria_accessibility)
+- [Make the tags accessible](https://www.w3.org/TR/wai-aria-1.2/#intro_ria_accessibility)
     - [`aria-*`](https://w3c.github.io/using-aria/#aria-states-and-properties-aria-attributes)
     - [`role`](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute)
 
-### Le focus
+### Focus
 
-> ⚠️ Il est important que le focus dans une page HTML soit maîtrisé. Si le focus est perdu, alors la
-> liseuse d'écran le sera aussi.
+> ⚠️ It's important that the focus in an HTML page is under control. If the focus is lost, the
+> screen reader is lost too.
 >
-> Si, par exemple, on ouvre une modale en cliquant sur un bouton, alors à la fermeture de la modale,
-> le focus doit être remis sur le bouton déclencheur.
+> If, for example, a modal is opened by clicking on a button, then when the modal is closed, the
+> focus must be put back on the triggering button.
 
-Exemple :
+Example:
 
 ```html
 <button
@@ -151,7 +152,7 @@ Exemple :
     (click)="openModal()"
     #modalTrigger
 >
-    <!-- on déclare le déclencheur de la modale -->
+    <!-- we declare the trigger of the modal -->
     Open Modal
 </button>
 <foehn-modal
@@ -160,13 +161,13 @@ Exemple :
     [(isModalVisible)]="isModalVisible"
     [modalTriggerHtmlElement]="modalTrigger"
 >
-    <!-- on utilise le déclencheur -->
+    <!-- we use the trigger -->
     <div>Here is the dialog</div>
 </foehn-modal>
 ```
 
 ```ts
-// Un signal : la modale s'affiche et se masque aussi sans zone.js
+// A signal: the modal is also displayed and hidden without zone.js
 readonly isModalVisible = signal(false);
 
 openModal(): void {
@@ -174,105 +175,106 @@ openModal(): void {
 }
 ```
 
-### La balise `<label>`
+### The `<label>` tag
 
-> ⚠️ Tous nos composants `foehn-input-*` disposent d'une balise label ([`<label>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/label))
-> qui décrit le champ de saisie. Il est important que celle-ci soit remplie avec un contenu explicite.
+> ⚠️ All our `foehn-input-*` components have a label tag ([`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label))
+> which describes the input field. It's important that it is filled with an explicit content.
 >
-> Si pour une raison quelconque, le métier ne souhaite pas l'afficher, vous devez tout de même la
-> renseigner et ajouter un attribut `[isLabelSrOnly]="true"`. Le label ne sera pas affiché mais
-> uniquement lu par la liseuse d'écran.
+> If for any reason the business doesn't want to display it, you must still fill it and add an
+> `[isLabelSrOnly]="true"` attribute. The label won't be displayed, only read by the screen
+> reader.
 
-Exemple :
+Example:
 
 ```html
 <foehn-input-number
     name="..."
     [(model)]="..."
-    [label]="'Le texte que la liseuse va lire'"
+    [label]="'The text read by the screen reader'"
     [isLabelSrOnly]="true"
     [required]="..."
     [maxlength]="..."
 />
 ```
 
-> 💡 `label`, `isLabelSrOnly`, `required`, ... sont désormais des **input signals** côté composant.
-> Vous continuez à les alimenter depuis le template parent via un binding `[label]="..."`.
-> À l'intérieur du composant, vous les lisez en les invoquant : `label()`, `required()`, ...
+> 💡 `label`, `isLabelSrOnly`, `required`, ... are now **input signals** in the component.
+> You keep feeding them from the parent template with a `[label]="..."` binding.
+> Inside the component, you read them by calling them: `label()`, `required()`, ...
 
-### La balise `<ul>` ou `<ol>`
+### The `<ul>` or `<ol>` tag
 
 > ⚠️
 >
-> - L'élément [`<ul>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul) doit être utilisé
->   pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre
->   [`<ol>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol) et
->   [`<ul>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul), on se demandera si changer
->   l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la
->   signification, cela signifie que l'ordre est important et qu'il faudra utiliser
->   [`<ol>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol), sinon l'ordre n'importe pas
->   et [`<ul>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul) peut être utilisé.
-> - Si [`<ol>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol) ou
->   [`<ul>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul) ne contient qu'un seul élément
->   [`<li>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/li) (non dynamique), alors on se
->   demandera si l'utilisation d'une liste est nécessaire et si un paragraphe
->   ([`<p>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/p)) ne serait pas une meilleure
+> - The [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) element must be used
+>   to group several items that have no order relationship. If you hesitate between
+>   [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and
+>   [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), ask yourself whether
+>   changing the order of the items of the list has an impact: if moving an item changes the
+>   meaning, the order is important and
+>   [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) must be used, otherwise
+>   the order doesn't matter and [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)
+>   can be used.
+> - If [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) or
+>   [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) only contains a single
+>   [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) element (not dynamic),
+>   ask yourself whether a list is necessary and whether a paragraph
+>   ([`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)) wouldn't be a better
 >   option.
-> - Ne **JAMAIS** mettre une autre balise que [`<li>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/li)
->   entre deux balises [`<ol>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol) ou
->   [`<ul>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul).
+> - **NEVER** put a tag other than [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
+>   between two [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) or
+>   [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) tags.
 
-Exemple :
+Example:
 
 ```html
 <ul>
-    <li>un artichaut</li>
+    <li>an artichoke</li>
     <li>
-        Les trucs pour le gâteau
-        <!-- On voit que </li> n'est pas là -->
+        The things for the cake
+        <!-- Note that </li> isn't there -->
         <ul>
-            <li>trois œufs</li>
+            <li>three eggs</li>
             <li>
-                La génoise
-                <!-- Là on ouvre une autre liste -->
+                The sponge cake
+                <!-- Here we open another list -->
                 <ul>
-                    <li>100g de sucre</li>
-                    <li>un œuf</li>
-                    <li>150g de farine</li>
+                    <li>100g of sugar</li>
+                    <li>an egg</li>
+                    <li>150g of flour</li>
                 </ul>
             </li>
-            <!-- On ferme la liste la plus imbriquée -->
-            <li>200g de chocolat</li>
+            <!-- We close the most nested list -->
+            <li>200g of chocolate</li>
         </ul>
-        <!-- On ferme la liste imbriquée avec </li> -->
+        <!-- We close the nested list with </li> -->
     </li>
-    <li>De l'essuie-tout</li>
+    <li>Paper towels</li>
     <li>
-        A faire dans l'ordre pour une belle vaisselle
+        To do in this order for a nice dishwashing
         <ol>
-            <li>Remplir le lave vaisselle</li>
-            <li>Mettre une pastille pour lave vaisselle</li>
-            <li>Fermer la porte du lave vaisselle</li>
-            <li>Lancer le lave vaisselle</li>
+            <li>Fill the dishwasher</li>
+            <li>Put a dishwasher tablet</li>
+            <li>Close the door of the dishwasher</li>
+            <li>Start the dishwasher</li>
         </ol>
     </li>
 </ul>
 ```
 
-### La balise `<fieldset>` et `<legend>`
+### The `<fieldset>` and `<legend>` tags
 
-> ⚠️ L'élément HTML [`<fieldset>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/fieldset) est
-> utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes
-> ([`<label>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/label)) dans un formulaire HTML
-> et on doit lui associer une légende
-> ([`<legend>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/legend)) décrivant ce groupe.
+> ⚠️ The HTML element [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) is
+> used to group several interactive controls as well as labels
+> ([`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)) in an HTML form,
+> and it must have a caption
+> ([`<legend>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)) describing this group.
 >
-> L'élément HTML [`<legend>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/legend) représente
-> une légende pour le contenu de son élément parent
-> [`<fieldset>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/fieldset). Il ne peut pas être
-> utilisé tout seul.
+> The HTML element [`<legend>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend) represents
+> a caption for the content of its parent element
+> [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset). It can't be
+> used on its own.
 
-Exemple :
+Example:
 
 ```html
 <form>
@@ -291,45 +293,45 @@ Exemple :
 </form>
 ```
 
-### Liseuse d'écran (afficher / masquer)
+### Screen reader (show / hide)
 
-> ⚠️ Il est important de garder en tête qu'une liseuse d'écran va parcourir notre code HTML. De ce
-> fait, nous pouvons à tout moment décider de lui afficher explicitement du contenu à lire ou de lui
-> masquer du contenu pour ne pas surcharger l'information.
+> ⚠️ It's important to keep in mind that a screen reader goes through our HTML code. So we can
+> decide at any time to explicitly show it content to read, or to hide content from it so as not to
+> overload the information.
 
-- Afficher uniquement pour la liseuse : utiliser la classe CSS `sr-only`
-- Masquer du contenu à la liseuse : utiliser l'attribut `aria-hidden="true"`
+- Show only to the screen reader: use the CSS class `sr-only`
+- Hide content from the screen reader: use the attribute `aria-hidden="true"`
 
-Exemple :
+Example:
 
 ```html
 <a href="https://www.vd.ch">
     <span class="sr-only">
-        <!-- Afficher uniquement pour la liseuse d'écran -->
-        Retour à la page d'accueil
+        <!-- Show only to the screen reader -->
+        Back to the home page
     </span>
     <img
         aria-hidden="true"
         class="img-fluid footer-logo"
-        src="[url_vers_mon_image]"
+        src="[url_to_my_image]"
         alt="Canton de Vaud"
     />
-    <!-- Masquer uniquement pour la liseuse d'écran -->
+    <!-- Hide only from the screen reader -->
 </a>
 ```
 
-Le résultat de l'exemple ci-dessus sera un lien représenté par une image pour les voyants et un lien
-avec du texte pour les non-voyants.
+The result of the example above is a link represented by an image for sighted people, and a link
+with text for visually impaired people.
 
-### Une page prestations-ng
+### A prestations-ng page
 
-1. Étendre la classe abstraite `AbstractPageComponent` en spécifiant un modèle
-2. Ajouter un titre h1 en utilisant `setPageTitle`
-3. Implémenter la fonction `newForm`
-4. Ajouter le `<foehn-form>` dans la page (⚠️ **il ne doit pas être conditionnel**)
-5. La première balise d'en-tête de votre page doit être un h2 (`<h2>`)
-6. Ajouter `<foehn-navigation>`
-7. Si vous disposez de plusieurs pages, utiliser le composant `<foehn-page-counter>`
+1. Extend the abstract class `AbstractPageComponent`, specifying a model
+2. Add an h1 title with `setPageTitle`
+3. Implement the `newForm` function
+4. Add the `<foehn-form>` in the page (⚠️ **it must not be conditional**)
+5. The first heading tag of your page must be an h2 (`<h2>`)
+6. Add `<foehn-navigation>`
+7. If you have several pages, use the `<foehn-page-counter>` component
 
 `page-one.component.ts`
 
@@ -337,12 +339,12 @@ avec du texte pour les non-voyants.
 @Component({
     templateUrl: './page-one.component.html',
     imports: [
-        // chaque composant importe ce dont il a besoin dans son template
+        // each component imports what its template needs
         FoehnFormComponent,
         FoehnNavigationComponent,
         FoehnPageCounterComponent,
         SdkDictionaryPipe,
-        // ... vos composants foehn-* utilisés dans le template
+        // ... your foehn-* components used in the template
     ],
 })
 export class PageOneComponent
@@ -351,7 +353,7 @@ export class PageOneComponent
 {
     ngOnInit(): void {
         super.ngOnInit();
-        // point (2) : ajoutera le titre h1
+        // point (2): adds the h1 title
         this.setPageTitle(this._dictionaryService.getKeySync('page.one.title'));
     }
 
@@ -362,28 +364,28 @@ export class PageOneComponent
 }
 ```
 
-> 💡 Plus de `constructor` : les dépendances de `AbstractPageComponent` (dont `_dictionaryService`)
-> sont injectées via `inject()` dans la classe abstraite. `activatedRoute` n'est donc plus un
-> paramètre de constructeur à passer.
+> 💡 No more `constructor`: the dependencies of `AbstractPageComponent` (including `_dictionaryService`)
+> are injected with `inject()` in the abstract class. `activatedRoute` is therefore no longer a
+> constructor parameter to pass.
 
 `page-one.component.html`
 
 ```html
 <div class="container mt-5">
     <foehn-page-counter />
-    <!-- point (7) : si besoin -->
+    <!-- point (7): if needed -->
 
-    <!-- point (4) : doit toujours être présent dans la page et pas conditionnel (pas de @if) -->
+    <!-- point (4): must always be present in the page and not conditional (no @if) -->
     <foehn-form>
         <div class="row">
             <div class="col-md-8">
-                <!-- point (5) : toujours avoir un <h2> en premier dans votre page -->
+                <!-- point (5): always have an <h2> first in your page -->
                 <h2>
-                    {{ 'La_clé_du_dictionnaire_de_votre_titre_H2_ici' |
+                    {{ 'The_dictionary_key_of_your_H2_title_here' |
                     fromDictionary }}
                 </h2>
 
-                <!-- [VOS COMPOSANTS FOEHN ICI] -->
+                <!-- [YOUR FOEHN COMPONENTS HERE] -->
 
                 <foehn-navigation
                     id="navigation"
@@ -397,40 +399,40 @@ export class PageOneComponent
 </div>
 ```
 
-## Application zoneless
+## Zoneless application
 
-> ℹ️ Depuis la v19.2, prestations-ng n'a plus besoin de zone.js et nous vous recommandons de rendre
-> votre application zoneless (`provideZonelessChangeDetection()`, voir
+> ℹ️ Since v19.2, prestations-ng no longer needs zone.js and we recommend that you make your
+> application zoneless (`provideZonelessChangeDetection()`, see
 > [UPGRADING_V19.md](UPGRADING_V19.md#zoneless-optional-but-recommended)).
 >
-> Sans zone.js, Angular ne rafraîchit un composant que lorsqu'il est prévenu d'un changement :
+> Without zone.js, Angular only refreshes a component when it is notified of a change:
 >
-> - un listener de son template a été appelé (`(click)`, `(modelChange)`, `(userInput)`, ...), y
->   compris les double-bindings `[(model)]`
-> - un signal lu par son template a changé (`signal()`, `computed()`, `input()`, `model()`,
+> - a listener of its template has been called (`(click)`, `(modelChange)`, `(userInput)`, ...),
+>   including the `[(model)]` two-way bindings
+> - a signal read by its template has changed (`signal()`, `computed()`, `input()`, `model()`,
 >   `toSignal()`, ...)
-> - `ChangeDetectorRef.markForCheck()` a été appelé, ce que fait le pipe `async` lorsqu'un observable
->   émet
+> - `ChangeDetectorRef.markForCheck()` has been called, which is what the `async` pipe does when an
+>   observable emits
 
-### Afficher un état asynchrone
+### Displaying an asynchronous state
 
-> ⚠️ Un champ modifié ailleurs (dans un `subscribe()`, un `setTimeout()`, une `Promise`, un
-> callback, ...) n'est plus affiché tant que rien d'autre ne rafraîchit le composant. Tenez-le dans
-> un **signal**.
+> ⚠️ A field modified elsewhere (in a `subscribe()`, a `setTimeout()`, a `Promise`, a
+> callback, ...) is no longer displayed until something else refreshes the component. Hold it in
+> a **signal**.
 
-Ce qu'il ne faut **pas** faire :
+What **not** to do:
 
 ```ts
 isLoading = true;
 
 ngOnInit(): void {
     this.myService.load().subscribe(() => {
-        this.isLoading = false; // pas affiché sans zone.js
+        this.isLoading = false; // not displayed without zone.js
     });
 }
 ```
 
-Ce qu'il **faut** faire :
+What **to** do:
 
 ```ts
 readonly isLoading = signal(true);
@@ -448,12 +450,12 @@ ngOnInit(): void {
 }
 ```
 
-> 💡 Pour un observable affiché tel quel, `toSignal(this.myService.load())` ou le pipe `async` font
-> le travail pour vous.
+> 💡 For an observable displayed as is, `toSignal(this.myService.load())` or the `async` pipe do
+> the job for you.
 
-Dans vos pages (`AbstractPageComponent`), prestations-ng rafraîchit la page lorsqu'il charge `form`
-et `reference`. Si vous modifiez vous-même le formulaire dans un callback asynchrone, appelez
-`markForCheck()` ensuite :
+In your pages (`AbstractPageComponent`), prestations-ng refreshes the page when it loads `form`
+and `reference`. If you modify the form yourself in an asynchronous callback, call
+`markForCheck()` afterwards:
 
 ```ts
 private readonly changeDetectorRef = inject(ChangeDetectorRef);
@@ -469,10 +471,54 @@ ngOnInit(): void {
 }
 ```
 
-### Agir sur le DOM après le rendu
+### Deriving a state from view queries
 
-> ⚠️ `NgZone` (`onStable`, `onMicrotaskEmpty`, `run()`, ...) ne fonctionne plus sans zone.js, et un
-> `setTimeout()` n'attend pas le rendu. Pour agir sur le DOM rendu (focus, scroll, ...), utilisez
+> ⚠️ A field read by the template and modified in `ngAfterViewInit()`, `ngAfterContentInit()` or
+> `ngAfterViewChecked()` is no longer displayed until something else refreshes the component (with
+> zone.js, the next refresh displayed it, after an `NG0100` error in development).
+> Compute it with `computed()` from `viewChild()` or `contentChild()`.
+
+What **not** to do:
+
+```ts
+@ViewChild('referenceLink') referenceLink?: TemplateRef<unknown>;
+columns: FoehnTableColumnConfiguration<Order>[] = [];
+
+ngAfterViewInit(): void {
+    // not displayed without zone.js
+    this.columns = [{ id: 'reference', columnLabelKey: 'orders.reference', template: this.referenceLink }];
+}
+```
+
+What **to** do:
+
+```ts
+readonly referenceLink = viewChild<TemplateRef<unknown>>('referenceLink');
+readonly columns = computed<FoehnTableColumnConfiguration<Order>[]>(() => [
+    { id: 'reference', columnLabelKey: 'orders.reference', template: this.referenceLink() },
+]);
+```
+
+```html
+<foehn-table
+    [name]="'orders'"
+    [columnsConfiguration]="columns()"
+    [model]="orders()"
+></foehn-table>
+
+<ng-template #referenceLink let-order="item">
+    <a [routerLink]="['/demande', order.id]">{{ order.reference }}</a>
+</ng-template>
+```
+
+> 💡 The `computed()` follows the result of the `viewChild()`, including when the element appears or
+> disappears in an `@if`: no need to hide the content until it is resolved. If the element must
+> always exist, `viewChild.required()` guarantees it (error `NG0951` otherwise).
+
+### Acting on the DOM after rendering
+
+> ⚠️ `NgZone` (`onStable`, `onMicrotaskEmpty`, `run()`, ...) no longer works without zone.js, and a
+> `setTimeout()` doesn't wait for the rendering. To act on the rendered DOM (focus, scroll, ...), use
 > `afterNextRender()`.
 
 ```ts
@@ -483,18 +529,18 @@ private readonly injector = inject(Injector);
 
 showDetails(): void {
     this.detailsVisible.set(true);
-    // Le champ n'existe qu'une fois le détail rendu
+    // The field only exists once the details are rendered
     afterNextRender(() => this.detailsField()?.nativeElement.focus(), {
         injector: this.injector,
     });
 }
 ```
 
-### Tester un composant zoneless
+### Testing a zoneless component
 
-> ⚠️ `fixture.detectChanges()` **force** le rafraîchissement : un composant qui oublie de prévenir
-> Angular (champ au lieu d'un signal, `markForCheck()` manquant, ...) passe le test, mais n'est pas
-> rafraîchi dans l'application. Laissez Angular rafraîchir le composant, comme en production, avec
+> ⚠️ `fixture.detectChanges()` **forces** the refresh: a component that forgets to notify
+> Angular (a field instead of a signal, a missing `markForCheck()`, ...) passes the test, but isn't
+> refreshed in the application. Let Angular refresh the component, as in production, with
 > `await fixture.whenStable()`.
 
 ```ts
@@ -506,22 +552,22 @@ it('should display the details', async () => {
 });
 ```
 
-`await fixture.whenStable()` attend aussi les tâches en cours, comme les requêtes HTTP : le test ne
-se termine pas avant elles (sinon `NG0205: Injector has already been destroyed`).
+`await fixture.whenStable()` also waits for the pending tasks, such as the HTTP requests: the test
+doesn't end before them (otherwise `NG0205: Injector has already been destroyed`).
 
-Gardez `fixture.detectChanges()` pour :
+Keep `fixture.detectChanges()` for:
 
-- vérifier un état intermédiaire, avant la fin d'un traitement asynchrone
-- les tests avec `vi.useFakeTimers()` : le rafraîchissement d'Angular passe par des timers, qu'il
-  faut avancer (`await vi.advanceTimersByTimeAsync(...)`), sinon `whenStable()` ne se termine pas
+- checking an intermediate state, before the end of an asynchronous processing
+- the tests with `vi.useFakeTimers()`: the refresh of Angular goes through timers, which must be
+  advanced (`await vi.advanceTimersByTimeAsync(...)`), otherwise `whenStable()` never ends
 
-> 💡 Pour que le test passe par le même chemin que l'utilisateur, déclenchez les événements dans le
-> DOM (`input.dispatchEvent(new Event('change'))`, `button.click()`, ...) plutôt que d'appeler les
-> méthodes du composant ou de ses services.
+> 💡 So that the test goes through the same path as the user, trigger the events in the
+> DOM (`input.dispatchEvent(new Event('change'))`, `button.click()`, ...) rather than calling the
+> methods of the component or of its services.
 
-## Le routage de vos pages
+## Routing your pages
 
-### Formulaire simple
+### Simple form
 
 `app.routes.ts`
 
@@ -561,14 +607,14 @@ export const routes: Routes = [
 ];
 ```
 
-### Formulaire complexe (sous-routes)
+### Complex form (sub-routes)
 
-> ℹ️ Préférez l'utilisation de **sous-routes** (`*.routes.ts`) pour regrouper vos routes et ainsi
-> mieux structurer votre projet.
+> ℹ️ Prefer **sub-routes** (`*.routes.ts`) to group your routes and thus better structure your
+> project.
 >
-> Comme il n'y a plus de modules (composants **standalone**), on ne charge plus un `*.module.ts` mais
-> un fichier de routes qui exporte une constante `Routes`. Voir [UPGRADING_V19.md](UPGRADING_V19.md)
-> pour le détail de la migration.
+> As there are no more modules (**standalone** components), you no longer load a `*.module.ts` but
+> a routes file exporting a `Routes` constant. See [UPGRADING_V19.md](UPGRADING_V19.md)
+> for the details of the migration.
 
 `app.routes.ts`
 
@@ -608,9 +654,9 @@ export const routes: Routes = [
 ];
 ```
 
-> 💡 On charge donc `welcome.routes.ts` (et non plus `welcome.module.ts`) :
+> 💡 So we load `welcome.routes.ts` (and no longer `welcome.module.ts`):
 > `loadChildren: () => import('./modules/welcome/welcome.routes').then((m) => m.welcome_routes)`
-> au lieu de `import('./modules/welcome/welcome.module').then((m) => m.WelcomeModule)`.
+> instead of `import('./modules/welcome/welcome.module').then((m) => m.WelcomeModule)`.
 
 `welcome.routes.ts`
 
@@ -658,45 +704,44 @@ export const inscription_routes: Routes = [
 ];
 ```
 
-> 💡 Vous pouvez aussi charger paresseusement (`lazy-load`) un composant :
+> 💡 You can also lazy-load a component:
 >
 > ```ts
 > { path: 'list', loadComponent: () => import('./demande-list-page/demande-list-page.component').then((m) => m.DemandeListPageComponent) },
 > ```
 
-## Création d'un composant réutilisable
+## Creating a reusable component
 
-> ℹ️ Créer un composant réutilisable en Angular n'est pas difficile mais pour qu'il soit adapté à
-> prestations-ng, c'est une autre affaire. Il va falloir respecter certaines règles, sans quoi, ça ne
-> fonctionnera pas correctement.
+> ℹ️ Creating a reusable component in Angular isn't difficult, but making it fit prestations-ng is
+> another matter. Some rules must be respected, otherwise it won't work properly.
 
-### Exemple avec foehn-input-date de prestations-ng
+### Example with foehn-input-date of prestations-ng
 
-Votre composant doit :
+Your component must:
 
-1. `selector` devrait commencer par `"app-..."` pour éviter d'éventuels conflits de nommage
-2. avoir un `providers`
-3. étendre `FoehnInputComponent` et vous devez lui préciser votre modèle de données
-4. répartir les attributs de votre modèle de données dans des **signaux** publics utilisés dans
-   votre HTML
-5. implémenter une fonction `update` (ici ce sera `updateDate`) qui fera appel à `updateNgModel` pour
-   maintenir la synchronisation de votre modèle de données avec votre page
-6. implémenter une fonction `handleUserInput` qui fera appel à `handleChange` pour continuer à
-   notifier le parent des changements de comportement de votre composant
-7. implémenter une fonction `onModelChange` qui vous permettra d'initialiser correctement les
-   signaux correspondant à votre modèle
-8. implémenter une fonction `getValidValue` afin de reconstruire votre modèle de données avant de le
-   retransmettre à votre page et retourner `null` si tous les attributs de votre objet sont vides (ça
-   c'est pour que Java soit content)
+1. `selector` should start with `"app-..."` to avoid possible naming conflicts
+2. have a `providers`
+3. extend `FoehnInputComponent`, to which you must give your data model
+4. spread the attributes of your data model in public **signals** used in
+   your HTML
+5. implement an `update` function (here it will be `updateDate`) calling `updateNgModel` to
+   keep your data model synchronized with your page
+6. implement a `handleUserInput` function calling `handleChange` to keep
+   notifying the parent of the behavior changes of your component
+7. implement an `onModelChange` function to correctly initialize the
+   signals corresponding to your model
+8. implement a `getValidValue` function to rebuild your data model before sending it
+   back to your page, and return `null` if all the attributes of your object are empty (this
+   is to keep Java happy)
 
-> 🚨 Points **standalone / signals** à respecter :
+> 🚨 **standalone / signals** points to respect:
 >
-> - **Pas de `multi: true`** dans le `providers` (retiré depuis la migration standalone).
-> - Les `imports` du composant se déclarent **directement** dans le décorateur `@Component`. Chaque
->   composant charge ce dont il a besoin (voir `foehn-input-date` dans ce projet).
-> - L'état affiché par le composant est tenu dans des **signaux** (point 4) : `onModelChange` est
->   appelé lorsque le modèle change, parfois en dehors d'un événement du template, et un simple champ
->   ne serait alors pas affiché sans zone.js.
+> - **No `multi: true`** in the `providers` (removed since the standalone migration).
+> - The `imports` of the component are declared **directly** in the `@Component` decorator. Each
+>   component loads what it needs (see `foehn-input-date` in this project).
+> - The state displayed by the component is held in **signals** (point 4): `onModelChange` is
+>   called when the model changes, sometimes outside of an event of the template, and a plain field
+>   would then not be displayed without zone.js.
 
 `input-date.component.ts`
 
@@ -709,7 +754,7 @@ import { FoehnValidationAlertsComponent } from '../foehn-validation-alerts/foehn
 import { SdkDictionaryPipe } from '../sdk-dictionary/sdk-dictionary.pipe';
 
 @Component({
-    // point (1) : dans votre prestation, le selector sera plutôt 'app-...'
+    // point (1): in your prestation, the selector will rather be 'app-...'
     selector: 'app-input-date',
     templateUrl: './input-date.component.html',
     // point (2)
@@ -717,10 +762,10 @@ import { SdkDictionaryPipe } from '../sdk-dictionary/sdk-dictionary.pipe';
         {
             provide: FoehnInputComponent,
             useExisting: forwardRef(() => InputDateComponent),
-            // ⚠️ plus de `multi: true` en standalone
+            // ⚠️ no more `multi: true` in standalone
         },
     ],
-    // les imports se déclarent directement ici : chaque composant charge ce dont il a besoin
+    // the imports are declared directly here: each component loads what it needs
     imports: [
         FoehnValidationAlertsComponent,
         FoehnInputNumberComponent,
@@ -728,9 +773,9 @@ import { SdkDictionaryPipe } from '../sdk-dictionary/sdk-dictionary.pipe';
     ],
 })
 export class InputDateComponent extends FoehnInputComponent<number[]> {
-    // point (3) : extends FoehnInputComponent<number[]>
+    // point (3): extends FoehnInputComponent<number[]>
 
-    // point (4) : les attributs de votre modèle répartis en signaux publics
+    // point (4): the attributes of your model spread in public signals
     readonly day = signal<string | null>(null);
     readonly month = signal<string | null>(null);
     readonly year = signal<string | null>(null);
@@ -789,17 +834,17 @@ export class InputDateComponent extends FoehnInputComponent<number[]> {
 }
 ```
 
-Chaque `foehn-input-*` utilisé dans votre vue doit :
+Each `foehn-input-*` used in your view must:
 
-1. avoir un `id` qui concatène l'appel à la fonction `buildId()` et le nom de l'attribut de votre objet
-2. avoir un `name` qui concatène l'input **signal** `name()` et le nom de l'attribut de votre objet
-3. avoir un `label`
-4. utiliser votre signal public comme model en double-binding (banana in the box) : `[(model)]="day"`
-   lit et écrit le signal (sans les parenthèses)
-5. faire appel à `updateDate()` lors du déclenchement de l'événement `(modelChange)`
-6. faire appel à `handleUserInput()` lors du déclenchement de l'événement `(userInput)`
+1. have an `id` concatenating the call to the `buildId()` function and the name of the attribute of your object
+2. have a `name` concatenating the **signal** input `name()` and the name of the attribute of your object
+3. have a `label`
+4. use your public signal as model in two-way binding (banana in the box): `[(model)]="day"`
+   reads and writes the signal (without the parentheses)
+5. call `updateDate()` when the `(modelChange)` event is triggered
+6. call `handleUserInput()` when the `(userInput)` event is triggered
 
-> 💡 `name` est désormais un **input signal**. On l'invoque : `name() + '_day'` (et non plus
+> 💡 `name` is now an **input signal**. You call it: `name() + '_day'` (and no longer
 > `name + '_day'`).
 
 `input-date.component.html`
@@ -842,20 +887,20 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
 />
 ```
 
-### Afficher la validation globale du composant
+### Displaying the global validation of the component
 
-- Il faut ajouter dans la partie HTML de votre composant le code décrit ci-dessous
-- Remonter une erreur correspondant au `name` de votre composant lorsque celui-ci est utilisé dans
-  votre page de formulaire.
+- Add the code below in the HTML part of your component
+- Return an error matching the `name` of your component when it is used in
+  your form page.
 
-> 💡 Points **signals** à noter dans ce template :
+> 💡 **signals** points to note in this template:
 >
-> - `@if` remplace `*ngIf` et les attributs du composant sont des signaux : on les invoque
+> - `@if` replaces `*ngIf`, and the attributes of the component are signals: you call them
 >   (`label()`, `required()`, `isLabelSrOnly()`, `hideNotRequiredExtraLabel()`, `helpText()`).
-> - `[ngClass]` est remplacé par des bindings `[class.xxx]="..."`.
+> - `[ngClass]` is replaced by `[class.xxx]="..."` bindings.
 
 ```html
-<!-- (obligatoire) Affichera une barre verticale rouge sur l'entier du composant -->
+<!-- (mandatory) Displays a red vertical bar on the whole component -->
 <div
     class="form-group"
     [class.has-danger]="hasErrorsToDisplay()"
@@ -863,12 +908,12 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
     [attr.id]="buildId('Container')"
     tabindex="-1"
 >
-    <!-- (obligatoire) Permet de regrouper vos champs pour une validation globale -->
+    <!-- (mandatory) Groups your fields for a global validation -->
     <fieldset
         [attr.aria-describedby]="getDescribedBy()"
         [attr.aria-invalid]="hasErrorsToDisplay() || null"
     >
-        <!-- (facultatif) Seulement si vous souhaitez afficher un label/legend global à votre composant -->
+        <!-- (optional) Only if you want to display a global label/legend for your component -->
         @if (!!label()) {
         <legend
             [class.visually-hidden]="isLabelSrOnly()"
@@ -883,10 +928,10 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
         </legend>
         }
 
-        <!-- (obligatoire) -->
+        <!-- (mandatory) -->
         <foehn-validation-alerts [component]="this" />
 
-        <!-- (facultatif) Seulement si vous souhaitez pouvoir afficher un helpText global au composant -->
+        <!-- (optional) Only if you want to be able to display a global helpText for the component -->
         @if (helpText()) {
         <small
             [attr.id]="buildId() + 'Help'"
@@ -895,36 +940,36 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
         ></small>
         }
 
-        <!-- ...vos foehn-input-* ici -->
+        <!-- ...your foehn-input-* here -->
     </fieldset>
 </div>
 ```
 
-### Éviter des problèmes d'affichage d'erreurs dans une boucle `@for`
+### Avoiding error display problems in a `@for` loop
 
-> ⚠️ Ne pas oublier de mettre un `track` avec un identifiant unique dans la boucle `@for` sinon la
-> validation ne s'affichera pas. Quand un identifiant unique tel que `id` n'est pas possible, tracker
-> par objet ou, en dernier recours, `track $index`.
+> ⚠️ Don't forget to put a `track` with a unique identifier in the `@for` loop, otherwise the
+> validation won't be displayed. When a unique identifier such as `id` isn't possible, track
+> by object or, as a last resort, `track $index`.
 
-> ℹ️ Dans une boucle `@for` d'Angular avec un composant `FoehnInputComponent`, si vous validez votre
-> formulaire, les erreurs remontées sont synchronisées avec l'index de vos composants répétés dans la
-> boucle.
+> ℹ️ In an Angular `@for` loop with a `FoehnInputComponent` component, if you validate your
+> form, the errors returned are synchronized with the index of your components repeated in the
+> loop.
 >
-> **Scénario :** Dans votre liste, lorsque vous supprimez un composant qui contient des erreurs à
-> l'index 0 (par ex.) et que le composant suivant (index 1) n'a pas d'erreur ou pas les mêmes
-> erreurs, alors ce dernier se retrouve avec les erreurs du composant fraîchement supprimé à
-> l'index 0.
+> **Scenario:** In your list, when you remove a component that has errors at
+> index 0 (for example) and the next component (index 1) has no errors or not the same
+> errors, then the latter ends up with the errors of the component just removed at
+> index 0.
 >
-> **Explication :** Ce phénomène est dû au fait que les erreurs remontées par GESDEM ne se
-> rafraîchissent que lors de la demande de sauvegarde des données. Du coup, le composant supprimé à
-> l'index 0 est remplacé par celui à l'index 1 mais les erreurs à l'index 0, elles, existent toujours
-> et se reportent donc sur le composant venant de l'index 1.
+> **Explanation:** This happens because the errors returned by GESDEM are only
+> refreshed when the data is saved. So the component removed at
+> index 0 is replaced by the one at index 1, but the errors at index 0 still exist
+> and are therefore carried over to the component coming from index 1.
 
-Voici la bonne pratique à mettre en place pour palier à ces problèmes d'affichage d'erreurs dans une
-boucle `@for`.
+Here is the good practice to put in place to work around these error display problems in a
+`@for` loop.
 
-Lorsque vous supprimez un élément dans votre liste, vous devez appeler une méthode se trouvant dans
-votre `AbstractPageComponent`. Cette méthode contiendra le code suivant :
+When you remove an item from your list, you must call a method of
+your `AbstractPageComponent`. This method will contain the following code:
 
 ```ts
 /*
@@ -934,30 +979,30 @@ votre `AbstractPageComponent`. Cette méthode contiendra le code suivant :
 this._gesdemService.validate(this.form).pipe(first()).subscribe();
 ```
 
-Voici un exemple de page de formulaire contenant cette méthode (1) :
+Here is an example of a form page containing this method (1):
 
-> 💡 Plus de `constructor` : on fait de l'**inject**. Les dépendances de `AbstractPageComponent`
-> (dont `_dictionaryService` et `_gesdemService`) sont déjà injectées dans la classe abstraite. Pour
-> vos propres dépendances, utilisez `inject()`.
+> 💡 No more `constructor`: we use **inject**. The dependencies of `AbstractPageComponent`
+> (including `_dictionaryService` and `_gesdemService`) are already injected in the abstract class. For
+> your own dependencies, use `inject()`.
 
 ```ts
 @Component({
-    templateUrl: './votre-page.component.html',
+    templateUrl: './your-page.component.html',
     imports: [
-        // ... vos composants foehn-*
+        // ... your foehn-* components
     ],
 })
-export class VotrePageComponent
+export class YourPageComponent
     extends AbstractPageComponent<BusinessForm>
     implements OnInit
 {
-    // vos propres dépendances : inject() au lieu du constructor
+    // your own dependencies: inject() instead of the constructor
     private readonly metaService = inject(MetaService);
 
     ngOnInit(): void {
         super.ngOnInit();
         this.setPageTitle(
-            this._dictionaryService.getKeySync('votre-page.title'),
+            this._dictionaryService.getKeySync('your-page.title'),
         );
     }
 
@@ -976,12 +1021,12 @@ export class VotrePageComponent
 }
 ```
 
-Il ne tient qu'à vous de décider comment appeler cette méthode lors de la suppression de l'élément de
-votre liste.
+It's up to you to decide how to call this method when the item is removed from
+your list.
 
-Voici une manière élégante de gérer vos listes d'éléments :
+Here is an elegant way to handle your lists of items:
 
-- Structure des dossiers et fichiers
+- Structure of the folders and files
 
 ```text
 demande-page/
@@ -998,7 +1043,7 @@ demande-page/
 
 **vehicule-item**
 
-`vehicule-item.component.html` contient le bouton pour la suppression de l'élément dans la liste (1).
+`vehicule-item.component.html` contains the button removing the item from the list (1).
 
 ```html
 <div
@@ -1011,7 +1056,7 @@ demande-page/
     <foehn-validation-alerts [component]="this" />
 
     <div class="row d-flex align-items-end vehicule-infos">
-        <!-- ... vos composants foehn-input-* -->
+        <!-- ... your foehn-input-* components -->
 
         <div class="col-md-2 mt-md-0 mt-xs-2">
             <button class="btn btn-danger" (click)="removeVehicule()">
@@ -1023,10 +1068,10 @@ demande-page/
 </div>
 ```
 
-`vehicule-item.component.ts` contient la fonction de suppression qui va remonter l'événement à son
-parent (la liste des éléments).
+`vehicule-item.component.ts` contains the removal function, which sends the event up to its
+parent (the list of items).
 
-> 💡 `@Output() + EventEmitter` sont remplacés par la fonction `output()`.
+> 💡 `@Output() + EventEmitter` are replaced by the `output()` function.
 
 ```ts
 @Component({
@@ -1040,7 +1085,7 @@ parent (la liste des éléments).
     ],
     imports: [
         FoehnValidationAlertsComponent,
-        // ... vos foehn-input-*
+        // ... your foehn-input-*
         SdkDictionaryPipe,
     ],
 })
@@ -1057,11 +1102,11 @@ export class VehiculeItemComponent extends FoehnInputComponent<Vehicule> {
 
 **vehicules-list**
 
-`vehicules-list.component.html` contient votre boucle `@for` (1) et votre composant répétable (2) qui
-devra lui aussi remonter l'événement.
+`vehicules-list.component.html` contains your `@for` loop (1) and your repeatable component (2), which
+must also send the event up.
 
-> ⚠️ Dans la boucle `@for` ne pas oublier de mettre un `track` (identifiant unique) sinon la
-> validation ne s'affichera pas. Ici nous trackons par exemple avec `vehicule.id`.
+> ⚠️ In the `@for` loop, don't forget to put a `track` (unique identifier), otherwise the
+> validation won't be displayed. Here, for example, we track with `vehicule.id`.
 
 ```html
 <div
@@ -1094,9 +1139,9 @@ devra lui aussi remonter l'événement.
     ></small>
     }
 
-    <!-- (1) votre boucle @for + track (identifiant unique) -->
+    <!-- (1) your @for loop + track (unique identifier) -->
     @for (vehicule of vehicules(); track vehicule.id; let i = $index) {
-    <!-- (2) votre composant réutilisable -->
+    <!-- (2) your reusable component -->
     <app-vehicule-item
         [name]="name() + '[' + i + ']'"
         [model]="vehicule"
@@ -1112,15 +1157,15 @@ devra lui aussi remonter l'événement.
 </div>
 ```
 
-> 💡 Le `name` est un input signal : `[name]="name() + '[' + i + ']'"` (et non plus
+> 💡 The `name` is an input signal: `[name]="name() + '[' + i + ']'"` (and no longer
 > `[name]="name + '[' + i + ']'"`).
 >
-> 💡 La variable d'une boucle `@for` ne peut pas être modifiée : on passe l'élément avec `[model]` et
-> on remplace l'élément de la liste dans `updateVehiculesList()` (appelée par `(modelChange)`).
+> 💡 The variable of a `@for` loop can't be modified: the item is passed with `[model]`, and
+> the item of the list is replaced in `updateVehiculesList()` (called by `(modelChange)`).
 
-`vehicules-list.component.ts` remonte à son tour l'événement (1) au parent (`AbstractPageComponent`)
-ainsi que supprimer l'élément de la liste (2). C'est aussi ici que vous pouvez gérer l'ajout d'un
-élément (3).
+`vehicules-list.component.ts` in turn sends the event (1) up to the parent (`AbstractPageComponent`)
+and removes the item from the list (2). This is also where you can handle the addition of an
+item (3).
 
 ```ts
 @Component({
@@ -1139,25 +1184,25 @@ ainsi que supprimer l'élément de la liste (2). C'est aussi ici que vous pouvez
     ],
 })
 export class VehiculesListComponent extends FoehnInputComponent<Vehicule[]> {
-    readonly removedVehicule = output<void>(); // (1) événement à remonter au parent
+    readonly removedVehicule = output<void>(); // (1) event to send up to the parent
 
-    // Signal contenant vos éléments répétables : il est remplacé, jamais modifié sur place
+    // Signal holding your repeatable items: it is replaced, never modified in place
     readonly vehicules = signal<Vehicule[]>([]);
 
     updateVehiculesList(vehicule: Vehicule, index: number): void {
         this.vehicules.update((vehicules) =>
             vehicules.map((item, i) => (i === index ? vehicule : item)),
         );
-        this.getValidValueAndUpdateNgModel(); // Mise à jour de votre modèle
+        this.getValidValueAndUpdateNgModel(); // Update of your model
     }
 
     handleRemovedVehicule(index: number): void {
-        // (2) votre fonction de suppression de l'élément ainsi que la transmission de l'évènement
+        // (2) your function removing the item and sending the event
         this.vehicules.update((vehicules) =>
             vehicules.filter((_vehicule, i) => i !== index),
-        ); // suppression de l'élément
-        this.getValidValueAndUpdateNgModel(); // Mise à jour de votre modèle
-        this.removedVehicule.emit(); // (1) on remonte l'évènement
+        ); // removal of the item
+        this.getValidValueAndUpdateNgModel(); // Update of your model
+        this.removedVehicule.emit(); // (1) the event is sent up
     }
 
     override onModelChange(value: Vehicule[] | null): void {
@@ -1165,19 +1210,19 @@ export class VehiculesListComponent extends FoehnInputComponent<Vehicule[]> {
     }
 
     addVehicule(): void {
-        // (3) Gestion de l'ajout d'un élément
+        // (3) Handling of the addition of an item
         // ...code
     }
 }
 ```
 
-> 💡 Plus besoin de définir une `trackByFn` dédiée : la nouvelle syntaxe `@for` utilise directement
-> l'expression `track` (ici `vehicule.id`).
+> 💡 No need to define a dedicated `trackByFn` anymore: the new `@for` syntax directly uses
+> the `track` expression (here `vehicule.id`).
 
 **demande-page**
 
-`demande-page.component.html` utilisera votre composant de liste de véhicule (1) et écoutera pour
-l'événement de suppression (2).
+`demande-page.component.html` uses your vehicle list component (1) and listens to
+the removal event (2).
 
 ```html
 <foehn-form>
@@ -1191,7 +1236,7 @@ l'événement de suppression (2).
         [required]="true"
         (removedVehicule)="handleRemovedVehicule()"
     />
-    <!-- (1) Utilisation de votre liste - (2) Appel de la méthode qui sauvegardera les données dans GESDEM afin de rafraîchir les erreurs -->
+    <!-- (1) Use of your list - (2) Call of the method saving the data in GESDEM to refresh the errors -->
 
     <foehn-navigation
         id="navigation"
@@ -1201,8 +1246,8 @@ l'événement de suppression (2).
 </foehn-form>
 ```
 
-`demande-page.component.ts` se chargera de l'appel à GESDEM afin de re-générer les erreurs du
-formulaire et ainsi rafraîchir l'index.
+`demande-page.component.ts` calls GESDEM to generate the errors of the
+form again, and thus refresh the index.
 
 ```ts
 @Component({
@@ -1224,20 +1269,20 @@ export class DemandePageComponent
 }
 ```
 
-## Validation du formulaire
+## Form validation
 
-> ℹ️ Lors de la sauvegarde de votre formulaire dans GESDEM, l'`AbstractPageComponent` gère pour vous
-> l'affichage éventuel des erreurs.
+> ℹ️ When your form is saved in GESDEM, the `AbstractPageComponent` handles the
+> display of the errors for you.
 >
-> Si par contre vous souhaitez sauvegarder les données ailleurs que dans GESDEM, vous serez confronté
-> à la gestion manuelle de l'affichage des erreurs.
+> If, however, you want to save the data somewhere else than in GESDEM, you will have to handle
+> the display of the errors manually.
 
-### Gestion standard
+### Standard handling
 
-> ℹ️ Lors de l'enregistrement de vos données dans GESDEM, l'affichage des erreurs est automatiquement
-> géré pour vous. Cependant, vous devez impérativement respecter certaines règles.
+> ℹ️ When your data is saved in GESDEM, the display of the errors is handled automatically
+> for you. However, you must respect some rules.
 
-Prenons un exemple de modèle simple côté front à deux niveaux de profondeur :
+Let's take an example of a simple front-end model with two levels of depth:
 
 `identification.ts`
 
@@ -1257,8 +1302,8 @@ export class BusinessForm {
 }
 ```
 
-> ⚠️ Le modèle ci-dessus devra impérativement être reflété dans le `name` de vos composants
-> `foehn-input-*` de votre page.
+> ⚠️ The model above must be reflected in the `name` of the `foehn-input-*`
+> components of your page.
 
 `page-1.html`
 
@@ -1267,7 +1312,7 @@ export class BusinessForm {
     [(model)]="form.identification.firstName"
     name="identification.firstName"
 />
-<!-- 2 niveaux de profondeur -->
+<!-- 2 levels of depth -->
 
 <foehn-input-text
     [(model)]="form.identification.lastName"
@@ -1275,26 +1320,26 @@ export class BusinessForm {
 />
 
 <foehn-boolean-checkbox [(model)]="form.acceptCookies" name="acceptCookies" />
-<!-- 1 niveau de profondeur -->
+<!-- 1 level of depth -->
 ```
 
-- Côté back-end, vous pouvez gérer vos erreurs grâce aux annotations (`@NotEmpty`, `@NotNull`, ...),
-  et **prestations-be** fera le reste pour vous.
-- Si vous souhaitez remonter une erreur spécifique à un champ de votre formulaire, voici la syntaxe :
+- On the back-end side, you can handle your errors with the annotations (`@NotEmpty`, `@NotNull`, ...),
+  and **prestations-be** does the rest for you.
+- If you want to return an error specific to a field of your form, here is the syntax:
 
 ```java
-new AbstractSdkController.FormError("identification.lastName", "ErrorCodeHere", "Le nom est obligatoire si vous ne spécifiez pas de prénom")
+new AbstractSdkController.FormError("identification.lastName", "ErrorCodeHere", "The last name is required if you don't specify a first name")
 ```
 
-> ⚠️ Le nom de l'erreur doit impérativement correspondre au nom de votre composant dans votre page
-> HTML.
+> ⚠️ The name of the error must match the name of your component in your HTML
+> page.
 
-### Gestion manuelle
+### Manual handling
 
 #### Back-end
 
-Côté back-end JAVA, le serveur devra retourner un objet contenant les erreurs du formulaire afin
-d'être compatible avec prestations-ng.
+On the JAVA back-end side, the server must return an object containing the errors of the form to
+be compatible with prestations-ng.
 
 ```java
 @Getter
@@ -1308,23 +1353,23 @@ public class PostResponse<T> {
 
     @Builder.Default
     private List<AbstractSdkController.FormError> errors = new ArrayList<>();
-    // AbstractSdkController.FormError vient de prestations-be qui est la partie backend de prestations-ng
+    // AbstractSdkController.FormError comes from prestations-be, the backend part of prestations-ng
 }
 ```
 
-Ensuite, ajoutez vos erreurs dans votre modèle avant de le retourner au front-end :
+Then, add your errors to your model before returning it to the front-end:
 
 ```java
 List<AbstractSdkController.FormError> errors = new ArrayList<>();
-errors.add(new AbstractSdkController.FormError("identification.lastName", "ErrorCodeHere", "Le nom est obligatoire si vous ne spécifiez pas de prénom"));
+errors.add(new AbstractSdkController.FormError("identification.lastName", "ErrorCodeHere", "The last name is required if you don't specify a first name"));
 
 PostResponse.<MyObject>builder().dto(myObject).errors(errors).build();
 ```
 
 #### Front-end
 
-Côté front-end, comme la validation standard, les noms de vos composants `foehn-input-*` de votre
-page HTML et le nom de vos erreurs devront correspondre.
+On the front-end side, as for the standard validation, the names of the `foehn-input-*` components of your
+HTML page and the names of your errors must match.
 
 ```html
 <foehn-input-text
@@ -1333,15 +1378,15 @@ page HTML et le nom de vos erreurs devront correspondre.
 />
 ```
 
-> ⚠️ Au retour de la sauvegarde de vos données, vous allez devoir déclencher manuellement la
-> validation.
+> ⚠️ When your data has been saved, you will have to trigger the validation
+> manually.
 
-1. Dans votre `page.ts`, créez une fonction `handleValidationErrors` pour gérer l'affichage des
-   erreurs.
-2. Cette fonction sera appelée au retour du back-end.
+1. In your `page.ts`, create a `handleValidationErrors` function to handle the display of the
+   errors.
+2. This function is called when the back-end answers.
 
-> 💡 Point **signals** : plus de `@ViewChild('formWithModels')`. Pour utiliser un composant dans le
-> TypeScript, on utilise un **signal** `viewChild(...)`. On accède ensuite à l'instance en l'invoquant :
+> 💡 **signals** point: no more `@ViewChild('formWithModels')`. To use a component in the
+> TypeScript, use a `viewChild(...)` **signal**. Then access the instance by calling it:
 > `this.formWithModels()`.
 
 `page.ts`
@@ -1358,41 +1403,41 @@ import {
     // ...
 })
 export class ... extends AbstractPageComponent<YOUR_MODEL> implements OnInit {
-    // point (7 des signaux) : un signal viewChild au lieu de @ViewChild
+    // a viewChild signal instead of @ViewChild
     readonly formWithModels = viewChild(FoehnFormComponent);
 
-    // vos propres dépendances via inject()
+    // your own dependencies with inject()
     private readonly httpClient = inject(HttpClient);
 
     ngOnInit(): void {
         super.ngOnInit();
-        // Activer l'affichage des erreurs
+        // Enable the display of the errors
         this._validationHandlerService.shouldDisplayErrors(true);
     }
 
-    // Fonction de sauvegarde
+    // Save function
     save(): void {
-        // Activer l'affichage des erreurs
+        // Enable the display of the errors
         this._validationHandlerService.shouldDisplayErrors(true);
-        // Appel au back pour faire votre validation. Le callback ne modifie aucun champ de la page :
-        // les services de prestations-ng (growl, erreurs) rafraîchissent eux-mêmes l'affichage, aussi
-        // sans zone.js. Un état propre à la page modifié ici devrait être un signal.
+        // Call to the back-end to do your validation. The callback modifies no field of the page:
+        // the services of prestations-ng (growl, errors) refresh the display themselves, also
+        // without zone.js. A state of the page modified here should be a signal.
         this.httpClient
-            .post<PostResponse>('api_url_ici', votre_objet)
+            .post<PostResponse>('api_url_here', your_object)
             .subscribe((response: PostResponse) => {
                 if (!response.errors.length) {
-                    // On prévient l'utilisateur que tout s'est bien passé
+                    // Tell the user that everything went well
                     this._growlService.addWithType(
                         GrowlType.SUCCESS,
-                        'Enregistrement effectué avec succès',
+                        'Saved successfully',
                     );
                 }
-                // Gestion des erreurs au retour du back-end
+                // Handling of the errors returned by the back-end
                 this.handleValidationErrors(response.errors); // point (2)
             });
     }
 
-    // Affichage des erreurs
+    // Display of the errors
     private handleValidationErrors(errors: ErrorTemplate[]): void {
         // point (1)
         const form = this.formWithModels();
@@ -1410,21 +1455,21 @@ export class ... extends AbstractPageComponent<YOUR_MODEL> implements OnInit {
 
 ```html
 <foehn-form>
-    <!-- ... vos composants foehn-input-* -->
+    <!-- ... your foehn-input-* components -->
 </foehn-form>
 ```
 
-## Validation manuelle d'un composant
+## Manual validation of a component
 
-### Cacher une erreur
+### Hiding an error
 
-> ✅ Utiliser la fonction `markAsDirty()` permet de simuler une interaction avec le composant.
+> ✅ The `markAsDirty()` function simulates an interaction with the component.
 >
-> ℹ️ Permet de cacher l'erreur d'un composant foehn-input en erreur.
+> ℹ️ Hides the error of a foehn-input component in error.
 
-### Afficher une erreur
+### Displaying an error
 
-> ✅ Utiliser la fonction `markAsPristine()` remet le composant dans son état d'origine comme si
-> aucune interaction n'avait été effectuée.
+> ✅ The `markAsPristine()` function puts the component back in its original state, as if
+> no interaction had happened.
 >
-> ℹ️ Permet d'afficher l'erreur d'un composant foehn-input en erreur.
+> ℹ️ Displays the error of a foehn-input component in error.