@dsivd/prestations-ng 19.2.0-beta.4 → 19.2.0-beta.6

package/CHANGELOG.md

@@ -21,6 +21,132 @@ Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information
     - 🚨 `FoehnListItemDescription` now takes a type parameter: `FoehnListItemDescription<T>`.
       `getFormattedValue(item: T)` and `hideIfEmpty(item: T)` receive your item type directly, no cast needed.
       Replace `FoehnListItemDescription[]` with `FoehnListItemDescription<MyItem>[]` in your project.
+- 🚀 **prestations-ng is now zoneless**: its components no longer need zone.js to be refreshed. They keep
+  working in an application using zone.js, and your application can now drop zone.js, see
+  [UPGRADING_V19.md](UPGRADING_V19.md#zoneless-optional-but-recommended).
+    - the state displayed by the components is held by signals (`signal()`, `computed()`, `linkedSignal()`)
+    - what was waiting for `NgZone.onMicrotaskEmpty` or a `setTimeout()` to reach the rendered DOM (focus,
+      scroll, value displayed by the autocompletes, default values...) now uses `afterNextRender()`
+    - the short asynchronous work of the components is tracked with `PendingTasks`, so that
+      `ApplicationRef.whenStable()` (and `fixture.whenStable()` in your tests) waits for it: the debounced
+      `userInput` output of the `foehn-input-*` components, the debounced time of `foehn-input-date-time`,
+      the locale of `foehn-date-picker`, the default country and the sanitized model of `foehn-input-address`
+    - `providePrestationsNgCore()` now provides `provideBrowserGlobalErrorListeners()`: without zone.js, the
+      errors thrown in a timer or a promise still reach your `ErrorHandler`
+- 🚨 **The inputs and outputs of the components are unchanged**, but the following public fields are now
+  signals. If your code reads them (e.g. through `viewChild()` or in your tests), call them (`isVisible()`
+  instead of `isVisible`) and write them with `.set()`. Those marked _read-only_ are `computed()` signals.
+    - `foehn-agenda`: `srAnnouncements`
+    - `foehn-agenda-timeslot-panel`: `selectedTimeSlot`, `timeInputValue`, `isClosed`, `timeSlots`
+      (_read-only_), `timeslotRemaining` (_read-only_), `canClose` (_read-only_)
+    - `foehn-autocomplete`: `searchValue`, `inputHasFocus`, `hideSuggestions`, `displayedElements`,
+      `notificationMessageUpdated`, `VIEW_PORT_HEIGHT` (_read-only_)
+    - `foehn-multiselect-autocomplete`: `autocompleteInputValue`, `showEmptyListMessage`, `srAnnouncements`
+    - `foehn-select`, `foehn-radio`, `foehn-checkbox` and the autocompletes (`FoehnCheckableGroupComponent`):
+      `groupedElements`
+    - `foehn-radio`: `inputValue`
+    - `foehn-confirm-modal`: `isVisible` (`content` is now a read-only field instead of a getter)
+    - `foehn-date-picker`: `hostId`, `weekDays`, `weeks`, `selectedDate`, `monthListItem`
+    - `foehn-dropdown-menu`: `isDropdownVisible`, `popupPosition`
+    - `foehn-header`: `connectedEsMenu` (_read-only_)
+    - `foehn-input-address`: `country`, `locality`, `street`, `houseNumber`, `postOfficeBoxText`,
+      `addressLine1`, `addressLine2` (linked to the model: they follow it and can still be set),
+      `streetCustomErrors`
+    - `foehn-input-foreign-locality`: `zipCode`, `longName`
+    - `foehn-input-foreign-street`: `longName`
+    - `foehn-input-date`: `day`, `month`, `year`, `datePickerModel`
+    - `foehn-input-date-time`: `date`, `time` (linked to the model: they follow it and can still be set)
+    - `foehn-input-time`: `hour`, `minute` (linked to the model: they follow it and can still be set)
+    - `foehn-input-nav13`: `part2`, `part3`, `part4`
+    - `foehn-input-textarea`: `isCharCountExceeded`, `charCountLeft`, `charCountLabel`, `ariaLiveStatus`
+    - `foehn-list` and `foehn-table`: `currentPage`, `filteredList`
+    - `foehn-list-summary`: `listCopyForTable`, `tableConfiguration` (_read-only_)
+    - `foehn-notfound`: `seconds`
+    - `foehn-page`: `pageTitle`
+    - `foehn-page-counter`: `isStable` (was an `Observable<boolean>`)
+    - `foehn-page-modal`: `wrongPublicModalVisible`, `formattedPublicsCibles`
+    - `foehn-picture-upload`: `pictureToCrop`, `croppedPictureAsBlob`, `loading`
+    - `foehn-status-progress-bar`: `isTransmitted`
+    - `gesdem-action-recovery-login`: `demandeNotFound`, `rateLimited`, `rateLimitCounter`, `otpRecipient`,
+      `otp`
+    - `gesdem-action-recovery-registration`: `mailSent`, `model` (replaced by the new `updateModel()` method,
+      never mutated)
+    - `epayment-form` (`SdkEpaymentComponent`): `failureModalDisplayed`, `redirectModalDisplayed`
+    - `captcha` (`SdkRecaptchaComponent`): `isLoaded`, `hasLoadingError`
+    - `redirector` (`RedirectComponent`): `counter`
+- The lifecycle hooks that have nothing left to do are removed: `ngOnChanges()` of
+  `foehn-agenda-timeslot-panel`, `ngAfterViewInit()` of `foehn-list-summary`, `ngOnInit()` and `ngOnDestroy()`
+  of `captcha`.
+- `SdkDictionaryService.getKeySync()` reads a signal: a `computed()` or a template calling it is refreshed
+  when the dictionary is (re)loaded, e.g. when the language changes.
+- `foehn-autocomplete` and `foehn-multiselect-autocomplete`: the value to display, its reset, the default
+  values and the focus after a click on a suggestion are applied after the next rendering instead of in a
+  `setTimeout()`.
+- Unit tests of the library: Karma and Jasmine are replaced by Vitest 4 in browser mode (Playwright,
+  headless Chromium), see [CONTRIBUTING.md](CONTRIBUTING.md#unit-testing).
+- `core-js` is no longer a peer dependency: prestations-ng no longer imports it since 19.1.1, see
+  [UPGRADING_V19.md](UPGRADING_V19.md#core-js-is-no-longer-needed-since-1920).
+- `ng add @dsivd/prestations-ng` adds `iban` and `dayjs` (the CommonJS dependencies of prestations-ng) to the
+  `allowedCommonJsDependencies` of `angular.json`, instead of `core-js/modules/es.array.includes`, `iban` and
+  `zone.js/dist/zone-error`, and no longer sets `allowSyntheticDefaultImports` (implied by the `tsconfig.json` of
+  Angular 21: `"module": "preserve"` or `"moduleResolution": "bundler"`).
+
+### Deprecated
+
+- `AbstractMenuPageComponent.ngZone` is no longer used and will be removed: `NgZone.onStable` never emits
+  without zone.js.
+
+### Fixed
+
+- `providePrestationsNgCore()` registers again the HTTP interceptors lost with `FoehnPageModule` in 19.0.0: the
+  `foehn-transmit-waiting-modal` is displayed again during a long transmission, the warning before the expiration of
+  the session receives its date again, and a new version of the application deployed meanwhile is detected again.
+- `foehn-select`, `foehn-radio`, `foehn-checkbox` and the autocompletes:
+    - the model is no longer set back to its previous value when the parent changes `elements` and `model`
+      at the same time
+    - no more error when the component is destroyed while its `elementsUrl` is loading
+    - with a `defaultElementValue`, the model can be emptied again (e.g. set to `null` by the parent): the
+      default value was set back at once
+    - a change of the model or of `disabled` no longer processes the elements again (the default value, the
+      display of the model, the grouped elements and, for the autocompletes, the matching of the model)
+- `foehn-autocomplete`:
+    - the model is subscribed only once, whatever the number of times the elements are retrieved: the value
+      to display was selected again for each retrieval
+    - the height of the suggestion list always follows `itemHeightInSuggestionListInPx`, even before the first
+      search returning less than 5 suggestions
+    - dynamic list (`isSuggestionListDynamic`): a model already set is no longer reset, even for a moment
+      (`modelChange` emitted `null`, then the value again), when the loaded elements do not contain it; it is
+      displayed once the elements loaded for it contain it, including when they are given at once with the model
+    - `isSuggestionListDynamic` can change at runtime: only the matching of the current kind of list is active,
+      the matching of the previous kind went on
+    - dynamic list: a model changed by the project (another value, `null`) is displayed again; once a value had been
+      displayed, the display no longer followed the model. The elements loaded for the search of the user still do
+      not replace what they type.
+- `foehn-input-address`: the deferred clean-up of the model (hidden address lines and post office box) applies
+  to the latest model, it could restore a previous value (e.g. remove the default country); nothing is
+  updated anymore once the component is destroyed.
+- `foehn-multi-upload` and `foehn-bo-multi-upload`:
+    - after a failed upload (network, HTTP error), the next files are uploaded: nothing was uploaded anymore,
+      without any message, until the page was reloaded
+    - after a failed deletion (HTTP error, readonly document), the next files are deleted: nothing was deleted
+      anymore, and the error also reached the `ErrorHandler` as unhandled (its message is still displayed)
+- `PendingUploadService.removePendingFile()`: a file which is not pending no longer removes the last pending file.
+- `foehn-multi-upload` and `foehn-bo-multi-upload`: `customErrors` is used again for the errors which have a default
+  message (`413`, `415`, `500`, `FILENAME_TOO_LONG`, `FILENAME_SHOULD_NOT_CONTAIN`...): the default messages
+  overwrote the given object. Its messages can use `{fileName}` and `{fileMaxSize}`, `{fileExtensions}`,
+  `{maxFileNameLength}`, `{fileNameIllegalCharacters}` (as documented) as well as `%1$s` and `%2$s`.
+- `UploaderHelper`: `getDefaultCustomErrors()` and `mergeCustomErrors()` are added, `createDefaultCustomErrors()` is
+  deprecated as it overwrites the given custom errors.
+- `foehn-agenda-timeslot-panel`: when the time slots of the day change, the panel is closed again (only the
+  first time slots are displayed) unless the selected slot would be hidden; the list was cut while the panel
+  stayed open.
+- `foehn-breadcrumb`: a breadcrumb updated in place is displayed again when it is emitted.
+- `fromDictionary` pipe: its subscription is released when the pipe is destroyed.
+- `SdkLogsService`: a log is not sent anymore once the application is destroyed (e.g. at the end of a test),
+  when it made the `HttpClient` throw `NG0205`.
+- `ng add @dsivd/prestations-ng` works again on the Angular workspaces created since Angular 14: it failed because
+  `angular.json` no longer has a `defaultProject` (the dependencies are now added to every application), then
+  because of the comments of `tsconfig.json` (now kept, like its formatting).
 
 ## [19.1.1]
 

package/CONTRIBUTING.md

@@ -4,9 +4,11 @@
 
 - Node 22.18+
 - npm 10.2+
-- Chrome or Chromium
 - G++
 
+Chromium is downloaded by Puppeteer during `npm install`: it is used by the unit tests (through Playwright)
+and by the e2e tests (Cypress).
+
 ## Developing using the Dev Tool
 
 Since version `8`, `prestations-ng` has a standalone application that allows
@@ -218,6 +220,43 @@ export NODE_OPTIONS=--max_old_space_size=4096
 
 Use at your own risks.
 
+## Unit testing
+
+The unit tests run with [Vitest](https://vitest.dev/) through the `@angular/build:unit-test` builder of the
+Angular CLI, in the browser mode of Vitest: [Playwright](https://playwright.dev/) drives the headless Chromium
+downloaded by Puppeteer (another browser can be used by setting the `CHROME_BIN` environment variable).
+Neither the library nor the Dev Tool uses zone.js: the tests are **zoneless** too.
+
+| Command                   | Tests                                                            |
+| ------------------------- | ---------------------------------------------------------------- |
+| `npm run test:lib`        | library (`projects/prestations-ng/src/**/*.spec.ts`)             |
+| `npm run test:devtool`    | Dev Tool (`src/**/*.spec.ts`)                                    |
+| `npm run test:schematics` | schematics, in Node.js (`projects/prestations-ng/schematics`)    |
+| `npm run test:eslint`     | ESLint plugin, in Node.js (`projects/prestations-ng/src/eslint`) |
+| `npm test`                | builds the library, then runs all of the above                   |
+
+- `ng test prestations-ng` without `--no-watch` runs the tests in watch mode.
+- Only some specs: `ng test prestations-ng --no-watch --include=foehn-table` (folder or file, relative to
+  `projects/prestations-ng/src`), and `--filter="FoehnTableComponent"` to filter by test name.
+- The configuration is in `angular.json` (`test` targets), in the `vitest-base.config.mts` file of each project and in
+  the `vitest-base.config.mts` file they share, at the root.
+  The coverage of the library is written in `projects/prestations-ng/coverage` (read by SonarQube).
+- The configuration files of the tools (`.mjs`/`.mts`, e.g. `eslint.config.mjs`, `vitest-base.config.*`) are listed in
+  `tsconfig.config.json`, referenced by `tsconfig.json`: the IDE checks them with the options of the project instead of
+  its default ones. Add any new configuration file to its `files`.
+
+### Writing zoneless tests
+
+- Use `vi` (`vi.spyOn()`, `vi.fn()`...), the Jest-like API of Vitest. Unlike `spyOn()` in Jasmine,
+  `vi.spyOn()` calls the original method: add `.mockReturnValue(...)` or `.mockImplementation(...)` to stub it.
+  The spies are restored before each test.
+- `fakeAsync()`, `tick()`, `flush()` and `waitForAsync()` require zone.js: use `async` tests with
+  `await fixture.whenStable()`, or `vi.useFakeTimers()` and `await vi.advanceTimersByTimeAsync(ms)`.
+- `fixture.whenStable()` waits for the change detection and the Angular pending tasks (HTTP requests...), not
+  for the timers.
+- Without zone.js, `fixture.detectChanges()` only refreshes the views that have been notified. A test (or a test
+  host component) changing the state of a component must use signals, as the components do.
+
 ## E2E testing
 
 `Protractor` is no longer included in new Angular projects as of Angular 12.

package/GOOD_PRACTICES.md

@@ -2,7 +2,9 @@
 
 > 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).
+> 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)).
 >
 > 📚 Pour aller plus loin :
 > [ANGULAR_SIGNALS.md](ANGULAR_SIGNALS.md) · [COMPONENTS.md](COMPONENTS.md) · [UPGRADING_V19.md](UPGRADING_V19.md)
@@ -19,6 +21,9 @@
     - [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)
 - [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_)
@@ -151,8 +156,7 @@ Exemple :
 <foehn-modal
     modalHeaderText="Modal dialog"
     modalSize="modal-lg"
-    [isModalVisible]="isModalVisible"
-    (isModalVisibleChange)="updateVisibilityStatus($event)"
+    [(isModalVisible)]="isModalVisible"
     [modalTriggerHtmlElement]="modalTrigger"
 >
     <!-- on utilise le déclencheur -->
@@ -160,6 +164,15 @@ Exemple :
 </foehn-modal>
 ```
 
+```ts
+// Un signal : la modale s'affiche et se masque aussi sans zone.js
+readonly isModalVisible = signal(false);
+
+openModal(): void {
+    this.isModalVisible.set(true);
+}
+```
+
 ### La balise `<label>`
 
 > ⚠️ Tous nos composants `foehn-input-*` disposent d'une balise label ([`<label>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/label))
