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

package/CHANGELOG.md

@@ -38,6 +38,19 @@
     - 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'`).
 
+- [foehn-navigation.component.html](projects/prestations-ng/src/foehn-navigation/foehn-navigation/foehn-navigation.component.html)
+- [foehn-simple-navigation.component.html](projects/prestations-ng/src/foehn-navigation/foehn-simple-navigation/foehn-simple-navigation.component.html)
+    - while the page targeted by "next", "transmit" or "previous" is loading for more than 200 ms (e.g. lazy loaded
+      route), the clicked button displays a spinner with the new `loadingLabel` input (dictionary key
+      `foehn-navigation.loading.label`, "Chargement...") and the navigation buttons are disabled (`aria-disabled`;
+      clicks are ignored from the start of the navigation); a live `output` region announces the loading to screen
+      readers (also in 18.3.15)
+    - this state is exposed by read-only signals: `pendingNavigationDirection`, `loadingDirection`, `isNavigating`,
+      `isLoading`, `isLoadingNext` and `isLoadingPrevious`
+- [foehn-navigation.service.ts](projects/prestations-ng/src/foehn-navigation/foehn-navigation.service.ts)
+    - new method `pendingNavigationDirection()`: direction of the navigation started with `next()` or `previous()`
+      until it ends, `null` otherwise (also in 18.3.15)
+
 ### Changed
 
 Library now runs as strict mode, which may cause some errors to appear in your project after updating.
@@ -57,6 +70,12 @@ Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information
       `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`.
+- [foehn-modal.component.ts](projects/prestations-ng/src/foehn-modal/foehn-modal.component.ts)
+    - 🚨 `modalSize` is now typed with the new `FoehnModalSize` type
+      (`'' | 'modal-sm' | 'modal-md' | 'modal-lg' | 'modal-xl'`) instead of `string`, as are `HelpModal.modalSize`
+      and therefore the `helpModal` of the `foehn-input-*` components. Other values, such as `modal-xs`, are not
+      Bootstrap classes, had no effect and no longer compile: replace them with `modal-md` to keep the same size
+      (removing them in a `HelpModal` would fall back to `modal-lg`).
 - 🚀 **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).
@@ -134,6 +153,11 @@ Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information
 
 ### Fixed
 
+- `AbstractPageComponent` and `AbstractPageFromMenuComponent`: a second click on "next" or "transmit" while the next
+  page is loading (lazy loaded route, resolver, async guard) no longer saves again and skips the next page:
+  `send()`, `sendAndTransmit()` and `transmit()` are ignored until the navigation to the next page ends. Pages
+  overriding `onFormSent()` should call the new protected method `navigateToNextPage()` instead of
+  `this._navigation.next()` to get this protection (also in 18.3.15).
 - `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
@@ -194,6 +218,9 @@ Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information
 - `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).
+- `foehn-feedback-notification`: an error of `api/feedbacknotification/queryparams/{reference}` is logged and the
+  links are displayed without the feedback url, it reached the `ErrorHandler` as unhandled.
+- The npm package no longer contains its own archive (`dsivd-prestations-ng-<version>.tgz`).
 
 ## [19.1.1]
 
@@ -337,6 +364,24 @@ 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)
     - `[list]` attribut has been removed. Use `[model]` instead.
 
+## [18.3.15]
+
+### Updated
+
+- [foehn-navigation.component.html](projects/prestations-ng/src/foehn-navigation/foehn-navigation/foehn-navigation.component.html)
+- [foehn-simple-navigation.component.html](projects/prestations-ng/src/foehn-navigation/foehn-simple-navigation/foehn-simple-navigation.component.html)
+    - while the page targeted by "next", "transmit" or "previous" is loading for more than 200 ms (e.g. lazy loaded route), the clicked button displays a spinner with the new `loadingLabel` input (dictionary key `foehn-navigation.loading.label`, "Chargement...") and the navigation buttons are disabled (`aria-disabled`; clicks are ignored from the start of the navigation); a `role="status"` region announces the loading to screen readers
+- [foehn-navigation.service.ts](projects/prestations-ng/src/foehn-navigation/foehn-navigation.service.ts)
+    - new method `pendingNavigationDirection()`: direction of the navigation started with `next()` or `previous()` until it ends, `null` otherwise
+
+### Fixed
+
+- [abstract-page-component.ts](projects/prestations-ng/src/abstract-page-component.ts)
+    - fixed a second click on "next" or "transmit" while the next page is loading (lazy loaded route, resolver, async guard) saving again and skipping the next page: `send()`, `sendAndTransmit()` and `transmit()` are now ignored until the navigation to the next page ends
+    - new protected method `navigateToNextPage()`: pages overriding `onFormSent()` should call it instead of `this._navigation.next()` to get this protection
+- [abstract-page-from-menu.component.ts](projects/prestations-ng/src/foehn-menu-prestation/abstract-page-from-menu.component.ts)
+    - same fix when returning to the parent page
+
 ## [18.3.13]
 
 ### Fixed

