@dsivd/prestations-ng 18.0.0-beta.2 → 18.0.0-beta.20

package/fesm2022/dsivd-prestations-ng.mjs

@@ -10,6 +10,9 @@ import * as i3 from '@angular/forms';
 import { NgModel, NgForm, FormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { AsyncPipe, registerLocaleData, DatePipe, CommonModule } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
 import { faInfoCircle, faChevronDown, faChevronUp, faFaceSmile, faFaceMeh, faFaceFrown, faTimes, faSearch, faPencil, faChevronLeft, faChevronRight, faUser, faExternalLinkAlt, faCheck, faCheckSquare, faCommentDots, faEdit, faLock, faMapMarkerAlt, faMinusCircle, faPlusCircle, faPlusSquare, faTrashAlt, faUnlockAlt } from '@fortawesome/free-solid-svg-icons';
 import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -17,9 +20,6 @@ import * as i2$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import * as i1$3 from '@angular/platform-browser';
-import dayjs from 'dayjs';
-import localeFr from '@angular/common/locales/fr';
-import isToday from 'dayjs/plugin/isToday';
 import { faCalendarAlt, faClock, faFilePdf } from '@fortawesome/free-regular-svg-icons';
 import * as i5 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
@@ -189,6 +189,27 @@ class ApplicationInfoService {
         this.pulling_ = this.http
             .get(APP_INFO_API_URL)
             .pipe(shareReplay(1));
+        // Cache the data observable to prevent recreation
+        this.data_ = this.pulling_.pipe(tap(appInfo => {
+            if (!!appInfo.configuration.portail.baseVdChUrl?.length) {
+                // already set by the backend
+                return;
+            }
+            switch (appInfo.environment?.toUpperCase()) {
+                case 'IN':
+                    appInfo.configuration.portail.baseVdChUrl =
+                        'https://i2.vd.ch';
+                    break;
+                case 'VA':
+                    appInfo.configuration.portail.baseVdChUrl =
+                        'https://formation.vd.ch';
+                    break;
+                default:
+                    appInfo.configuration.portail.baseVdChUrl =
+                        'https://www.vd.ch';
+            }
+        }), shareReplay(1) // Share the result
+        );
         // In most prestation, we're interested in the first etape info.
         this.firstEtapeInfo_ = this.pulling_.pipe(filter(appInfo => !!appInfo && !!appInfo.etapeInfos), map(({ etapeInfos }) => {
             // Checks whether the server returns a first key, otherwise fails the
@@ -207,25 +228,7 @@ class ApplicationInfoService {
         this.pulling_.subscribe((ai) => this.setApplicationInfo(ai));
     }
     get data() {
-        return this.pulling_.pipe(tap(appInfo => {
-            if (!!appInfo.configuration.portail.baseVdChUrl?.length) {
-                // already set by the backend
-                return;
-            }
-            switch (appInfo.environment?.toUpperCase()) {
-                case 'IN':
-                    appInfo.configuration.portail.baseVdChUrl =
-                        'https://i2.vd.ch';
-                    break;
-                case 'VA':
-                    appInfo.configuration.portail.baseVdChUrl =
-                        'https://valid.vd.ch';
-                    break;
-                default:
-                    appInfo.configuration.portail.baseVdChUrl =
-                        'https://www.vd.ch';
-            }
-        }));
+        return this.data_;
     }
     get firstEtapeInfo() {
         return this.firstEtapeInfo_;
@@ -1196,6 +1199,8 @@ const DEFAULT_DICTIONARY = {
     'gesdem-action-recovery-login.expired-session.label': 'Votre session a expiré, veuillez recommencer votre saisie',
     'gesdem-action-recovery-login.expired-session.ok-button': 'Recommencer',
     'gesdem-action-recovery-registration.current-info.preview': 'Un lien de reprise a été envoyé à <i>{recoveryMail}</i> ({lastRegistration})',
+    'gesdem-action-recovery-registration.deletion.info': '<i>Votre demande non transmise sera conservée {draftDemRetentionDays} jour{plural}. ' +
+        'Elle sera supprimée le {draftDemandeDeletionDate}</i>',
     'gesdem-action-recovery-registration.not-connected.current-info': '<p>Un lien de reprise vous a été envoyé à la date suivante : <strong>{lastRegistration}</strong></p>' +
         // eslint-disable-next-line max-len
         "<p>La demande pourra être reprise pendant <strong>{draftDemRetentionDaysPublic} jour{plural}</strong> après votre dernière modification, mais vous devez quand même respecter la date limite pour son dépôt, s'il y en a une. Ensuite elle sera supprimée définitivement du portail et vous devrez faire une nouvelle demande.</p>" +
@@ -1204,6 +1209,10 @@ const DEFAULT_DICTIONARY = {
     'gesdem-action-recovery-registration.modalHeaderText': 'Informations pour la reprise de la demande',
     'gesdem-action-recovery-registration.connected.info': '<p>Vos données ont été sauvegardées, vous pouvez accéder à cette demande dans la liste :',
     'gesdem-action-recovery-registration.connected.info.draft-link-text': 'demandes en cours de saisie',
+    'gesdem-action-recovery-registration.connected.info-deletion': '<div class="alert alert-info">' +
+        "Si elle n'est pas transmise ou supprimée avant, cette demande sera automatiquement supprimée le : <br/>" +
+        '<center><strong>{connectedDeletionDate}</strong></center>' +
+        '</div>',
     'gesdem-action-recovery-registration.not-connected.not-registered.info': '<p>Vous avez la possibilité de reprendre votre demande plus tard en complétant ce formulaire.</p>' +
         // eslint-disable-next-line max-len
         "<p>La demande pourra être reprise pendant <strong>{draftDemRetentionDaysPublic} jour{plural}</strong> après votre dernière modification, mais vous devez quand même respecter la date limite pour son dépôt, s'il y en a une. Ensuite elle sera supprimée définitivement du portail et vous devrez faire une nouvelle demande.</p>" +
@@ -1224,7 +1233,12 @@ const DEFAULT_DICTIONARY = {
     'gesdem-action-recovery-registration.not-connected.reference-interne.help-text': 'Votre référence sera utilisée comme objet du message qui vous sera envoyé et vous permettra de retrouver facilement ce message',
     'gesdem-action-recovery-registration.cancel.button': 'Fermer',
     'gesdem-action-recovery-registration.save.button': 'Sauvegarder',
-    'gesdem-handler.save-confirmation.label': 'Vos données ont été sauvegardées dans votre espace sécurisé',
+    'gesdem-handler.save-confirmation.label': '<strong>' +
+        'Vos données ont été sauvegardées dans <a href="/100002/demandes/search/MINE/INITIAL" target="_blank">votre espace sécurisé</a>' +
+        '</strong>' +
+        '<br/><br/>' +
+        '<i>Votre demande non transmise sera conservée {draftDemRetentionDays} jour{plural}. ' +
+        'Elle sera supprimée le {draftDemandeDeletionDate}</i>',
     'foehn-date-picker-button.icon-title': 'Afficher le calendrier',
     'foehn-date-picker-button.screen-reader.selected-date': 'Date sélectionnée : {selectedDate}',
     'foehn-date-picker.container.aria-label': 'Calendrier',
@@ -1847,7 +1861,7 @@ class IamExpiredInterceptorService {
             if (event instanceof HttpResponseBase) {
                 if (hasIamExpiredHeader(event) ||
                     isRedirectionToLogin(event)) {
-                    this._isIamSessionExpired.next(true);
+                    this.setIamSessionExpiredManually();
                 }
             }
             return event;
@@ -1862,7 +1876,7 @@ class IamExpiredInterceptorService {
                 err.error &&
                 err.error.code === 'BENEFICIARY_REQUIRED';
             if (isUrlCyberLogin || isUrlAcvLogin || isBeneficiaryRequired) {
-                this._isIamSessionExpired.next(true);
+                this.setIamSessionExpiredManually();
             }
         }
         return throwError(() => err);
@@ -1955,8 +1969,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: GrowlBrokerService }, { type: i1$1.Router }, { type: IamExpiredInterceptorService }] });
 
+dayjs.extend(isToday);
+class DateHelper {
+    constructor() {
+        this.locale = 'fr-CH';
+        this.dateFormat = 'dd.MM.yyyy';
+        this.dateTimeFormat = 'dd.MM.yyyy HH:mm:ss';
+        registerLocaleData(localeFr, 'fr-CH');
+        this.datePipe = new DatePipe(this.locale);
+    }
+    static isValidArray(value) {
+        return (!!value &&
+            value.length > 2 &&
+            !!value[0] &&
+            !!value[1] &&
+            !!value[2]);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mapToDateFromNumberArray(object, ...fieldsNames) {
+        if (object) {
+            fieldsNames.forEach(fieldPath => {
+                object[fieldPath] = this.toDateFromNumberArray(object[fieldPath]);
+            });
+        }
+        return object;
+    }
+    mapAllToDateFromNumberArray(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    objects, ...fieldsNames) {
+        if (objects) {
+            objects.forEach(object => {
+                this.mapToDateFromNumberArray(object, ...fieldsNames);
+            });
+        }
+        return objects;
+    }
+    toDateFromNumberArray(dateInArray) {
+        if (dateInArray) {
+            if (dateInArray.length === 3) {
+                return new Date(dateInArray[0], dateInArray[1] - 1, dateInArray[2]);
+            }
+            else if (dateInArray.length === 5) {
+                // because when time is 00:00:00 the array does not contain the seconds.
+                return new Date(dateInArray[0], dateInArray[1] - 1, dateInArray[2], dateInArray[3], dateInArray[4]);
+            }
+            else if (dateInArray.length >= 6) {
+                return new Date(dateInArray[0], dateInArray[1] - 1, dateInArray[2], dateInArray[3], dateInArray[4], dateInArray[5]);
+            }
+            throw new Error(`Date in number[] format has wrong number of numbers : ${dateInArray.length}`);
+        }
+        return null;
+    }
+    arrayToDisplayDateDMY(d, showTime) {
+        if (showTime) {
+            return this.datePipe.transform(this.toDateFromNumberArray(d), this.dateTimeFormat);
+        }
+        else {
+            return this.datePipe.transform(this.toDateFromNumberArray(d), this.dateFormat);
+        }
+    }
+    toDayjsFromNumberArray(value) {
+        if (DateHelper.isValidArray(value)) {
+            const dateAsString = `${value[0]}-${value[1]}-${value[2]}`;
+            return dayjs(dateAsString);
+        }
+        return null;
+    }
+    isValid(value) {
+        // date is incomplete
+        if (!DateHelper.isValidArray(value)) {
+            return false;
+        }
+        // date cannot be parsed
+        if (!this.toDayjsFromNumberArray(value)) {
+            return false;
+        }
+        // date has not been shifted (i.e. 30.02.2021 -> 01.03.2021)
+        const asString = `${value[0]}-${value[1]}-${value[2]}`;
+        const asStringFromDayJS = this.toDayjsFromNumberArray(value).format('YYYY-M-D');
+        return asString === asStringFromDayJS;
+    }
+    isToday(value) {
+        return (DateHelper.isValidArray(value) &&
+            this.toDayjsFromNumberArray(value).isToday());
+    }
+    leftPad(num) {
+        if (num === undefined || num === null) {
+            return '';
+        }
+        if (num.length === 1) {
+            return `0${num}`;
+        }
+        return num;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateHelper, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateHelper, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class GesdemHandlerService {
-    constructor(http, growlService, validationHandlerService, route, errorHandlerService, sessionInfo, dictionaryService) {
+    constructor(http, growlService, validationHandlerService, route, errorHandlerService, sessionInfo, dictionaryService, dateHelper) {
         this.http = http;
         this.growlService = growlService;
         this.validationHandlerService = validationHandlerService;
@@ -1964,6 +2081,7 @@ class GesdemHandlerService {
         this.errorHandlerService = errorHandlerService;
         this.sessionInfo = sessionInfo;
         this.dictionaryService = dictionaryService;
+        this.dateHelper = dateHelper;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this._updateFormDataSubject = new Subject();
     }
@@ -2106,7 +2224,11 @@ class GesdemHandlerService {
             if (isConnected &&
                 displaySuccessMessage &&
                 !!resp?.meta?.reference?.length) {
-                this.growlService.addWithType(GrowlType.SUCCESS, this.dictionaryService.getKeySync('gesdem-handler.save-confirmation.label'));
+                this.growlService.addWithType(GrowlType.SUCCESS, this.dictionaryService.getKeySync('gesdem-handler.save-confirmation.label', {
+                    draftDemRetentionDays: resp.meta.draftDemRetentionDays?.toString(),
+                    draftDemandeDeletionDate: this.dateHelper.arrayToDisplayDateDMY(resp.meta.draftDemandeDeletionDate, false),
+                    plural: this.dictionaryService.getPluralMarkerSync(resp.meta.draftDemRetentionDays)
+                }));
             }
         }), map(() => true));
     }
@@ -2131,7 +2253,7 @@ class GesdemHandlerService {
             : requestedReference;
         return this.errorHandlerService.handleGesdemError(this.prefix, reference, reCaptchaByPassUUID, response);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GesdemHandlerService, deps: [{ token: i1.HttpClient }, { token: GrowlBrokerService }, { token: ValidationHandlerService }, { token: i1$1.ActivatedRoute }, { token: GesdemErrorHandlerService }, { token: SessionInfo }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GesdemHandlerService, deps: [{ token: i1.HttpClient }, { token: GrowlBrokerService }, { token: ValidationHandlerService }, { token: i1$1.ActivatedRoute }, { token: GesdemErrorHandlerService }, { token: SessionInfo }, { token: SdkDictionaryService }, { token: DateHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GesdemHandlerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GesdemHandlerService, decorators: [{
@@ -2139,7 +2261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: GrowlBrokerService }, { type: ValidationHandlerService }, { type: i1$1.ActivatedRoute }, { type: GesdemErrorHandlerService }, { type: SessionInfo }, { type: SdkDictionaryService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: GrowlBrokerService }, { type: ValidationHandlerService }, { type: i1$1.ActivatedRoute }, { type: GesdemErrorHandlerService }, { type: SessionInfo }, { type: SdkDictionaryService }, { type: DateHelper }] });
 
 /**
  * @param value where space will be removed
@@ -5028,7 +5150,7 @@ class FoehnInputTextComponent extends FoehnInputStringComponent {
                 useExisting: forwardRef(() => FoehnInputTextComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnInputTextComponent, decorators: [{
             type: Component,
@@ -5038,7 +5160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnInputTextComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
+                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
         }], propDecorators: { numberOnly: [{
                 type: Input
             }] } });
@@ -5282,13 +5404,15 @@ const IamInterceptorServiceExistingProvider = {
     multi: true
 };
 class PrestationsNgCoreModule {
-    constructor(injector) {
+    constructor(injector, faConfig) {
         this.injector = injector;
+        this.faConfig = faConfig;
         ServiceLocator.injector = injector;
         // do not let font-awesome add its own css as it would be rejected by CSP
         config.autoAddCss = false;
+        faConfig.autoAddCss = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrestationsNgCoreModule, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrestationsNgCoreModule, deps: [{ token: i0.Injector }, { token: i1$2.FaConfig }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: PrestationsNgCoreModule, imports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PrestationsNgCoreModule, providers: [
             IamInterceptorServiceExistingProvider,
@@ -5304,7 +5428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         provideHttpClient(withInterceptorsFromDi())
                     ]
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.FaConfig }] });
 
 // eslint-disable max-classes-per-file
 class SessionInfoData {
@@ -5595,109 +5719,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SessionInfo }, { type: GesdemHandlerService }, { type: GesdemEventService }] });
 
-dayjs.extend(isToday);
-class DateHelper {
-    constructor() {
-        this.locale = 'fr-CH';
-        this.dateFormat = 'dd.MM.yyyy';
-        this.dateTimeFormat = 'dd.MM.yyyy HH:mm:ss';
-        registerLocaleData(localeFr, 'fr-CH');
-        this.datePipe = new DatePipe(this.locale);
-    }
-    static isValidArray(value) {
-        return (!!value &&
-            value.length > 2 &&
-            !!value[0] &&
-            !!value[1] &&
-            !!value[2]);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    mapToDateFromNumberArray(object, ...fieldsNames) {
-        if (object) {
-            fieldsNames.forEach(fieldPath => {
-                object[fieldPath] = this.toDateFromNumberArray(object[fieldPath]);
-            });
-        }
-        return object;
-    }
-    mapAllToDateFromNumberArray(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    objects, ...fieldsNames) {
-        if (objects) {
-            objects.forEach(object => {
-                this.mapToDateFromNumberArray(object, ...fieldsNames);
-            });
-        }
-        return objects;
-    }
-    toDateFromNumberArray(dateInArray) {
-        if (dateInArray) {
-            if (dateInArray.length === 3) {
-                return new Date(dateInArray[0], dateInArray[1] - 1, dateInArray[2]);
-            }
-            else if (dateInArray.length === 5) {
-                // because when time is 00:00:00 the array does not contain the seconds.
-                return new Date(dateInArray[0], dateInArray[1] - 1, dateInArray[2], dateInArray[3], dateInArray[4]);
-            }
-            else if (dateInArray.length >= 6) {
-                return new Date(dateInArray[0], dateInArray[1] - 1, dateInArray[2], dateInArray[3], dateInArray[4], dateInArray[5]);
-            }
-            throw new Error(`Date in number[] format has wrong number of numbers : ${dateInArray.length}`);
-        }
-        return null;
-    }
-    arrayToDisplayDateDMY(d, showTime) {
-        if (showTime) {
-            return this.datePipe.transform(this.toDateFromNumberArray(d), this.dateTimeFormat);
-        }
-        else {
-            return this.datePipe.transform(this.toDateFromNumberArray(d), this.dateFormat);
-        }
-    }
-    toDayjsFromNumberArray(value) {
-        if (DateHelper.isValidArray(value)) {
-            const dateAsString = `${value[0]}-${value[1]}-${value[2]}`;
-            return dayjs(dateAsString);
-        }
-        return null;
-    }
-    isValid(value) {
-        // date is incomplete
-        if (!DateHelper.isValidArray(value)) {
-            return false;
-        }
-        // date cannot be parsed
-        if (!this.toDayjsFromNumberArray(value)) {
-            return false;
-        }
-        // date has not been shifted (i.e. 30.02.2021 -> 01.03.2021)
-        const asString = `${value[0]}-${value[1]}-${value[2]}`;
-        const asStringFromDayJS = this.toDayjsFromNumberArray(value).format('YYYY-M-D');
-        return asString === asStringFromDayJS;
-    }
-    isToday(value) {
-        return (DateHelper.isValidArray(value) &&
-            this.toDayjsFromNumberArray(value).isToday());
-    }
-    leftPad(num) {
-        if (num === undefined || num === null) {
-            return '';
-        }
-        if (num.length === 1) {
-            return `0${num}`;
-        }
-        return num;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateHelper, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateHelper, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class FoehnIconSearchComponent extends AbstractIconComponent {
     constructor() {
         super(...arguments);
@@ -7337,6 +7358,7 @@ class FoehnPageExpirationTimerComponent {
         if (!!minutes && !!seconds && !hours) {
             return `${minutes} minutes et ${seconds} secondes`;
         }
+        return '';
     }
     manageScreenReaderAnnouncement(timeInSeconds, hours, minutes, seconds) {
         const _1_hourInSeconds = 60 * 60;
@@ -8716,9 +8738,13 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
     }
     selectValueToDisplay(value, elements) {
         if (value === null) {
-            // Clear the value.
-            this.inputValue = null;
-            this.filterElements(true);
+            // PRESTAKIT-733: need to use setTimeout (not ngZone because doesn't work)
+            // to avoid having a value displayed on screen when NULL is set
+            setTimeout(() => {
+                // Clear the value
+                this.inputValue = null;
+                this.filterElements(true);
+            });
             return;
         }
         const elemToCompare = value ? value : this.defaultElementValue;
@@ -8764,7 +8790,7 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
                 useExisting: forwardRef(() => FoehnAutocompleteComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "suggestionsList", first: true, predicate: ["suggestionsList"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["entryComponent"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"visually-hidden\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"visually-hidden\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabledSubject | async\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (input)=\"handleSearchInputChange(entryComponent.value)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"autocomplete-clear-button btn\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.min-height.px]=\"itemHeightInSuggestionListInPx\"\n                    [attr.label-value]=\"getLabel(element)\"\n                    [attr.value]=\"getElementIdentifier(element)\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:#fff;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "suggestionsList", first: true, predicate: ["suggestionsList"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["entryComponent"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"visually-hidden\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"visually-hidden\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabledSubject | async\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (input)=\"handleSearchInputChange(entryComponent.value)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"btn autocomplete-clear-button\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.min-height.px]=\"itemHeightInSuggestionListInPx\"\n                    [attr.label-value]=\"getLabel(element)\"\n                    [attr.value]=\"getElementIdentifier(element)\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:#fff;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnAutocompleteComponent, decorators: [{
             type: Component,
@@ -8774,7 +8800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnAutocompleteComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"visually-hidden\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"visually-hidden\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabledSubject | async\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (input)=\"handleSearchInputChange(entryComponent.value)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"autocomplete-clear-button btn\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.min-height.px]=\"itemHeightInSuggestionListInPx\"\n                    [attr.label-value]=\"getLabel(element)\"\n                    [attr.value]=\"getElementIdentifier(element)\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:#fff;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"] }]
+                    ], standalone: false, template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"visually-hidden\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"visually-hidden\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabledSubject | async\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (input)=\"handleSearchInputChange(entryComponent.value)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"btn autocomplete-clear-button\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.min-height.px]=\"itemHeightInSuggestionListInPx\"\n                    [attr.label-value]=\"getLabel(element)\"\n                    [attr.value]=\"getElementIdentifier(element)\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:#fff;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { virtualScrollViewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -9357,7 +9383,31 @@ class DatePickerHelper {
         this.DATE_STRING_FORMAT = 'YYYY-MM-DD';
         this.DATE_READABLE_FORMAT = 'D MMMM YYYY';
         this._displayedMonthYear = new BehaviorSubject(null);
-        this.loadLocale = (language) => import(/* @vite-ignore */ `dayjs/locale/${language}`).then(() => dayjs.locale(language));
+        this.loadLocale = async (language) => {
+            // Need static imports due to angular 19 being more strict with dynamic import for security reason and bundles optimization
+            switch (language) {
+                case 'fr':
+                    await import('dayjs/locale/fr');
+                    break;
+                case 'en':
+                    await import('dayjs/locale/en');
+                    break;
+                case 'es':
+                    await import('dayjs/locale/es');
+                    break;
+                case 'it':
+                    await import('dayjs/locale/it');
+                    break;
+                case 'pt':
+                    await import('dayjs/locale/pt');
+                    break;
+                // ... autres cas
+                default:
+                    console.warn(`Locale ${language} not supported`);
+                    language = 'en'; // fallback
+            }
+            dayjs.locale(language);
+        };
     }
     get displayedMonthYear() {
         return this._displayedMonthYear.asObservable();
@@ -10596,7 +10646,7 @@ class FoehnInputNumberComponent extends FoehnInputStringComponent {
                 useExisting: forwardRef(() => FoehnInputNumberComponent),
                 multi: true
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnInputNumberComponent, decorators: [{
             type: Component,
@@ -10606,7 +10656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnInputNumberComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
+                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
         }], ctorParameters: () => [{ type: CurrencyHelper }, { type: SdkDictionaryService }], propDecorators: { hideStandardHelpText: [{
                 type: Input
             }], allowDecimal: [{
@@ -11091,7 +11141,7 @@ class FoehnInputEmailComponent extends FoehnInputStringComponent {
                 useExisting: forwardRef(() => FoehnInputEmailComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnInputEmailComponent, decorators: [{
             type: Component,
@@ -11101,7 +11151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnInputEmailComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
+                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
         }], ctorParameters: () => [{ type: SdkDictionaryService }] });
 
 class FoehnInputHiddenComponent extends FoehnInputStringComponent {
@@ -11175,7 +11225,7 @@ class FoehnInputPasswordComponent extends FoehnInputStringComponent {
                 useExisting: forwardRef(() => FoehnInputPasswordComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnInputPasswordComponent, decorators: [{
             type: Component,
@@ -11185,7 +11235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnInputPasswordComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
+                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
 const DEFAULT_INTERNATIONAL_AND_NO_SWISS = 'foehn-input-phone.DEFAULT_INTERNATIONAL_AND_NO_SWISS';
@@ -11255,7 +11305,7 @@ class FoehnInputPhoneComponent extends FoehnInputStringComponent {
                 useExisting: forwardRef(() => FoehnInputPhoneComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnInputPhoneComponent, decorators: [{
             type: Component,
@@ -11265,7 +11315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnInputPhoneComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
+                    ], standalone: false, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\n        <label\n            class=\"form-label\"\n            [attr.for]=\"buildChildId()\"\n            *ngIf=\"label && type !== 'hidden'\"\n            [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n        >\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </label>\n\n        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"standardHelpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'StandardHelpText'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"standardHelpText\"\n    ></small>\n\n    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.autocapitalize]=\"autocapitalize\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            [title]=\"'foehn-input.clear-button.label' | fromDictionary\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
         }], ctorParameters: () => [{ type: SdkDictionaryService }], propDecorators: { acceptInternational: [{
                 type: Input
             }], acceptMobilePhone: [{
@@ -11452,7 +11502,7 @@ class FoehnInputTextareaComponent extends FoehnInputStringComponent {
                 useExisting: forwardRef(() => FoehnInputTextareaComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <textarea\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"\n            hasErrorsToDisplay() || null || isCharCountExceeded\n        \"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [rows]=\"rows\"\n        (paste)=\"onPaste($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    ></textarea>\n\n    <div\n        *ngIf=\"displayCharCount && max\"\n        [innerHTML]=\"charCountLabel\"\n        id=\"chars-remaining\"\n        class=\"chars-remaining\"\n        [class.char-count-exceeded]=\"isCharCountExceeded\"\n        [attr.aria-live]=\"ariaLiveStatus\"\n    ></div>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <textarea\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"\n            hasErrorsToDisplay() || null || isCharCountExceeded\n        \"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [rows]=\"rows\"\n        (paste)=\"onPaste($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    ></textarea>\n\n    <div\n        *ngIf=\"displayCharCount && max\"\n        [innerHTML]=\"charCountLabel\"\n        id=\"chars-remaining\"\n        class=\"chars-remaining\"\n        [class.char-count-exceeded]=\"isCharCountExceeded\"\n        [attr.aria-live]=\"ariaLiveStatus\"\n    ></div>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnInputTextareaComponent, decorators: [{
             type: Component,
@@ -11462,7 +11512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => FoehnInputTextareaComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <textarea\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"\n            hasErrorsToDisplay() || null || isCharCountExceeded\n        \"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [rows]=\"rows\"\n        (paste)=\"onPaste($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    ></textarea>\n\n    <div\n        *ngIf=\"displayCharCount && max\"\n        [innerHTML]=\"charCountLabel\"\n        id=\"chars-remaining\"\n        class=\"chars-remaining\"\n        [class.char-count-exceeded]=\"isCharCountExceeded\"\n        [attr.aria-live]=\"ariaLiveStatus\"\n    ></div>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
+                    ], standalone: false, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <textarea\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"\n            hasErrorsToDisplay() || null || isCharCountExceeded\n        \"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [rows]=\"rows\"\n        (paste)=\"onPaste($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    ></textarea>\n\n    <div\n        *ngIf=\"displayCharCount && max\"\n        [innerHTML]=\"charCountLabel\"\n        id=\"chars-remaining\"\n        class=\"chars-remaining\"\n        [class.char-count-exceeded]=\"isCharCountExceeded\"\n        [attr.aria-live]=\"ariaLiveStatus\"\n    ></div>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}:host ::ng-deep foehn-help-modal>.btn{padding-top:0!important;margin-top:0!important}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none;box-shadow:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: SdkDictionaryService }], propDecorators: { rows: [{
                 type: Input
             }], displayCharCount: [{
@@ -12776,6 +12826,9 @@ class GesdemActionRecoveryRegistrationComponent {
         this.isVisible = false;
         this.currentInfoReprise = merge(of(undefined), this.gesdemEventService.formInitializationObservable()).pipe(map(() => this.gesdemService.lastResponse?.meta?.infoReprise));
         this.currentEtapeInfo = this.appInfoService.currentEtapeInfo;
+        this.draftDemandeDeletionDate = merge(of(undefined), this.gesdemEventService.formInitializationObservable()).pipe(map(() => this.gesdemService.lastResponse?.meta
+            ?.draftDemandeDeletionDate));
+        this.draftDemRetentionDays = merge(of(undefined), this.gesdemEventService.formInitializationObservable()).pipe(map(() => this.gesdemService.lastResponse?.meta?.draftDemRetentionDays));
     }
     get isModalVisible() {
         return this.isVisible;
@@ -12934,11 +12987,11 @@ class GesdemActionRecoveryRegistrationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GesdemActionRecoveryRegistrationComponent, deps: [{ token: GesdemActionRecoveryService }, { token: ValidationHandlerService }, { token: FoehnPageService }, { token: GesdemEventService }, { token: GesdemHandlerService }, { token: ApplicationInfoService }, { token: SessionInfo }, { token: i1$1.Router }, { token: SdkEventsLoggerService }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GesdemActionRecoveryRegistrationComponent, isStandalone: false, selector: "gesdem-action-recovery-registration", inputs: { dispatchFormErrors: "dispatchFormErrors", continueLaterLabel: "continueLaterLabel", continueLaterAlreadyRegisteredLabel: "continueLaterAlreadyRegisteredLabel", continueLaterConnectedLabel: "continueLaterConnectedLabel", triggerOnPageChange: "triggerOnPageChange" }, viewQueries: [{ propertyName: "modalTrigger", first: true, predicate: ["modalTrigger"], descendants: true }, { propertyName: "form", first: true, predicate: FoehnFormComponent, descendants: true }], ngImport: i0, template: "<button\n    type=\"button\"\n    id=\"continueLaterButton\"\n    class=\"btn btn-link pe-0 ps-0 no-text-transform\"\n    *ngIf=\"canContinueLater | async\"\n    [innerHTML]=\"modalTriggerLabel | async\"\n    (click)=\"saveAndOpenModal()\"\n    #modalTrigger\n></button>\n\n<ng-container *ngIf=\"currentInfoReprise | async as currentInfo\">\n    <div\n        class=\"small\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.current-info.preview'\n                | fromDictionary\n                    : {\n                          recoveryMail: currentInfo.email,\n                          lastRegistration:\n                              (currentInfo.lastUpdate | displayDate)\n                      }\n        \"\n    ></div>\n</ng-container>\n\n<foehn-modal\n    *ngIf=\"currentEtapeInfo | async as etapeInfo\"\n    id=\"action-recovery-registration-modal\"\n    [modalSize]=\"!(isConnectedCyber | async) ? 'modal-lg' : 'modal-md'\"\n    [modalHeaderText]=\"\n        'gesdem-action-recovery-registration.modalHeaderText' | fromDictionary\n    \"\n    [isModalVisible]=\"isModalVisible\"\n    (isModalVisibleChange)=\"updateVisibilityStatus($event)\"\n>\n    <ng-container *ngIf=\"!!(isConnectedCyber | async)\">\n        <span\n            [innerHTML]=\"\n                'gesdem-action-recovery-registration.connected.info'\n                    | fromDictionary\n            \"\n        ></span>\n\n        <a href=\"/100002/demandes/search/MINE/INITIAL\">\n            <foehn-icon-pencil\n                class=\"h3\"\n                aria-hidden=\"true\"\n                [title]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></foehn-icon-pencil>\n            <span\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></span>\n        </a>\n    </ng-container>\n\n    <ng-container *ngIf=\"!(isConnectedCyber | async)\">\n        <ng-container\n            *ngIf=\"\n                currentInfoReprise | async as currentInfo;\n                else noCurrentInfo\n            \"\n        >\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"!mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.current-info'\n                        | fromDictionary\n                            : {\n                                  lastRegistration:\n                                      (currentInfo.lastUpdate | displayDate),\n                                  draftDemRetentionDaysPublic:\n                                      etapeInfo.draftDemRetentionDaysPublic?.toString(),\n                                  plural: getPluralMarker(\n                                      etapeInfo.draftDemRetentionDaysPublic\n                                  )\n                              }\n                \"\n            ></div>\n\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.info.sent'\n                        | fromDictionary\n                            : {\n                                  recoveryMail: currentInfo.email,\n                                  recoveryMobile: currentInfo.mobile,\n                                  draftDemRetentionDaysPublic:\n                                      etapeInfo.draftDemRetentionDaysPublic?.toString(),\n                                  plural: getPluralMarker(\n                                      etapeInfo.draftDemRetentionDaysPublic\n                                  )\n                              }\n                \"\n            ></div>\n        </ng-container>\n\n        <foehn-form *ngIf=\"!mailSent\" [shouldDisplayAlertSummary]=\"false\">\n            <foehn-input-email\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.email\"\n                name=\"email\"\n                [required]=\"true\"\n            ></foehn-input-email>\n\n            <foehn-input-phone\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.mobile.label'\n                        | fromDictionary\n                \"\n                [acceptInternational]=\"true\"\n                [acceptMobilePhone]=\"true\"\n                [acceptPhone]=\"false\"\n                [(model)]=\"model.mobile\"\n                name=\"mobile\"\n                [required]=\"true\"\n            ></foehn-input-phone>\n\n            <foehn-input-text\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.referenceInterne\"\n                name=\"referenceInterne\"\n                [required]=\"false\"\n            ></foehn-input-text>\n        </foehn-form>\n    </ng-container>\n\n    <div modal-footer class=\"w-100\">\n        <div class=\"d-md-flex\">\n            <div class=\"ms-md-auto me-md-2 mb-2 mt-2\">\n                <button\n                    id=\"continueLaterModalCancelButton\"\n                    type=\"button\"\n                    (click)=\"close()\"\n                    class=\"btn btn-secondary w-100\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.cancel.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n            <div\n                *ngIf=\"!(isConnectedCyber | async)\"\n                class=\"ms-md-0 me-md-2 mb-2 mt-2\"\n            >\n                <button\n                    id=\"continueLaterModalSaveButton\"\n                    type=\"submit\"\n                    (click)=\"sendAndClose()\"\n                    class=\"btn btn-success w-100\"\n                    *ngIf=\"!mailSent\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.save.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n        </div>\n    </div>\n</foehn-modal>\n\n<ng-template #noCurrentInfo>\n    <div\n        class=\"alert alert-info\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.not-connected.not-registered.info'\n                | fromDictionary\n                    : {\n                          draftDemRetentionDaysPublic: (\n                              currentEtapeInfo | async\n                          ).draftDemRetentionDaysPublic?.toString(),\n                          plural: getPluralMarker(\n                              (currentEtapeInfo | async)\n                                  .draftDemRetentionDaysPublic\n                          )\n                      }\n        \"\n    ></div>\n</ng-template>\n", styles: [".no-text-transform{text-transform:none;cursor:pointer}:host ::ng-deep foehn-icon-pencil .svg-inline--fa{color:#4a4a4b!important;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnInputTextComponent, selector: "foehn-input-text", inputs: ["numberOnly"] }, { kind: "component", type: FoehnInputEmailComponent, selector: "foehn-input-email" }, { kind: "component", type: FoehnInputPhoneComponent, selector: "foehn-input-phone", inputs: ["acceptInternational", "acceptMobilePhone", "acceptPhone"] }, { kind: "component", type: FoehnIconPencilComponent, selector: "foehn-icon-pencil" }, { kind: "component", type: FoehnFormComponent, selector: "foehn-form", inputs: ["shouldDisplayAlertSummary"] }, { kind: "component", type: FoehnModalComponent, selector: "foehn-modal", inputs: ["id", "name", "modalSize", "modalBodyText", "modalHeaderText", "closeable", "modalTriggerHtmlElement", "isModalVisible"], outputs: ["isModalVisibleChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }, { kind: "pipe", type: DisplayDatePipe, name: "displayDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GesdemActionRecoveryRegistrationComponent, isStandalone: false, selector: "gesdem-action-recovery-registration", inputs: { dispatchFormErrors: "dispatchFormErrors", continueLaterLabel: "continueLaterLabel", continueLaterAlreadyRegisteredLabel: "continueLaterAlreadyRegisteredLabel", continueLaterConnectedLabel: "continueLaterConnectedLabel", triggerOnPageChange: "triggerOnPageChange" }, viewQueries: [{ propertyName: "modalTrigger", first: true, predicate: ["modalTrigger"], descendants: true }, { propertyName: "form", first: true, predicate: FoehnFormComponent, descendants: true }], ngImport: i0, template: "<button\n    type=\"button\"\n    id=\"continueLaterButton\"\n    class=\"btn btn-link pe-0 ps-0 no-text-transform\"\n    *ngIf=\"canContinueLater | async\"\n    [innerHTML]=\"modalTriggerLabel | async\"\n    (click)=\"saveAndOpenModal()\"\n    #modalTrigger\n></button>\n\n<ng-container *ngIf=\"currentInfoReprise | async as currentInfo\">\n    <div\n        class=\"small\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.current-info.preview'\n                | fromDictionary\n                    : {\n                          recoveryMail: currentInfo.email,\n                          lastRegistration:\n                              (currentInfo.lastUpdate | displayDate)\n                      }\n        \"\n    ></div>\n</ng-container>\n\n<!--connect\u00E9 ou si a demand\u00E9 un lien de reprise, sinon ca sert \u00E0 rien de montrer la date si le demandeur n'a pas le lien-->\n<ng-container\n    *ngIf=\"!!(isConnectedCyber | async) || !!(currentInfoReprise | async)\"\n>\n    <div\n        *ngIf=\"draftDemRetentionDays | async as retentionDays\"\n        class=\"small\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.deletion.info'\n                | fromDictionary\n                    : {\n                          draftDemRetentionDays: retentionDays.toString(),\n                          draftDemandeDeletionDate:\n                              draftDemandeDeletionDate\n                              | async\n                              | displayDate: false,\n                          plural: getPluralMarker(retentionDays)\n                      }\n        \"\n    ></div>\n</ng-container>\n\n<foehn-modal\n    id=\"action-recovery-registration-modal\"\n    [modalSize]=\"!(isConnectedCyber | async) ? 'modal-lg' : 'modal-md'\"\n    [modalHeaderText]=\"\n        'gesdem-action-recovery-registration.modalHeaderText' | fromDictionary\n    \"\n    [isModalVisible]=\"isModalVisible\"\n    (isModalVisibleChange)=\"updateVisibilityStatus($event)\"\n>\n    <ng-container *ngIf=\"!!(isConnectedCyber | async)\">\n        <span\n            [innerHTML]=\"\n                'gesdem-action-recovery-registration.connected.info'\n                    | fromDictionary\n            \"\n        ></span>\n\n        <a href=\"/100002/demandes/search/MINE/INITIAL\">\n            <foehn-icon-pencil\n                class=\"h3\"\n                aria-hidden=\"true\"\n                [title]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></foehn-icon-pencil>\n            <span\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></span>\n        </a>\n\n        <div\n            class=\"mt-3\"\n            [innerHTML]=\"\n                'gesdem-action-recovery-registration.connected.info-deletion'\n                    | fromDictionary\n                        : {\n                              connectedDeletionDate:\n                                  draftDemandeDeletionDate\n                                  | async\n                                  | displayDate: false\n                          }\n            \"\n        ></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!(isConnectedCyber | async)\">\n        <ng-container\n            *ngIf=\"\n                currentInfoReprise | async as currentInfo;\n                else noCurrentInfo\n            \"\n        >\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"!mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.current-info'\n                        | fromDictionary\n                            : {\n                                  lastRegistration:\n                                      (currentInfo.lastUpdate | displayDate),\n                                  draftDemRetentionDaysPublic:\n                                      (draftDemRetentionDays | async | number),\n                                  plural: getPluralMarker(\n                                      draftDemRetentionDays | async\n                                  )\n                              }\n                \"\n            ></div>\n\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.info.sent'\n                        | fromDictionary\n                            : {\n                                  recoveryMail: currentInfo.email,\n                                  recoveryMobile: currentInfo.mobile,\n                                  draftDemRetentionDaysPublic:\n                                      (draftDemRetentionDays | async | number),\n                                  plural: getPluralMarker(\n                                      draftDemRetentionDays | async\n                                  )\n                              }\n                \"\n            ></div>\n        </ng-container>\n\n        <foehn-form *ngIf=\"!mailSent\" [shouldDisplayAlertSummary]=\"false\">\n            <foehn-input-email\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.email\"\n                name=\"email\"\n                [required]=\"true\"\n            ></foehn-input-email>\n\n            <foehn-input-phone\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.mobile.label'\n                        | fromDictionary\n                \"\n                [acceptInternational]=\"true\"\n                [acceptMobilePhone]=\"true\"\n                [acceptPhone]=\"false\"\n                [(model)]=\"model.mobile\"\n                name=\"mobile\"\n                [required]=\"true\"\n            ></foehn-input-phone>\n\n            <foehn-input-text\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.referenceInterne\"\n                name=\"referenceInterne\"\n                [required]=\"false\"\n            ></foehn-input-text>\n        </foehn-form>\n    </ng-container>\n\n    <div modal-footer class=\"w-100\">\n        <div class=\"d-md-flex\">\n            <div class=\"ms-md-auto me-md-2 mb-2 mt-2\">\n                <button\n                    id=\"continueLaterModalCancelButton\"\n                    type=\"button\"\n                    (click)=\"close()\"\n                    class=\"btn btn-secondary w-100\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.cancel.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n            <div\n                *ngIf=\"!(isConnectedCyber | async)\"\n                class=\"ms-md-0 me-md-2 mb-2 mt-2\"\n            >\n                <button\n                    id=\"continueLaterModalSaveButton\"\n                    type=\"submit\"\n                    (click)=\"sendAndClose()\"\n                    class=\"btn btn-success w-100\"\n                    *ngIf=\"!mailSent\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.save.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n        </div>\n    </div>\n</foehn-modal>\n\n<ng-template #noCurrentInfo>\n    <div\n        class=\"alert alert-info\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.not-connected.not-registered.info'\n                | fromDictionary\n                    : {\n                          draftDemRetentionDaysPublic:\n                              (draftDemRetentionDays | async | number),\n                          plural: getPluralMarker(draftDemRetentionDays | async)\n                      }\n        \"\n    ></div>\n</ng-template>\n", styles: [".no-text-transform{text-transform:none;cursor:pointer}:host ::ng-deep foehn-icon-pencil .svg-inline--fa{color:#4a4a4b!important;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnInputTextComponent, selector: "foehn-input-text", inputs: ["numberOnly"] }, { kind: "component", type: FoehnInputEmailComponent, selector: "foehn-input-email" }, { kind: "component", type: FoehnInputPhoneComponent, selector: "foehn-input-phone", inputs: ["acceptInternational", "acceptMobilePhone", "acceptPhone"] }, { kind: "component", type: FoehnIconPencilComponent, selector: "foehn-icon-pencil" }, { kind: "component", type: FoehnFormComponent, selector: "foehn-form", inputs: ["shouldDisplayAlertSummary"] }, { kind: "component", type: FoehnModalComponent, selector: "foehn-modal", inputs: ["id", "name", "modalSize", "modalBodyText", "modalHeaderText", "closeable", "modalTriggerHtmlElement", "isModalVisible"], outputs: ["isModalVisibleChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }, { kind: "pipe", type: DisplayDatePipe, name: "displayDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GesdemActionRecoveryRegistrationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gesdem-action-recovery-registration', standalone: false, template: "<button\n    type=\"button\"\n    id=\"continueLaterButton\"\n    class=\"btn btn-link pe-0 ps-0 no-text-transform\"\n    *ngIf=\"canContinueLater | async\"\n    [innerHTML]=\"modalTriggerLabel | async\"\n    (click)=\"saveAndOpenModal()\"\n    #modalTrigger\n></button>\n\n<ng-container *ngIf=\"currentInfoReprise | async as currentInfo\">\n    <div\n        class=\"small\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.current-info.preview'\n                | fromDictionary\n                    : {\n                          recoveryMail: currentInfo.email,\n                          lastRegistration:\n                              (currentInfo.lastUpdate | displayDate)\n                      }\n        \"\n    ></div>\n</ng-container>\n\n<foehn-modal\n    *ngIf=\"currentEtapeInfo | async as etapeInfo\"\n    id=\"action-recovery-registration-modal\"\n    [modalSize]=\"!(isConnectedCyber | async) ? 'modal-lg' : 'modal-md'\"\n    [modalHeaderText]=\"\n        'gesdem-action-recovery-registration.modalHeaderText' | fromDictionary\n    \"\n    [isModalVisible]=\"isModalVisible\"\n    (isModalVisibleChange)=\"updateVisibilityStatus($event)\"\n>\n    <ng-container *ngIf=\"!!(isConnectedCyber | async)\">\n        <span\n            [innerHTML]=\"\n                'gesdem-action-recovery-registration.connected.info'\n                    | fromDictionary\n            \"\n        ></span>\n\n        <a href=\"/100002/demandes/search/MINE/INITIAL\">\n            <foehn-icon-pencil\n                class=\"h3\"\n                aria-hidden=\"true\"\n                [title]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></foehn-icon-pencil>\n            <span\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></span>\n        </a>\n    </ng-container>\n\n    <ng-container *ngIf=\"!(isConnectedCyber | async)\">\n        <ng-container\n            *ngIf=\"\n                currentInfoReprise | async as currentInfo;\n                else noCurrentInfo\n            \"\n        >\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"!mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.current-info'\n                        | fromDictionary\n                            : {\n                                  lastRegistration:\n                                      (currentInfo.lastUpdate | displayDate),\n                                  draftDemRetentionDaysPublic:\n                                      etapeInfo.draftDemRetentionDaysPublic?.toString(),\n                                  plural: getPluralMarker(\n                                      etapeInfo.draftDemRetentionDaysPublic\n                                  )\n                              }\n                \"\n            ></div>\n\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.info.sent'\n                        | fromDictionary\n                            : {\n                                  recoveryMail: currentInfo.email,\n                                  recoveryMobile: currentInfo.mobile,\n                                  draftDemRetentionDaysPublic:\n                                      etapeInfo.draftDemRetentionDaysPublic?.toString(),\n                                  plural: getPluralMarker(\n                                      etapeInfo.draftDemRetentionDaysPublic\n                                  )\n                              }\n                \"\n            ></div>\n        </ng-container>\n\n        <foehn-form *ngIf=\"!mailSent\" [shouldDisplayAlertSummary]=\"false\">\n            <foehn-input-email\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.email\"\n                name=\"email\"\n                [required]=\"true\"\n            ></foehn-input-email>\n\n            <foehn-input-phone\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.mobile.label'\n                        | fromDictionary\n                \"\n                [acceptInternational]=\"true\"\n                [acceptMobilePhone]=\"true\"\n                [acceptPhone]=\"false\"\n                [(model)]=\"model.mobile\"\n                name=\"mobile\"\n                [required]=\"true\"\n            ></foehn-input-phone>\n\n            <foehn-input-text\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.referenceInterne\"\n                name=\"referenceInterne\"\n                [required]=\"false\"\n            ></foehn-input-text>\n        </foehn-form>\n    </ng-container>\n\n    <div modal-footer class=\"w-100\">\n        <div class=\"d-md-flex\">\n            <div class=\"ms-md-auto me-md-2 mb-2 mt-2\">\n                <button\n                    id=\"continueLaterModalCancelButton\"\n                    type=\"button\"\n                    (click)=\"close()\"\n                    class=\"btn btn-secondary w-100\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.cancel.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n            <div\n                *ngIf=\"!(isConnectedCyber | async)\"\n                class=\"ms-md-0 me-md-2 mb-2 mt-2\"\n            >\n                <button\n                    id=\"continueLaterModalSaveButton\"\n                    type=\"submit\"\n                    (click)=\"sendAndClose()\"\n                    class=\"btn btn-success w-100\"\n                    *ngIf=\"!mailSent\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.save.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n        </div>\n    </div>\n</foehn-modal>\n\n<ng-template #noCurrentInfo>\n    <div\n        class=\"alert alert-info\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.not-connected.not-registered.info'\n                | fromDictionary\n                    : {\n                          draftDemRetentionDaysPublic: (\n                              currentEtapeInfo | async\n                          ).draftDemRetentionDaysPublic?.toString(),\n                          plural: getPluralMarker(\n                              (currentEtapeInfo | async)\n                                  .draftDemRetentionDaysPublic\n                          )\n                      }\n        \"\n    ></div>\n</ng-template>\n", styles: [".no-text-transform{text-transform:none;cursor:pointer}:host ::ng-deep foehn-icon-pencil .svg-inline--fa{color:#4a4a4b!important;margin-right:10px}\n"] }]
+            args: [{ selector: 'gesdem-action-recovery-registration', standalone: false, template: "<button\n    type=\"button\"\n    id=\"continueLaterButton\"\n    class=\"btn btn-link pe-0 ps-0 no-text-transform\"\n    *ngIf=\"canContinueLater | async\"\n    [innerHTML]=\"modalTriggerLabel | async\"\n    (click)=\"saveAndOpenModal()\"\n    #modalTrigger\n></button>\n\n<ng-container *ngIf=\"currentInfoReprise | async as currentInfo\">\n    <div\n        class=\"small\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.current-info.preview'\n                | fromDictionary\n                    : {\n                          recoveryMail: currentInfo.email,\n                          lastRegistration:\n                              (currentInfo.lastUpdate | displayDate)\n                      }\n        \"\n    ></div>\n</ng-container>\n\n<!--connect\u00E9 ou si a demand\u00E9 un lien de reprise, sinon ca sert \u00E0 rien de montrer la date si le demandeur n'a pas le lien-->\n<ng-container\n    *ngIf=\"!!(isConnectedCyber | async) || !!(currentInfoReprise | async)\"\n>\n    <div\n        *ngIf=\"draftDemRetentionDays | async as retentionDays\"\n        class=\"small\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.deletion.info'\n                | fromDictionary\n                    : {\n                          draftDemRetentionDays: retentionDays.toString(),\n                          draftDemandeDeletionDate:\n                              draftDemandeDeletionDate\n                              | async\n                              | displayDate: false,\n                          plural: getPluralMarker(retentionDays)\n                      }\n        \"\n    ></div>\n</ng-container>\n\n<foehn-modal\n    id=\"action-recovery-registration-modal\"\n    [modalSize]=\"!(isConnectedCyber | async) ? 'modal-lg' : 'modal-md'\"\n    [modalHeaderText]=\"\n        'gesdem-action-recovery-registration.modalHeaderText' | fromDictionary\n    \"\n    [isModalVisible]=\"isModalVisible\"\n    (isModalVisibleChange)=\"updateVisibilityStatus($event)\"\n>\n    <ng-container *ngIf=\"!!(isConnectedCyber | async)\">\n        <span\n            [innerHTML]=\"\n                'gesdem-action-recovery-registration.connected.info'\n                    | fromDictionary\n            \"\n        ></span>\n\n        <a href=\"/100002/demandes/search/MINE/INITIAL\">\n            <foehn-icon-pencil\n                class=\"h3\"\n                aria-hidden=\"true\"\n                [title]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></foehn-icon-pencil>\n            <span\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.connected.info.draft-link-text'\n                        | fromDictionary\n                \"\n            ></span>\n        </a>\n\n        <div\n            class=\"mt-3\"\n            [innerHTML]=\"\n                'gesdem-action-recovery-registration.connected.info-deletion'\n                    | fromDictionary\n                        : {\n                              connectedDeletionDate:\n                                  draftDemandeDeletionDate\n                                  | async\n                                  | displayDate: false\n                          }\n            \"\n        ></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!(isConnectedCyber | async)\">\n        <ng-container\n            *ngIf=\"\n                currentInfoReprise | async as currentInfo;\n                else noCurrentInfo\n            \"\n        >\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"!mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.current-info'\n                        | fromDictionary\n                            : {\n                                  lastRegistration:\n                                      (currentInfo.lastUpdate | displayDate),\n                                  draftDemRetentionDaysPublic:\n                                      (draftDemRetentionDays | async | number),\n                                  plural: getPluralMarker(\n                                      draftDemRetentionDays | async\n                                  )\n                              }\n                \"\n            ></div>\n\n            <div\n                class=\"alert alert-info\"\n                *ngIf=\"mailSent\"\n                [innerHTML]=\"\n                    'gesdem-action-recovery-registration.not-connected.info.sent'\n                        | fromDictionary\n                            : {\n                                  recoveryMail: currentInfo.email,\n                                  recoveryMobile: currentInfo.mobile,\n                                  draftDemRetentionDaysPublic:\n                                      (draftDemRetentionDays | async | number),\n                                  plural: getPluralMarker(\n                                      draftDemRetentionDays | async\n                                  )\n                              }\n                \"\n            ></div>\n        </ng-container>\n\n        <foehn-form *ngIf=\"!mailSent\" [shouldDisplayAlertSummary]=\"false\">\n            <foehn-input-email\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.email.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.email\"\n                name=\"email\"\n                [required]=\"true\"\n            ></foehn-input-email>\n\n            <foehn-input-phone\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.mobile.label'\n                        | fromDictionary\n                \"\n                [acceptInternational]=\"true\"\n                [acceptMobilePhone]=\"true\"\n                [acceptPhone]=\"false\"\n                [(model)]=\"model.mobile\"\n                name=\"mobile\"\n                [required]=\"true\"\n            ></foehn-input-phone>\n\n            <foehn-input-text\n                [label]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.label'\n                        | fromDictionary\n                \"\n                [helpText]=\"\n                    'gesdem-action-recovery-registration.not-connected.reference-interne.help-text'\n                        | fromDictionary\n                \"\n                [(model)]=\"model.referenceInterne\"\n                name=\"referenceInterne\"\n                [required]=\"false\"\n            ></foehn-input-text>\n        </foehn-form>\n    </ng-container>\n\n    <div modal-footer class=\"w-100\">\n        <div class=\"d-md-flex\">\n            <div class=\"ms-md-auto me-md-2 mb-2 mt-2\">\n                <button\n                    id=\"continueLaterModalCancelButton\"\n                    type=\"button\"\n                    (click)=\"close()\"\n                    class=\"btn btn-secondary w-100\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.cancel.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n            <div\n                *ngIf=\"!(isConnectedCyber | async)\"\n                class=\"ms-md-0 me-md-2 mb-2 mt-2\"\n            >\n                <button\n                    id=\"continueLaterModalSaveButton\"\n                    type=\"submit\"\n                    (click)=\"sendAndClose()\"\n                    class=\"btn btn-success w-100\"\n                    *ngIf=\"!mailSent\"\n                    [innerHTML]=\"\n                        'gesdem-action-recovery-registration.save.button'\n                            | fromDictionary\n                    \"\n                ></button>\n            </div>\n        </div>\n    </div>\n</foehn-modal>\n\n<ng-template #noCurrentInfo>\n    <div\n        class=\"alert alert-info\"\n        [innerHTML]=\"\n            'gesdem-action-recovery-registration.not-connected.not-registered.info'\n                | fromDictionary\n                    : {\n                          draftDemRetentionDaysPublic:\n                              (draftDemRetentionDays | async | number),\n                          plural: getPluralMarker(draftDemRetentionDays | async)\n                      }\n        \"\n    ></div>\n</ng-template>\n", styles: [".no-text-transform{text-transform:none;cursor:pointer}:host ::ng-deep foehn-icon-pencil .svg-inline--fa{color:#4a4a4b!important;margin-right:10px}\n"] }]
         }], ctorParameters: () => [{ type: GesdemActionRecoveryService }, { type: ValidationHandlerService }, { type: FoehnPageService }, { type: GesdemEventService }, { type: GesdemHandlerService }, { type: ApplicationInfoService }, { type: SessionInfo }, { type: i1$1.Router }, { type: SdkEventsLoggerService }, { type: SdkDictionaryService }], propDecorators: { dispatchFormErrors: [{
                 type: Input
             }], continueLaterLabel: [{
@@ -13666,12 +13719,21 @@ class RedirectComponent {
             }
         }));
     }
+    ngOnDestroy() {
+        this.cancelSetInterval();
+    }
     reloadPage() {
+        this.cancelSetInterval();
+        if (!this.redirectUrl?.length) {
+            window.location.reload();
+            return;
+        }
         window.location.href = this.redirectUrl;
     }
     startTimer() {
+        this.cancelSetInterval();
         this.counter = 10;
-        setInterval(() => {
+        this.intervalId = setInterval(() => {
             if (0 === this.counter) {
                 this.reloadPage();
                 return;
@@ -13679,12 +13741,17 @@ class RedirectComponent {
             this.counter--;
         }, 1000);
     }
+    cancelSetInterval() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RedirectComponent, deps: [{ token: IamExpiredInterceptorService }, { token: FoehnPageModalService }, { token: SessionInfo }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RedirectComponent, isStandalone: false, selector: "redirector", ngImport: i0, template: "<foehn-modal\n    [modalHeaderText]=\"'Information'\"\n    [isModalVisible]=\"isModalVisible | async\"\n    [closeable]=\"false\"\n>\n    <p>Votre session a expir\u00E9.</p>\n    <p>\n        Vous pouvez\n        <a [href]=\"redirectUrl\">vous connecter</a>\n        \u00E0 nouveau pour continuer \u00E0 utiliser nos services.\n    </p>\n\n    <div modal-footer class=\"w-100 text-end fw-bold\">\n        Vous allez \u00EAtre redirig\u00E9 dans {{ counter }} s.\n    </div>\n</foehn-modal>\n", dependencies: [{ kind: "component", type: FoehnModalComponent, selector: "foehn-modal", inputs: ["id", "name", "modalSize", "modalBodyText", "modalHeaderText", "closeable", "modalTriggerHtmlElement", "isModalVisible"], outputs: ["isModalVisibleChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RedirectComponent, isStandalone: false, selector: "redirector", ngImport: i0, template: "<foehn-modal\n    [modalHeaderText]=\"'Information'\"\n    [isModalVisible]=\"isModalVisible | async\"\n    [closeable]=\"false\"\n>\n    <p>Votre session a expir\u00E9.</p>\n    <p>\n        Vous pouvez\n        <a href=\"#\" (click)=\"$event.preventDefault(); reloadPage()\">\n            vous connecter\n        </a>\n        \u00E0 nouveau pour continuer \u00E0 utiliser nos services.\n    </p>\n\n    <div modal-footer class=\"w-100 text-end fw-bold\">\n        Vous allez \u00EAtre redirig\u00E9 dans {{ counter }} s.\n    </div>\n</foehn-modal>\n", dependencies: [{ kind: "component", type: FoehnModalComponent, selector: "foehn-modal", inputs: ["id", "name", "modalSize", "modalBodyText", "modalHeaderText", "closeable", "modalTriggerHtmlElement", "isModalVisible"], outputs: ["isModalVisibleChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RedirectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'redirector', standalone: false, template: "<foehn-modal\n    [modalHeaderText]=\"'Information'\"\n    [isModalVisible]=\"isModalVisible | async\"\n    [closeable]=\"false\"\n>\n    <p>Votre session a expir\u00E9.</p>\n    <p>\n        Vous pouvez\n        <a [href]=\"redirectUrl\">vous connecter</a>\n        \u00E0 nouveau pour continuer \u00E0 utiliser nos services.\n    </p>\n\n    <div modal-footer class=\"w-100 text-end fw-bold\">\n        Vous allez \u00EAtre redirig\u00E9 dans {{ counter }} s.\n    </div>\n</foehn-modal>\n" }]
+            args: [{ selector: 'redirector', standalone: false, template: "<foehn-modal\n    [modalHeaderText]=\"'Information'\"\n    [isModalVisible]=\"isModalVisible | async\"\n    [closeable]=\"false\"\n>\n    <p>Votre session a expir\u00E9.</p>\n    <p>\n        Vous pouvez\n        <a href=\"#\" (click)=\"$event.preventDefault(); reloadPage()\">\n            vous connecter\n        </a>\n        \u00E0 nouveau pour continuer \u00E0 utiliser nos services.\n    </p>\n\n    <div modal-footer class=\"w-100 text-end fw-bold\">\n        Vous allez \u00EAtre redirig\u00E9 dans {{ counter }} s.\n    </div>\n</foehn-modal>\n" }]
         }], ctorParameters: () => [{ type: IamExpiredInterceptorService }, { type: FoehnPageModalService }, { type: SessionInfo }] });
 
 class SdkRedirectModule {
@@ -13871,13 +13938,11 @@ class AbstractFoehnUploaderComponent extends FoehnInputComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AbstractFoehnUploaderComponent, deps: [{ token: ApplicationInfoService }, { token: FoehnConfirmModalService }, { token: SdkDictionaryService }, { token: GrowlBrokerService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: AbstractFoehnUploaderComponent, isStandalone: true, inputs: { required: "required", dragAndDrop: "dragAndDrop", showUploadButton: "showUploadButton", readonly: "readonly", hideGlobalInfos: "hideGlobalInfos", multiple: "multiple", key: "key", chooseButtonLabel: "chooseButtonLabel", chooseButtonLabelMultiple: "chooseButtonLabelMultiple", dropZoneLabel: "dropZoneLabel", dropZoneLabelMultiple: "dropZoneLabelMultiple", overrideAcceptedExtensions: "overrideAcceptedExtensions", overrideMaxFileNameLength: "overrideMaxFileNameLength", overrideIllegalCharacters: "overrideIllegalCharacters", showDeleteConfirmationMessage: "showDeleteConfirmationMessage", deleteConfirmationMessage: "deleteConfirmationMessage", maxSimultaneousSelectedFiles: "maxSimultaneousSelectedFiles", shouldDisplayFileSavedConfirmation: "shouldDisplayFileSavedConfirmation", maxFilesCount: "maxFilesCount", maxFilesSizeInMo: "maxFilesSizeInMo" }, host: { listeners: { "window:dragover": "onDocumentDragOver($event)", "window:dragleave": "onDocumentDragLeave($event)", "window:drop": "onDocumentDrop($event)" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: AbstractFoehnUploaderComponent, isStandalone: true, inputs: { dragAndDrop: "dragAndDrop", showUploadButton: "showUploadButton", readonly: "readonly", hideGlobalInfos: "hideGlobalInfos", multiple: "multiple", key: "key", chooseButtonLabel: "chooseButtonLabel", chooseButtonLabelMultiple: "chooseButtonLabelMultiple", dropZoneLabel: "dropZoneLabel", dropZoneLabelMultiple: "dropZoneLabelMultiple", overrideAcceptedExtensions: "overrideAcceptedExtensions", overrideMaxFileNameLength: "overrideMaxFileNameLength", overrideIllegalCharacters: "overrideIllegalCharacters", showDeleteConfirmationMessage: "showDeleteConfirmationMessage", deleteConfirmationMessage: "deleteConfirmationMessage", maxSimultaneousSelectedFiles: "maxSimultaneousSelectedFiles", shouldDisplayFileSavedConfirmation: "shouldDisplayFileSavedConfirmation", maxFilesCount: "maxFilesCount", maxFilesSizeInMo: "maxFilesSizeInMo" }, host: { listeners: { "window:dragover": "onDocumentDragOver($event)", "window:dragleave": "onDocumentDragLeave($event)", "window:drop": "onDocumentDrop($event)" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AbstractFoehnUploaderComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: ApplicationInfoService }, { type: FoehnConfirmModalService }, { type: SdkDictionaryService }, { type: GrowlBrokerService }], propDecorators: { required: [{
-                type: Input
-            }], dragAndDrop: [{
+        }], ctorParameters: () => [{ type: ApplicationInfoService }, { type: FoehnConfirmModalService }, { type: SdkDictionaryService }, { type: GrowlBrokerService }], propDecorators: { dragAndDrop: [{
                 type: Input
             }], showUploadButton: [{
                 type: Input
@@ -14801,7 +14866,7 @@ class FoehnPictureUploadComponent extends FoehnInputComponent {
         return acceptedFormats.includes(fileExtension);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FoehnPictureUploadComponent, deps: [{ token: MultiUploadService }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FoehnPictureUploadComponent, isStandalone: false, selector: "foehn-picture-upload", inputs: { name: "name", key: "key", label: "label", baseUrl: "baseUrl", croppedPictureFilename: "croppedPictureFilename", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", shouldDisplayFileSavedConfirmation: "shouldDisplayFileSavedConfirmation" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FoehnPictureUploadComponent, isStandalone: false, selector: "foehn-picture-upload", inputs: { key: "key", baseUrl: "baseUrl", croppedPictureFilename: "croppedPictureFilename", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", shouldDisplayFileSavedConfirmation: "shouldDisplayFileSavedConfirmation" }, providers: [
             {
                 provide: FoehnInputComponent,
                 useExisting: forwardRef(() => FoehnPictureUploadComponent),
@@ -14822,11 +14887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         { provide: MultiUploadService, useClass: MultiUploadService },
                         { provide: UploadProgressService, useClass: UploadProgressService }
                     ], standalone: false, template: "<div\n    [attr.id]=\"buildId('Container')\"\n    [class.has-danger]=\"hasErrors()\"\n    [class.vd-form-group-danger]=\"hasErrors()\"\n    class=\"form-group clearable-input-form-group\"\n    tabindex=\"-1\"\n    #fallBackTrigger\n>\n    <label\n        class=\"form-label\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'visually-hidden' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div *ngIf=\"hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <img\n                [id]=\"buildChildId('Picture')\"\n                [attr.alt]=\"label\"\n                [src]=\"getDownloadUrl()\"\n            />\n        </div>\n        <div class=\"col-md-4\">\n            <button\n                type=\"button\"\n                class=\"btn btn-danger w-100\"\n                [attr.id]=\"buildChildId('DeleteButton')\"\n                (click)=\"deleteFile()\"\n            >\n                {{\n                    'foehn-picture-upload.delete-picture-label' | fromDictionary\n                }}\n            </button>\n        </div>\n    </div>\n\n    <div *ngIf=\"!hasPicture && !croppedPictureAsBlob\">\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"form-control d-none\"\n            [attr.id]=\"name\"\n            [attr.accept]=\"acceptFormats\"\n            [multiple]=\"false\"\n            [name]=\"name\"\n            (change)=\"onPictureSelection($event)\"\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary my-2\"\n            [attr.id]=\"buildChildId('ChooseButton')\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            [attr.disabled]=\"loading ? 'disabled' : null\"\n        >\n            {{ 'foehn-picture-upload.choose-button-label' | fromDictionary }}\n        </button>\n    </div>\n\n    <div *ngIf=\"loading\">\n        {{ 'foehn-picture-upload.loading-label' | fromDictionary }}\n    </div>\n\n    <div *ngIf=\"!hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <image-cropper\n                [id]=\"buildChildId('Cropper')\"\n                (cropperReady)=\"loading = false\"\n                (imageCropped)=\"onImageCropped($event)\"\n                (loadImageFailed)=\"onPictureSelectionFailed()\"\n                [aspectRatio]=\"3 / 4\"\n                [imageChangedEvent]=\"pictureToCrop\"\n                [maintainAspectRatio]=\"true\"\n                [resizeToWidth]=\"resizeToWidth\"\n                [resizeToHeight]=\"resizeToHeight\"\n                [onlyScaleDown]=\"true\"\n                format=\"png\"\n            ></image-cropper>\n        </div>\n\n        <div *ngIf=\"!hasPicture\" class=\"col-md-4\">\n            <div class=\"row mb-3\">\n                <button\n                    *ngIf=\"croppedPictureAsBlob\"\n                    type=\"button\"\n                    class=\"btn btn-primary w-100\"\n                    [attr.id]=\"buildChildId('SaveButton')\"\n                    (click)=\"savePicture()\"\n                >\n                    {{\n                        'foehn-picture-upload.validate-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n            <div class=\"row\">\n                <button\n                    *ngIf=\"croppedPictureAsBlob\"\n                    type=\"button\"\n                    class=\"btn btn-secondary w-100\"\n                    [attr.id]=\"buildChildId('CancelButton')\"\n                    (click)=\"resetPictureSelection()\"\n                >\n                    {{\n                        'foehn-picture-upload.cancel-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n        </div>\n    </div>\n\n    <foehn-upload-progress-bar\n        [progressBarTriggerHtmlElement]=\"\n            inputElement?.nativeElement || fallBackTrigger\n        \"\n    ></foehn-upload-progress-bar>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: MultiUploadService }, { type: SdkDictionaryService }], propDecorators: { name: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], label: [{
+        }], ctorParameters: () => [{ type: MultiUploadService }, { type: SdkDictionaryService }], propDecorators: { key: [{
                 type: Input
             }], baseUrl: [{
                 type: Input