@@ -383,6 +396,97 @@ export class PageOneComponent
 </div>
 ```
 
+## Application zoneless
+
+> ℹ️ Depuis la v19.2, prestations-ng n'a plus besoin de zone.js et nous vous recommandons de rendre
+> votre application zoneless (`provideZonelessChangeDetection()`, voir
+> [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 :
+>
+> - 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()`,
+>   `toSignal()`, ...)
+> - `ChangeDetectorRef.markForCheck()` a été appelé, ce que fait le pipe `async` lorsqu'un observable
+>   émet
+
+### Afficher un état asynchrone
+
+> ⚠️ 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**.
+
+Ce qu'il ne faut **pas** faire :
+
+```ts
+isLoading = true;
+
+ngOnInit(): void {
+    this.myService.load().subscribe(() => {
+        this.isLoading = false; // pas affiché sans zone.js
+    });
+}
+```
+
+Ce qu'il **faut** faire :
+
+```ts
+readonly isLoading = signal(true);
+
+ngOnInit(): void {
+    this.myService.load().subscribe(() => {
+        this.isLoading.set(false);
+    });
+}
+```
+
+```html
+@if (isLoading()) {
+<p>{{ 'page.loading' | fromDictionary }}</p>
+}
+```
+
+> 💡 Pour un observable affiché tel quel, `toSignal(this.myService.load())` ou le pipe `async` font
+> le travail pour vous.
+
+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 :
+
+```ts
+private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
+ngOnInit(): void {
+    super.ngOnInit();
+    this.sessionInfoWithApplicationService.prefillForm((info) => {
+        this.form.email = info?.email ?? null;
+        this.changeDetectorRef.markForCheck();
+    });
+}
+```
+
+### Agir sur le DOM après le rendu
+
+> ⚠️ `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
+> `afterNextRender()`.
+
+```ts
+readonly detailsVisible = signal(false);
+readonly detailsField = viewChild<ElementRef<HTMLElement>>('detailsField');
+
+private readonly injector = inject(Injector);
+
+showDetails(): void {
+    this.detailsVisible.set(true);
+    // Le champ n'existe qu'une fois le détail rendu
+    afterNextRender(() => this.detailsField()?.nativeElement.focus(), {
+        injector: this.injector,
+    });
+}
+```
+
 ## Le routage de vos pages
 
 ### Formulaire simple
@@ -541,14 +645,14 @@ Votre composant doit :
 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 variables publiques utilisées dans
+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
-   variables publiques correspondant à votre modèle
+   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)
@@ -558,11 +662,14 @@ Votre composant doit :
 > - **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.
 
 `input-date.component.ts`
 
 ```ts
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, signal } from '@angular/core';
 
 import { FoehnInputComponent } from '../foehn-input/foehn-input.component';
 import { FoehnInputNumberComponent } from '../foehn-input/foehn-input-number.component';