package/CONTRIBUTING.md

@@ -171,7 +171,7 @@ Alternatively, you can manually publish the package. Although this method is not
 - Ensure you can push to the npm registry: `npm adduser --registry=https://registry.npmjs.org --scope=@dsivd`
 - Update the version number in `package.json` either manually or with `npm version`
 - Commit and tag the version change
-- Package a new version of the library with `npm package`
+- Package a new version of the library with `npm run package`
 - Publish the package:
     - `npm run publish:stable` for stable version (released to everybody)
     - `npm run publish:next` for next version (development only)

package/GOOD_PRACTICES.md

@@ -461,8 +461,10 @@ private readonly changeDetectorRef = inject(ChangeDetectorRef);
 ngOnInit(): void {
     super.ngOnInit();
     this.sessionInfoWithApplicationService.prefillForm((info) => {
-        this.form.email = info?.email ?? null;
-        this.changeDetectorRef.markForCheck();
+        if (this.form) {
+            this.form.email = info?.email ?? null;
+            this.changeDetectorRef.markForCheck();
+        }
     });
 }
 ```

package/UPGRADING_V19.md

@@ -1246,7 +1246,7 @@ In `front/src/`, remove the file `typings.d.ts` if it is still there.
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
-        "outDir": "../out-tsc/app",
+        "outDir": "./out-tsc/app",
         "types": []
     },
     "include": ["src/**/*.ts"],
@@ -1448,12 +1448,15 @@ When using `IntelliJ`, you can run code inspection on your project to fix deprec
 - In your `tsconfig.json` file, add `"strict": true` in `compilerOptions` and remove `alwaysStrict`, `noImplicitThis`, `strictBindCallApply` and `strictFunctionTypes` as they are already included in `strict` mode.
 - In your `tsconfig.json` file, remove `useDefineForClassFields` from `compilerOptions`.
 
-Now fix your project until no more errors:
+Now fix your project until no more errors (unlike `tsc -b`, these commands write nothing):
 
 ```bash
-npx tsc -b --noEmit
+npx tsc -p tsconfig.app.json --noEmit
+npx tsc -p tsconfig.spec.json --noEmit
 ```
 
+`tsc` doesn't check the templates: the errors reported by `strictTemplates` appear when you build your application.
+
 and finally run the following commands to build, test and start your application:
 
 ```bash
