@dsivd/prestations-ng 19.2.0-beta.1 → 19.2.0-beta.10

package/CHANGELOG.md

@@ -8,11 +8,193 @@
 
 ## [19.2.0] - should be aligned with prestations-be 19.2.x
 
+### Added
+
+- [eslint/configs/spec-ts-recommended.mjs](projects/prestations-ng/src/eslint/configs/spec-ts-recommended.mjs)
+    - New `prestationsNg.configs.specTsRecommended` ESLint config for the Vitest specs, to use in the `extends` of a
+      `**/*.spec.ts` block: the `recommended` config of `@vitest/eslint-plugin`, which also counts the assertions of
+      the `HttpTestingController` and of the helpers of the specs. It needs `@vitest/eslint-plugin` in the
+      devDependencies of your project, only when you use it. See
+      [UPGRADING_V19.md](UPGRADING_V19.md#migrate-to-eslint-flat-configuration).
+- [foehn-bo-multi-upload.component.ts](projects/prestations-ng/src/foehn-upload/foehn-bo-multi-upload/foehn-bo-multi-upload.component.ts)
+    - New `localUpload` input. When set to `true`, selected files are kept purely local
+      (as `DocumentReferenceWithFile`, no `uploadUrl()` call) so they can be cancelled before
+      being sent. Files show up immediately in the list with a "pending" indicator (dictionary
+      key `foehn-uploader.pending-label`, French default provided) since they're not uploaded
+      yet. It is your responsibility to upload/delete them at save time,
+      e.g. via the new
+      [document-changes.helper.ts](projects/prestations-ng/src/foehn-upload/document-changes.helper.ts)
+      (`splitDocumentChanges`) which computes `filesToAdd`/`documentsToDelete` from the model.
+    - The default (direct upload) mode is unchanged.
+    - New `maxFileSizeInMo` input: a client-side, per-file size limit that doesn't depend on
+      the `fileMaxSizeInBytesByFormKey` server configuration (useful for consumers that don't
+      expose that config yet). When both are set, the smallest limit applies. A file too big gets
+      the usual `413` error, which can be customized with `customErrors` (`{fileName}`,
+      `{fileMaxSize}`).
+    - New `chooseButtonStyleModifier` input, appended to the choose button's CSS classes
+      (e.g. `btn-sm`), mirroring the same input already available on other uploaders.
+
+- [foehn-input-address.component.ts](projects/prestations-ng/src/foehn-address/foehn-input-address.component.ts)
+    - Added `streetAllowCustomValue` input to control whether the street field allows custom values (defaults to `true`).
+    - Added `swissNpaLocalityBaseUrl` input to control the base URL for Swiss NPA localities (defaults to `'api/refinf/locality'`).
+
 ### Changed
 
 Library now runs as strict mode, which may cause some errors to appear in your project after updating.
 Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information.
 
+- [foehn-list-summary.component.ts](projects/prestations-ng/src/foehn-menu-prestation/foehn-list-summary/foehn-list-summary.component.ts)
+    - `FoehnListSummaryComponent` is now generic: `FoehnListSummaryComponent<T extends FoehnListItem>`,
+      so the model, `getListItemTitle` and `listItemDescriptions` are typed with your own item class
+      instead of the base `FoehnListItem`
+- [foehn-list-item-description.ts](projects/prestations-ng/src/foehn-menu-prestation/foehn-list-summary/foehn-list-item-description.ts)
+    - 🚨 `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.
+- [uploader.helper.ts](projects/prestations-ng/src/foehn-upload/uploader.helper.ts)
+    - 🚨 `UploaderHelper.addCustomErrorOrDefault()` takes the limits of the uploader in an object (`UploaderErrorLimits`,
+      all optional) instead of its last three parameters:
+      `addCustomErrorOrDefault(name, errors, errorCode, fileName, customErrors, { overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters, maxFileSizeInMo })`.
+      The custom error 413 returned by the server now also displays the `maxFileSizeInMo` limit of
+      `foehn-bo-multi-upload`.
+- 🚀 **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` (_read-only_), `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
+
+- `captcha`: no more `NG0953` warning ("Unexpected emit for destroyed `OutputRef`") when the captcha script fails to
+  load after the component has been destroyed (e.g. the user left the page meanwhile).
+- `foehn-multiselect-autocomplete`: the suggestions and the message displayed once every element is selected follow a
+  model changed by the project, not only by the user. Once every element was selected, a model set back to some of
+  them kept the message and the hidden input; a model selecting every element did not display the message; the
+  suggestions still contained the elements selected by the project. An empty list of elements no longer displays
+  the message (every element of the list has already been added).
+- `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` without zone.js: an address given by the parent right after the initialization of the
+  component (e.g. prefilled with `SessionInfoWithApplicationService.prefillForm()` for a connected user) is no
+  longer overwritten by the model with the default country only; the default country and the clean-up of the model
+  are applied after the next rendering, from the latest model.
+- `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]
 
 ### Fixed

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
@@ -92,9 +94,10 @@ This project uses a set of scripts to lint and format the code, along with pre-c
 
 Important scripts are :
 
-- `npm run lint` : run ESLint and Prettier on all files
+- `npm run lint` : run ESLint and Prettier on all files, and check the types of the TypeScript files compiled by no
+  build (`lint:types`: `cypress/`, which Cypress only transpiles, and the configuration files of `tsconfig.config.json`)
 - `npm run format`: run ESLint and Prettier on all files and fix errors automatically
-- `npm run validate`: clean and run all tests
+- `npm run validate`: clean, lint and run all tests
 
 **Husky** is used as a pre-commit hook to automatically output linting and formatting errors for staged files before committing.
 In the end, this utilitary calls `npm run lint-staged` which you can also call yourself of course. To have this pre-commit hook,
@@ -218,6 +221,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,10 @@
     - [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_)
@@ -151,8 +157,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 +165,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 +397,126 @@ 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,
+    });
+}
+```
+
+### Tester un composant zoneless
+
+> ⚠️ `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
+> `await fixture.whenStable()`.
+
+```ts
+it('should display the details', async () => {
+    fixture.componentRef.setInput('showDetails', true);
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.querySelector('.details')).not.toBeNull();
+});
+```
+
+`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`).
+
+Gardez `fixture.detectChanges()` pour :
+
+- 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
+
+> 💡 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.
+
 ## Le routage de vos pages
 
 ### Formulaire simple
@@ -541,14 +675,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 +692,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 +728,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 +750,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 +777,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 +792,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 +1093,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 +1112,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 +1139,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 +1372,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) => {