@@ -591,10 +698,10 @@ import { SdkDictionaryPipe } from '../sdk-dictionary/sdk-dictionary.pipe';
 export class InputDateComponent extends FoehnInputComponent<number[]> {
     // point (3) : extends FoehnInputComponent<number[]>
 
-    // point (4) : les attributs de votre modèle répartis en variables publiques
-    day: string;
-    month: string;
-    year: string;
+    // point (4) : les attributs de votre modèle répartis en signaux publics
+    readonly day = signal<string | null>(null);
+    readonly month = signal<string | null>(null);
+    readonly year = signal<string | null>(null);
 
     // point (5)
     updateDate(): void {
@@ -613,24 +720,24 @@ export class InputDateComponent extends FoehnInputComponent<number[]> {
     }
 
     // point (7)
-    override onModelChange(value: number[]): void {
+    override onModelChange(value: number[] | null): void {
         if (value && value.length > 2) {
-            this.year = this.toString(value[0]);
-            this.month = this.toString(value[1]);
-            this.day = this.toString(value[2]);
+            this.year.set(this.toString(value[0]));
+            this.month.set(this.toString(value[1]));
+            this.day.set(this.toString(value[2]));
         } else if (!value) {
-            this.year = null;
-            this.month = null;
-            this.day = null;
+            this.year.set(null);
+            this.month.set(null);
+            this.day.set(null);
         }
     }
 
     // point (8)
     getValidValue(): number[] | null | undefined {
         if (
-            this.isEmpty(this.day) &&
-            this.isEmpty(this.month) &&
-            this.isEmpty(this.year)
+            this.isEmpty(this.day()) &&
+            this.isEmpty(this.month()) &&
+            this.isEmpty(this.year())
         ) {
             if (this.model_ !== undefined) {
                 return null;
@@ -640,9 +747,9 @@ export class InputDateComponent extends FoehnInputComponent<number[]> {
         }
 
         return [
-            this.toNumber(this.year),
-            this.toNumber(this.month),
-            this.toNumber(this.day),
+            this.toNumber(this.year()),
+            this.toNumber(this.month()),
+            this.toNumber(this.day()),
         ];
     }
 
@@ -655,7 +762,8 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
 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 variable publique comme model en double-binding (banana in the box)
+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)`
 
@@ -955,11 +1063,11 @@ devra lui aussi remonter l'événement.
     }
 
     <!-- (1) votre boucle @for + track (identifiant unique) -->
-    @for (vehicule of vehicules; track vehicule.id; let i = $index) {
+    @for (vehicule of vehicules(); track vehicule.id; let i = $index) {
     <!-- (2) votre composant réutilisable -->
     <app-vehicule-item
         [name]="name() + '[' + i + ']'"
-        [(model)]="vehicule"
+        [model]="vehicule"
         (modelChange)="updateVehiculesList($event, i)"
         (userInput)="handleUserInput($event, i)"
         (removedVehicule)="handleRemovedVehicule(i)"
@@ -974,6 +1082,9 @@ devra lui aussi remonter l'événement.
 
 > 💡 Le `name` est un input signal : `[name]="name() + '[' + i + ']'"` (et non plus
 > `[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)`).
 
 `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
@@ -998,15 +1109,29 @@ 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
 
-    vehicules: Vehicule[] = []; // Tableau contenant vos éléments répétables
+    // Signal contenant vos éléments répétables : il est remplacé, jamais modifié sur 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
+    }
 
     handleRemovedVehicule(index: number): void {
         // (2) votre fonction de suppression de l'élément ainsi que la transmission de l'évènement
-        this.vehicules.splice(index, 1); // suppression de l'élément
+        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
     }
 
+    override onModelChange(value: Vehicule[] | null): void {
+        this.vehicules.set(value ?? []);
+    }
+
     addVehicule(): void {
         // (3) Gestion de l'ajout d'un élément
         // ...code
@@ -1217,7 +1342,9 @@ export class ... extends AbstractPageComponent<YOUR_MODEL> implements OnInit {
     save(): void {
         // Activer l'affichage des erreurs
         this._validationHandlerService.shouldDisplayErrors(true);
-        // Appel au back pour faire votre validation
+        // 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.
         this.httpClient
             .post<PostResponse>('api_url_ici', votre_objet)
             .subscribe((response: PostResponse) => {

package/UPGRADING_V19.md

@@ -1485,6 +1485,136 @@ getListItemsDescription(): FoehnListItemDescription<MyItem>[] {
 
 The same applies to the function passed to `getListItemTitle`, which now receives a `MyItem`.
 
+### `core-js` is no longer needed (since 19.2.0)
+
+prestations-ng no longer imports `core-js` and no longer has it as a peer dependency. If your project does not
+import `core-js` itself, uninstall it:
+
+```bash
+npm uninstall core-js
+```
+
+Then, in your `angular.json` file, remove `"core-js/modules/es.array.includes"` from `"allowedCommonJsDependencies"`.
+The CommonJS dependencies of prestations-ng are now `"iban"` and `"dayjs"` (which also covers `dayjs/plugin/*` and
+`dayjs/locale/*`):
+
+```json
+"allowedCommonJsDependencies": ["iban", "dayjs"]
+```
+
+### Zoneless (optional but recommended)
+
+Since v19.2, prestations-ng does not need zone.js anymore: the state of its components is held by signals, which
+tell Angular when a component has to be refreshed. prestations-ng keeps working in an application using zone.js,
+so this step is optional, but a zoneless application is lighter, faster and easier to debug. See the
+[Angular zoneless guide](https://angular.dev/guide/zoneless).
+
+In any case, if your code reads some fields of the prestations-ng components (e.g. through `viewChild()` or in
+your tests), check the fields that are now signals in the [CHANGELOG](CHANGELOG.md#1920---should-be-aligned-with-prestations-be-192x).
+
+#### Enable the zoneless change detection
+
+Zoneless is the default since Angular 21: `ng update` added `provideZoneChangeDetection()` to keep zone.js in your
+application. Replace it in your `app.config.ts` (`providePrestationsNgCore()` already provides
+`provideBrowserGlobalErrorListeners()`, which reports to your `ErrorHandler` the errors zone.js used to catch):
+
+```diff
+export const appConfig: ApplicationConfig = {
+    providers: [
+-       provideZoneChangeDetection({ eventCoalescing: true }),
++       provideZonelessChangeDetection(),
+        providePrestationsNgCore(),
+        ...
+    ],
+};
+```
+
+Remove `zone.js` and `zone.js/testing` from the `polyfills` of the `build` and `test` targets in your
+`angular.json` (and from your `polyfills.ts` file if you still have one): without them, the `TestBed` is zoneless
+too.
+
+```diff
+"polyfills": [
+-   "zone.js"
+],
+```
+
+then uninstall zone.js:
+
+```bash
+npm uninstall zone.js
+```
+
+#### Check your components
+
+Without zone.js, Angular refreshes a component only when it is notified that something changed:
+
+- 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()` has been called, which is what the `async` pipe does when an observable emits
+
+A field modified elsewhere (in a `subscribe()`, a `setTimeout()`, a `Promise`, a callback...) is not displayed
+anymore until something else refreshes the component. Hold it in a signal (see
+[INTRODUCTION_ANGULAR_SIGNALS.md](INTRODUCTION_ANGULAR_SIGNALS.md)):
+
+```diff
+- isLoading = true;
++ readonly isLoading = signal(true);
+
+  ngOnInit(): void {
+      this.myService.load().subscribe(() => {
+-         this.isLoading = false;
++         this.isLoading.set(false);
+      });
+  }
+```
+
+```diff
+- @if (isLoading) {
++ @if (isLoading()) {
+```
+
+Pay attention to:
+
+- your pages (`AbstractPageComponent` and its subclasses): prestations-ng refreshes them when it sets `form` and
+  `reference`. But if you modify the form yourself in an asynchronous callback, e.g. the one given to
+  `SessionInfoWithApplicationService.prefillForm()` or a `subscribe()` of your own service, call
+  `markForCheck()` afterwards:
+
+    ```ts
+    private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
+    ngOnInit(): void {
+        super.ngOnInit();
+        this.sessionInfoWithApplicationService.prefillForm((info) => {
+            this.form.email = info?.email ?? null;
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    ```
+
+- `NgZone`: `onStable`, `onMicrotaskEmpty` and `onUnstable` never emit without zone.js, and `run()` or
+  `runOutsideAngular()` are useless. To act on the rendered DOM (focus, scroll...), replace them, as well as the
+  `setTimeout()` waiting for the view, by `afterNextRender()`. `AbstractMenuPageComponent.ngZone` is deprecated.
+
+    ```diff
+    - this.ngZone.onStable.pipe(first()).subscribe(() => this.focusFirstField());
+    + afterNextRender(() => this.focusFirstField(), { injector: this.injector });
+    ```
+
+#### Check your tests
+
+- `fakeAsync()`, `tick()`, `flush()` and `waitForAsync()` need zone.js: write `async` tests, with
+  `vi.useFakeTimers()` and `await vi.advanceTimersByTimeAsync(ms)` to control the timers (see
+  [Migrate to vitest](#migrate-to-vitest)).
+- `fixture.detectChanges()` only refreshes the views which have been notified, then checks that nothing changed
+  meanwhile: a field modified without notification makes the test fail with the error `NG0100`
+  (`ExpressionChangedAfterItHasBeenCheckedError`). Fix the component (signal, `markForCheck()`) rather than the
+  test.
+- `await fixture.whenStable()` waits for the change detection and for the pending tasks of the application
+  (e.g. the debounced `userInput` of the prestations-ng inputs), not for the timers.
+
 ### Last but not least, check if your application is working!!!
 
 #### Be sure your application gets a fresh start

package/eslint/configs/template-recommended.mjs

@@ -8,6 +8,8 @@ import templateRules from './template-rules.mjs';
  *
  * Meant for the `extends` of a `**\/*.html` block. It brings its own parser and plugins,
  * so do not spread `angular.configs.templateRecommended` alongside it.
+ *
+ * @returns {import('typescript-eslint').ConfigArray}
  */
 const templateRecommended = (plugin) => [
     ...angular.configs.templateRecommended,

package/eslint/configs/template-rules.mjs

@@ -1,7 +1,11 @@
 import templateBase from './template-base.mjs';
 
-// Only the rules written by this library. `templateRecommended` includes it, alongside
-// the house style; use this layer directly to opt out of the latter.
+/**
+ * Only the rules written by this library. `templateRecommended` includes it, alongside
+ * the house style; use this layer directly to opt out of the latter.
+ *
+ * @returns {import('typescript-eslint').ConfigArray}
+ */
 const templateRules = (plugin) => [
     templateBase(plugin),
     {