@@ -1515,6 +1518,8 @@ The CommonJS dependencies of prestations-ng are now `"iban"` and `"dayjs"` (whic
 "allowedCommonJsDependencies": ["iban", "dayjs"]
 ```
 
+Also remove the packages that are no longer installed (`npm ls <package>` lists nothing).
+
 ### 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
@@ -1558,6 +1563,10 @@ then uninstall zone.js:
 npm uninstall zone.js
 ```
 
+`zone.js` stays in your `package-lock.json` as an optional peer dependency of `@angular/core`: this is expected. Check
+instead that the build of your application no longer outputs a `polyfills` chunk (unless you still have other
+polyfills, e.g. `@angular/localize/init`).
+
 #### Check your components
 
 Without zone.js, Angular refreshes a component only when it is notified that something changed:
@@ -1601,8 +1610,10 @@ Pay attention to:
     ngOnInit(): void {
         super.ngOnInit();
         this.sessionInfoWithApplicationService.prefillForm((info) => {
-            this.form.email = info?.email ?? null;
-            this.changeDetectorRef.markForCheck();
+            if (this.form) {
+                this.form.email = info?.email ?? null;
+                this.changeDetectorRef.markForCheck();
+            }
         });
     }
     ```

package/fesm2022/dsivd-prestations-ng.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, InjectionToken, model, input, viewChildren, viewChild, forwardRef, output, computed, linkedSignal, DestroyRef, signal, effect, untracked, PendingTasks, Directive, ChangeDetectorRef, Pipe, Component, contentChildren, EnvironmentInjector, runInInjectionContext, afterNextRender, ElementRef, Injector, makeEnvironmentProviders, ErrorHandler, provideBrowserGlobalErrorListeners, provideAppInitializer, importProvidersFrom, NgZone, afterRenderEffect, contentChild, TemplateRef } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import { Router, ActivatedRoute, RouterLink, NavigationStart, NavigationEnd } from '@angular/router';
-import { Subject, BehaviorSubject, combineLatest, of, filter as filter$1, tap as tap$1, throwError, switchMap as switchMap$1, forkJoin, from, concatMap, toArray, EMPTY, startWith, merge, noop, interval, withLatestFrom, map as map$1, concat } from 'rxjs';
-import { filter, shareReplay, tap, map, debounceTime, catchError, switchMap, first, finalize, throttleTime, mergeMap, share, take, distinctUntilChanged, startWith as startWith$1, takeWhile, takeUntil } from 'rxjs/operators';
+import { Subject, BehaviorSubject, combineLatest, of, filter as filter$1, tap as tap$1, throwError, switchMap as switchMap$1, forkJoin, from, concatMap, toArray, EMPTY, startWith, merge, noop, interval, withLatestFrom, timer, map as map$1, concat } from 'rxjs';
+import { filter, shareReplay, tap, map, debounceTime, catchError, switchMap, first, finalize, throttleTime, mergeMap, share, take, distinctUntilChanged, startWith as startWith$1, takeWhile, takeUntil, skip } from 'rxjs/operators';
 import { HttpClient, HttpEventType, HttpResponse, HTTP_INTERCEPTORS, HttpStatusCode, HttpResponseBase, HttpErrorResponse, HttpParams, provideHttpClient, withInterceptorsFromDi, withInterceptors } from '@angular/common/http';
 import * as i1 from '@angular/forms';
 import { NgModel, NgForm, FormsModule } from '@angular/forms';
@@ -1193,6 +1193,7 @@ const DEFAULT_DICTIONARY = {
     'foehn-navigation.next.label': 'Suivant',
     'foehn-navigation.previous.label': 'Précédent',
     'foehn-navigation.transmit.label': 'Transmettre',
+    'foehn-navigation.loading.label': 'Chargement...',
     'foehn-navigation.continue-later.label': 'Envoyer un lien pour reprendre cette demande plus tard',
     'foehn-navigation.continue-later-already-registered.label': 'Modifier mes informations de reprise et envoyer un nouveau lien',
     'foehn-navigation.continue-later-connected.label': 'Finir la demande plus tard',
@@ -2530,6 +2531,8 @@ class FoehnNavigationService {
     isInit = false;
     initializedAndRouteActivated = new BehaviorSubject(false);
     linearRouting = true;
+    pendingNavigationDirectionSubject = new BehaviorSubject(null);
+    lastNavigationId = 0;
     get initialized() {
         return this.isInit;
     }
@@ -2607,6 +2610,14 @@ class FoehnNavigationService {
     hasBeenInitialized() {
         return this.initializedAndRouteActivated.asObservable();
     }
+    /**
+     * Direction of the navigation started with next() or previous() until it ends, null otherwise.
+     * The current page stays displayed while the target one is activated (e.g. lazy loaded route).
+     * @returns Observable<NavigationDirection | null>
+     */
+    pendingNavigationDirection() {
+        return this.pendingNavigationDirectionSubject.asObservable();
+    }
     getQueryParamsToForwardAsString() {
         const params = this.getQueryParamsToForward() || {};
         let stringParams = '';
@@ -2761,7 +2772,15 @@ class FoehnNavigationService {
             ? SdkEventType.NAVIGATION_FORWARD
             : SdkEventType.NAVIGATION_BACKWARD;
         this.eventsLoggerService.addEvent(eventType, route?.path);
-        return this.redirect(route?.path);
+        const navigation = this.redirect(route?.path);
+        const navigationId = ++this.lastNavigationId;
+        this.pendingNavigationDirectionSubject.next(direction);
+        return navigation.finally(() => {
+            // A navigation replaced by a newer one ends first (cancelled).
+            if (navigationId === this.lastNavigationId) {
+                this.pendingNavigationDirectionSubject.next(null);
+            }
+        });
     }
     isRouteAvailable(route) {
         const { canActivate } = route;
@@ -3172,6 +3191,7 @@ class AbstractPageComponent {
     _pendingUploadService = inject(PendingUploadService);
     _transmitConcurrentSafe;
     _gesdemSaveSubscription = null;
+    _isNavigatingToNextPage = false;
     _registerNgModelService = inject(RegisterNgModelService);
     _pageTitle = new Subject();
     // ECMAScript private field: cannot collide with a member of the pages extending this class.
@@ -3253,6 +3273,9 @@ class AbstractPageComponent {
         });
     }
     send(goToNextPage = true, displaySuccessMessage = true) {
+        if (this._isNavigatingToNextPage) {
+            return;
+        }
         const hasPendingFiles = this._pendingUploadService.hasPendingFiles();
         if (hasPendingFiles) {
             goToNextPage = false;
@@ -3277,6 +3300,9 @@ class AbstractPageComponent {
         }
     }
     transmit() {
+        if (this._isNavigatingToNextPage) {
+            return;
+        }
         this._validationHandlerService.shouldDisplayErrors(true);
         this._transmitConcurrentSafe
             .pipe(tap(() => this._eventsLoggerService.addEvent(SdkEventType.TRANSMIT)), catchError((error) => {
@@ -3288,11 +3314,14 @@ class AbstractPageComponent {
                 // Do not show warning alert on closing tab or navigator when form has been transmitted
                 this._registerNgModelService.setHasInteractions(false);
                 this._gesdemEventService.formTransmittedSubject.next(this._gesdemService.lastResponse);
-                this._navigation.next();
+                this.navigateToNextPage();
             }
         });
     }
     sendAndTransmit(displaySuccessMessage = true) {
+        if (this._isNavigatingToNextPage) {
+            return;
+        }
         this._gesdemEventService
             .formSentObservable()
             .pipe(first())
@@ -3338,13 +3367,33 @@ class AbstractPageComponent {
             this._gesdemEventService.formSentSubject.next(this._gesdemService.lastResponse);
             const foehnFormComponentVal = this.foehnFormComponent();
             if (isValid && goToNextPage) {
-                this._navigation.next();
+                this.navigateToNextPage();
             }
             else if (!isValid && foehnFormComponentVal) {
                 foehnFormComponentVal.focusErrorSummary();
             }
         }, console.error);
     }
+    /**
+     * Navigates to the next page and ignores send(), sendAndTransmit() and transmit() until the navigation ends.
+     *
+     * The current page stays displayed and clickable while the next one is activated (e.g. lazy loaded route,
+     * resolver or async guard): a second click on "next" would save again, then navigate once more from the
+     * next page and skip it.
+     */
+    async navigateToNextPage() {
+        if (this._isNavigatingToNextPage) {
+            return;
+        }
+        this._isNavigatingToNextPage = true;
+        try {
+            await this._navigation.next();
+        }
+        finally {
+            // Released when the navigation is cancelled or fails so that the user can try again.
+            this._isNavigatingToNextPage = false;
+        }
+    }
     checkHasPendingsFilesBeforeTransmit() {
         if (this._pendingUploadService.hasPendingFiles()) {
             this._pendingUploadService.attachmentsUploaded
@@ -3818,7 +3867,10 @@ class FoehnFeedbackNotificationComponent {
             .post(`api/feedbacknotification/queryparams/${reference}`, fbu, {
             responseType: 'text',
         })
-            .pipe(map((cryptedUrlParams) => `${feedBackFormBaseUrl}?q=${encodeURIComponent(cryptedUrlParams)}`));
+            .pipe(map((cryptedUrlParams) => `${feedBackFormBaseUrl}?q=${encodeURIComponent(cryptedUrlParams)}`), catchError((e) => {
+            console.error('Unable to get the feedback url, returning null', e);
+            return of(null);
+        }));
     }
     getCategory(sessionInfoData, etapeInfo) {
         if (sessionInfoData?.categories) {
@@ -9993,7 +10045,7 @@ class FoehnInputEmailComponent extends FoehnInputStringComponent {
                 this.helpModal.set({
                     title: modalTitle,
                     body: modalContent,
-                    modalSize: 'modal-xs',
+                    modalSize: 'modal-md',
                 });
             }
             if (this.standardHelpText() === undefined) {
@@ -12518,11 +12570,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             args: [{ selector: 'sdk-pending-payment', imports: [FoehnModalComponent, SdkDictionaryPipe], template: "<foehn-modal\n    [closeable]=\"false\"\n    [modalHeaderText]=\"'epayment.pending-payment.title' | fromDictionary\"\n    [isModalVisible]=\"isModalVisible\"\n    (isModalVisibleChange)=\"isModalVisible = $event\"\n    modalSize=\"modal-lg\"\n>\n    <div class=\"modal-body\">\n        <p>{{ 'epayment.pending-payment.text' | fromDictionary }}</p>\n    </div>\n    <div modal-footer class=\"w-100\">\n        <div class=\"d-flex\">\n            <button\n                id=\"goToPayerButton\"\n                type=\"button\"\n                class=\"btn btn-primary ms-auto\"\n                (click)=\"goToPayer()\"\n            >\n                {{ 'epayment.pending-payment.button' | fromDictionary }}\n            </button>\n        </div>\n    </div>\n</foehn-modal>\n" }]
         }], propDecorators: { onPay: [{ type: i0.Output, args: ["onPay"] }] } });
 
+// The loading state isn't displayed when the target page loads quickly, so that it doesn't flicker.
+const LOADING_DISPLAY_DELAY_MS = 200;
 class AbstractFoehnNavigationComponent {
     showContinueLaterButton = input(true, ...(ngDevMode ? [{ debugName: "showContinueLaterButton" }] : /* istanbul ignore next */ []));
     showNextButton = input(true, ...(ngDevMode ? [{ debugName: "showNextButton" }] : /* istanbul ignore next */ []));
     nextLabel = input('foehn-navigation.next.label', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     prevLabel = input('foehn-navigation.previous.label', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
+    loadingLabel = input('foehn-navigation.loading.label', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
     continueLaterLabel = input('foehn-navigation.continue-later.label', ...(ngDevMode ? [{ debugName: "continueLaterLabel" }] : /* istanbul ignore next */ []));
     continueLaterAlreadyRegisteredLabel = input('foehn-navigation.continue-later-already-registered.label', ...(ngDevMode ? [{ debugName: "continueLaterAlreadyRegisteredLabel" }] : /* istanbul ignore next */ []));
     continueLaterConnectedLabel = input('foehn-navigation.continue-later-connected.label', ...(ngDevMode ? [{ debugName: "continueLaterConnectedLabel" }] : /* istanbul ignore next */ []));
@@ -12531,21 +12586,46 @@ class AbstractFoehnNavigationComponent {
     onNext = output();
     // eslint-disable-next-line @angular-eslint/no-output-on-prefix
     onPrevious = output();
+    pendingNavigationDirection;
+    loadingDirection;
+    isNavigating = computed(() => this.pendingNavigationDirection() !== null, ...(ngDevMode ? [{ debugName: "isNavigating" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.loadingDirection() !== null, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isLoadingNext = computed(() => this.loadingDirection() === NavigationDirection.FORWARD, ...(ngDevMode ? [{ debugName: "isLoadingNext" }] : /* istanbul ignore next */ []));
+    isLoadingPrevious = computed(() => this.loadingDirection() === NavigationDirection.BACKWARD, ...(ngDevMode ? [{ debugName: "isLoadingPrevious" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const pendingNavigationDirection = inject(FoehnNavigationService)
+            .pendingNavigationDirection()
+            .pipe(
+        // A navigation pending when the component is created is the one activating its page.
+        skip(1));
+        this.pendingNavigationDirection = toSignal(pendingNavigationDirection, {
+            initialValue: null,
+        });
+        this.loadingDirection = toSignal(pendingNavigationDirection.pipe(switchMap((direction) => direction === null
+            ? of(null)
+            : timer(LOADING_DISPLAY_DELAY_MS).pipe(map(() => direction)))), { initialValue: null });
+    }
     goToNext() {
+        if (this.isNavigating()) {
+            return;
+        }
         this.onNext.emit();
     }
     goToPrevious() {
+        if (this.isNavigating()) {
+            return;
+        }
         this.onPrevious.emit();
     }
     canShowNextButton() {
         return this.showNextButton();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AbstractFoehnNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.23", type: AbstractFoehnNavigationComponent, isStandalone: true, inputs: { showContinueLaterButton: { classPropertyName: "showContinueLaterButton", publicName: "showContinueLaterButton", isSignal: true, isRequired: false, transformFunction: null }, showNextButton: { classPropertyName: "showNextButton", publicName: "showNextButton", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, continueLaterLabel: { classPropertyName: "continueLaterLabel", publicName: "continueLaterLabel", isSignal: true, isRequired: false, transformFunction: null }, continueLaterAlreadyRegisteredLabel: { classPropertyName: "continueLaterAlreadyRegisteredLabel", publicName: "continueLaterAlreadyRegisteredLabel", isSignal: true, isRequired: false, transformFunction: null }, continueLaterConnectedLabel: { classPropertyName: "continueLaterConnectedLabel", publicName: "continueLaterConnectedLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerRecoveryOnPageChange: { classPropertyName: "triggerRecoveryOnPageChange", publicName: "triggerRecoveryOnPageChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNext: "onNext", onPrevious: "onPrevious" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.23", type: AbstractFoehnNavigationComponent, isStandalone: true, inputs: { showContinueLaterButton: { classPropertyName: "showContinueLaterButton", publicName: "showContinueLaterButton", isSignal: true, isRequired: false, transformFunction: null }, showNextButton: { classPropertyName: "showNextButton", publicName: "showNextButton", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, continueLaterLabel: { classPropertyName: "continueLaterLabel", publicName: "continueLaterLabel", isSignal: true, isRequired: false, transformFunction: null }, continueLaterAlreadyRegisteredLabel: { classPropertyName: "continueLaterAlreadyRegisteredLabel", publicName: "continueLaterAlreadyRegisteredLabel", isSignal: true, isRequired: false, transformFunction: null }, continueLaterConnectedLabel: { classPropertyName: "continueLaterConnectedLabel", publicName: "continueLaterConnectedLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerRecoveryOnPageChange: { classPropertyName: "triggerRecoveryOnPageChange", publicName: "triggerRecoveryOnPageChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNext: "onNext", onPrevious: "onPrevious" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AbstractFoehnNavigationComponent, decorators: [{
             type: Directive
-        }], propDecorators: { showContinueLaterButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContinueLaterButton", required: false }] }], showNextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextButton", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], continueLaterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "continueLaterLabel", required: false }] }], continueLaterAlreadyRegisteredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "continueLaterAlreadyRegisteredLabel", required: false }] }], continueLaterConnectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "continueLaterConnectedLabel", required: false }] }], triggerRecoveryOnPageChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerRecoveryOnPageChange", required: false }] }], onNext: [{ type: i0.Output, args: ["onNext"] }], onPrevious: [{ type: i0.Output, args: ["onPrevious"] }] } });
+        }], ctorParameters: () => [], propDecorators: { showContinueLaterButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContinueLaterButton", required: false }] }], showNextButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextButton", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], continueLaterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "continueLaterLabel", required: false }] }], continueLaterAlreadyRegisteredLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "continueLaterAlreadyRegisteredLabel", required: false }] }], continueLaterConnectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "continueLaterConnectedLabel", required: false }] }], triggerRecoveryOnPageChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerRecoveryOnPageChange", required: false }] }], onNext: [{ type: i0.Output, args: ["onNext"] }], onPrevious: [{ type: i0.Output, args: ["onPrevious"] }] } });
 
 class FoehnNavigationComponent extends AbstractFoehnNavigationComponent {
     transmitLabel = input('foehn-navigation.transmit.label', ...(ngDevMode ? [{ debugName: "transmitLabel" }] : /* istanbul ignore next */ []));
@@ -12592,7 +12672,7 @@ class FoehnNavigationComponent extends AbstractFoehnNavigationComponent {
         return this.navigationService.isLinearRouting();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FoehnNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FoehnNavigationComponent, isStandalone: true, selector: "foehn-navigation", inputs: { transmitLabel: { classPropertyName: "transmitLabel", publicName: "transmitLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n@if (isForcedOnRecapForPendingPayment()) {\n    <sdk-pending-payment (onPay)=\"goToNext()\" />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        <foehn-icon-chevron-left\n                            class=\"me-1\"\n                            aria-hidden=\"true\"\n                        />\n                        {{ prevLabel() | fromDictionary }}\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getPreviousRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (!isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        {{ nextLabel() | fromDictionary }}\n                        <foehn-icon-chevron-right\n                            class=\"ms-1\"\n                            aria-hidden=\"true\"\n                        />\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getNextRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                @if (isLastFormPage() && canShowNextButton()) {\n                    <button\n                        type=\"submit\"\n                        id=\"transmitButton\"\n                        (click)=\"goToNext()\"\n                        class=\"btn btn-success vd-btn-pagination-submit\"\n                    >\n                        {{ transmitLabel() | fromDictionary }}\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"], dependencies: [{ kind: "component", type: GesdemActionRecoveryRegistrationComponent, selector: "gesdem-action-recovery-registration", inputs: ["dispatchFormErrors", "continueLaterLabel", "continueLaterAlreadyRegisteredLabel", "continueLaterConnectedLabel", "triggerOnPageChange"] }, { kind: "component", type: PendingPaymentComponent, selector: "sdk-pending-payment", outputs: ["onPay"] }, { kind: "component", type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { kind: "component", type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FoehnNavigationComponent, isStandalone: true, selector: "foehn-navigation", inputs: { transmitLabel: { classPropertyName: "transmitLabel", publicName: "transmitLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n@if (isForcedOnRecapForPendingPayment()) {\n    <sdk-pending-payment (onPay)=\"goToNext()\" />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingPrevious()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            <foehn-icon-chevron-left\n                                class=\"me-1\"\n                                aria-hidden=\"true\"\n                            />\n                            {{ prevLabel() | fromDictionary }}\n                        }\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getPreviousRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (!isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingNext()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            {{ nextLabel() | fromDictionary }}\n                            <foehn-icon-chevron-right\n                                class=\"ms-1\"\n                                aria-hidden=\"true\"\n                            />\n                        }\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getNextRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                @if (isLastFormPage() && canShowNextButton()) {\n                    <button\n                        type=\"submit\"\n                        id=\"transmitButton\"\n                        (click)=\"goToNext()\"\n                        class=\"btn btn-success vd-btn-pagination-submit\"\n                        [class.disabled]=\"isLoading()\"\n                        [attr.aria-disabled]=\"isLoading() || null\"\n                    >\n                        @if (isLoadingNext()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            {{ transmitLabel() | fromDictionary }}\n                        }\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n    <output class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n        @if (isLoading()) {\n            {{ loadingLabel() | fromDictionary }}\n        }\n    </output>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"], dependencies: [{ kind: "component", type: GesdemActionRecoveryRegistrationComponent, selector: "gesdem-action-recovery-registration", inputs: ["dispatchFormErrors", "continueLaterLabel", "continueLaterAlreadyRegisteredLabel", "continueLaterConnectedLabel", "triggerOnPageChange"] }, { kind: "component", type: PendingPaymentComponent, selector: "sdk-pending-payment", outputs: ["onPay"] }, { kind: "component", type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { kind: "component", type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FoehnNavigationComponent, decorators: [{
             type: Component,
@@ -12602,7 +12682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         FoehnIconChevronLeftComponent,
                         FoehnIconChevronRightComponent,
                         SdkDictionaryPipe,
-                    ], template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n@if (isForcedOnRecapForPendingPayment()) {\n    <sdk-pending-payment (onPay)=\"goToNext()\" />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        <foehn-icon-chevron-left\n                            class=\"me-1\"\n                            aria-hidden=\"true\"\n                        />\n                        {{ prevLabel() | fromDictionary }}\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getPreviousRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (!isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        {{ nextLabel() | fromDictionary }}\n                        <foehn-icon-chevron-right\n                            class=\"ms-1\"\n                            aria-hidden=\"true\"\n                        />\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getNextRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                @if (isLastFormPage() && canShowNextButton()) {\n                    <button\n                        type=\"submit\"\n                        id=\"transmitButton\"\n                        (click)=\"goToNext()\"\n                        class=\"btn btn-success vd-btn-pagination-submit\"\n                    >\n                        {{ transmitLabel() | fromDictionary }}\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"] }]
+                    ], template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n@if (isForcedOnRecapForPendingPayment()) {\n    <sdk-pending-payment (onPay)=\"goToNext()\" />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingPrevious()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            <foehn-icon-chevron-left\n                                class=\"me-1\"\n                                aria-hidden=\"true\"\n                            />\n                            {{ prevLabel() | fromDictionary }}\n                        }\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getPreviousRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (!isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingNext()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            {{ nextLabel() | fromDictionary }}\n                            <foehn-icon-chevron-right\n                                class=\"ms-1\"\n                                aria-hidden=\"true\"\n                            />\n                        }\n                    </span>\n                    @if (isLinearRouting()) {\n                        <span class=\"visually-hidden\">:</span>\n                        <span class=\"vd-pagination__label\">\n                            {{ getNextRouteIndex() }}\n                            {{\n                                'foehn-navigation.route.index.separator'\n                                    | fromDictionary\n                            }}\n                            {{ getTotalRoutesSize() }}\n                        </span>\n                    }\n                </button>\n            </li>\n        }\n        @if (isLastFormPage() && canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                @if (isLastFormPage() && canShowNextButton()) {\n                    <button\n                        type=\"submit\"\n                        id=\"transmitButton\"\n                        (click)=\"goToNext()\"\n                        class=\"btn btn-success vd-btn-pagination-submit\"\n                        [class.disabled]=\"isLoading()\"\n                        [attr.aria-disabled]=\"isLoading() || null\"\n                    >\n                        @if (isLoadingNext()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            {{ transmitLabel() | fromDictionary }}\n                        }\n                    </button>\n                }\n            </li>\n        }\n    </ul>\n    <output class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n        @if (isLoading()) {\n            {{ loadingLabel() | fromDictionary }}\n        }\n    </output>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"] }]
         }], propDecorators: { transmitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "transmitLabel", required: false }] }] } });
 
 class FoehnSimpleNavigationComponent extends AbstractFoehnNavigationComponent {
@@ -12611,7 +12691,7 @@ class FoehnSimpleNavigationComponent extends AbstractFoehnNavigationComponent {
         return this.showPreviousButton();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FoehnSimpleNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FoehnSimpleNavigationComponent, isStandalone: true, selector: "foehn-simple-navigation", inputs: { showPreviousButton: { classPropertyName: "showPreviousButton", publicName: "showPreviousButton", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        <foehn-icon-chevron-left\n                            class=\"me-1\"\n                            aria-hidden=\"true\"\n                        />\n                        {{ prevLabel() | fromDictionary }}\n                    </span>\n                </button>\n            </li>\n        }\n        @if (canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        {{ nextLabel() | fromDictionary }}\n                        <foehn-icon-chevron-right\n                            class=\"ms-1\"\n                            aria-hidden=\"true\"\n                        />\n                    </span>\n                </button>\n            </li>\n        }\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"], dependencies: [{ kind: "component", type: GesdemActionRecoveryRegistrationComponent, selector: "gesdem-action-recovery-registration", inputs: ["dispatchFormErrors", "continueLaterLabel", "continueLaterAlreadyRegisteredLabel", "continueLaterConnectedLabel", "triggerOnPageChange"] }, { kind: "component", type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { kind: "component", type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: FoehnSimpleNavigationComponent, isStandalone: true, selector: "foehn-simple-navigation", inputs: { showPreviousButton: { classPropertyName: "showPreviousButton", publicName: "showPreviousButton", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingPrevious()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            <foehn-icon-chevron-left\n                                class=\"me-1\"\n                                aria-hidden=\"true\"\n                            />\n                            {{ prevLabel() | fromDictionary }}\n                        }\n                    </span>\n                </button>\n            </li>\n        }\n        @if (canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingNext()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            {{ nextLabel() | fromDictionary }}\n                            <foehn-icon-chevron-right\n                                class=\"ms-1\"\n                                aria-hidden=\"true\"\n                            />\n                        }\n                    </span>\n                </button>\n            </li>\n        }\n    </ul>\n    <output class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n        @if (isLoading()) {\n            {{ loadingLabel() | fromDictionary }}\n        }\n    </output>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"], dependencies: [{ kind: "component", type: GesdemActionRecoveryRegistrationComponent, selector: "gesdem-action-recovery-registration", inputs: ["dispatchFormErrors", "continueLaterLabel", "continueLaterAlreadyRegisteredLabel", "continueLaterConnectedLabel", "triggerOnPageChange"] }, { kind: "component", type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { kind: "component", type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FoehnSimpleNavigationComponent, decorators: [{
             type: Component,
@@ -12620,7 +12700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         FoehnIconChevronLeftComponent,
                         FoehnIconChevronRightComponent,
                         SdkDictionaryPipe,
-                    ], template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        <foehn-icon-chevron-left\n                            class=\"me-1\"\n                            aria-hidden=\"true\"\n                        />\n                        {{ prevLabel() | fromDictionary }}\n                    </span>\n                </button>\n            </li>\n        }\n        @if (canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        {{ nextLabel() | fromDictionary }}\n                        <foehn-icon-chevron-right\n                            class=\"ms-1\"\n                            aria-hidden=\"true\"\n                        />\n                    </span>\n                </button>\n            </li>\n        }\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"] }]
+                    ], template: "@if (showContinueLaterButton()) {\n    <gesdem-action-recovery-registration\n        [continueLaterLabel]=\"continueLaterLabel()\"\n        [continueLaterAlreadyRegisteredLabel]=\"\n            continueLaterAlreadyRegisteredLabel()\n        \"\n        [continueLaterConnectedLabel]=\"continueLaterConnectedLabel()\"\n        [triggerOnPageChange]=\"triggerRecoveryOnPageChange()\"\n    />\n}\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        @if (canShowPreviousButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--previous\">\n                <button\n                    id=\"prevButton\"\n                    type=\"button\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToPrevious()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingPrevious()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            <foehn-icon-chevron-left\n                                class=\"me-1\"\n                                aria-hidden=\"true\"\n                            />\n                            {{ prevLabel() | fromDictionary }}\n                        }\n                    </span>\n                </button>\n            </li>\n        }\n        @if (canShowNextButton()) {\n            <li class=\"vd-pagination__item vd-pagination__item--next\">\n                <button\n                    id=\"nextButton\"\n                    type=\"submit\"\n                    class=\"btn btn-link vd-pagination__link vd-pagination__link-reset\"\n                    [class.disabled]=\"isLoading()\"\n                    [attr.aria-disabled]=\"isLoading() || null\"\n                    (click)=\"$event.preventDefault(); goToNext()\"\n                >\n                    <span class=\"vd-pagination__title\">\n                        @if (isLoadingNext()) {\n                            <span\n                                class=\"spinner-border spinner-border-sm me-1\"\n                                aria-hidden=\"true\"\n                            ></span>\n                            {{ loadingLabel() | fromDictionary }}\n                        } @else {\n                            {{ nextLabel() | fromDictionary }}\n                            <foehn-icon-chevron-right\n                                class=\"ms-1\"\n                                aria-hidden=\"true\"\n                            />\n                        }\n                    </span>\n                </button>\n            </li>\n        }\n    </ul>\n    <output class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n        @if (isLoading()) {\n            {{ loadingLabel() | fromDictionary }}\n        }\n    </output>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}\n"] }]
         }], propDecorators: { showPreviousButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreviousButton", required: false }] }] } });
 
 class FoehnRemainingAlertsSummaryComponent {
@@ -15162,7 +15242,7 @@ class AbstractPageFromMenuComponent extends AbstractPageComponent {
             }
             breadCrumb.breadcrumbItems?.pop();
             this._breadcrumbEventService.setBreadcrumb(breadCrumb);
-            this._navigation.next();
+            this.navigateToNextPage();
         });
     }
     appendPageToBreadCrumb() {