@dsivd/prestations-ng 15.4.2-BETA1 → 15.4.3-beta1

package/fesm2015/dsivd-prestations-ng.mjs

@@ -1537,7 +1537,7 @@ const DEFAULT_DICTIONARY = {
     'foehn-modal.btn-close.title': 'Fermer',
     'foehn-textarea.chars-remaining.plural': '{charCountLeft} caractères restants',
     'foehn-textarea.chars-remaining.singular': '{charCountLeft} caractère restant',
-    'foehn-textarea.chars-remaining.zero': 'Vous avez atteint le nombre de caractère autorisé!',
+    'foehn-textarea.chars-remaining.zero': 'Vous avez atteint le nombre de caractères autorisés',
     'foehn-textarea.chars-remaining.exceeded': 'Vous avez dépassé le nombre de caractères autorisés de {charCountLeft}'
 };
 
@@ -1572,10 +1572,16 @@ class SdkDictionaryService {
     constructor(httpClient, growlService) {
         this.httpClient = httpClient;
         this.growlService = growlService;
-        this.languageCodeSubject = new BehaviorSubject('fr');
-        this.dictionaryObservable = this.languageCodeSubject
-            .asObservable()
-            .pipe(mergeMap(languageCode => {
+        this.defaultLanguageCode = 'fr';
+        this.languageCodeSubject = new BehaviorSubject(this.getNavigatorLanguageCodeOrDefault());
+        this.availableLanguagesObservable = this.httpClient
+            .get(`${DICTIONARY_BASE_URL}/languages`)
+            .pipe(catchError((e) => {
+            console.error(e);
+            growlService.addWithType(GrowlType.DANGER, 'Impossible de récupérer les langues disponibles');
+            return of([]);
+        }), shareReplay(1));
+        this.dictionaryObservable = this.getCurrentLanguageCode().pipe(switchMap(languageCode => {
             const url = DICTIONARY_BASE_URL +
                 (!!languageCode ? `/${languageCode}` : '');
             return this.httpClient.get(url).pipe(catchError((e) => {
@@ -1586,13 +1592,6 @@ class SdkDictionaryService {
                 this.dictionary = dictionary;
             }));
         }), shareReplay(1));
-        this.availableLanguagesObservable = this.httpClient
-            .get(`${DICTIONARY_BASE_URL}/languages`)
-            .pipe(catchError((e) => {
-            console.error(e);
-            growlService.addWithType(GrowlType.DANGER, 'Impossible de récupérer les langues disponibles');
-            return of([]);
-        }), shareReplay(1));
     }
     getDictionary() {
         return this.dictionaryObservable;
@@ -1615,7 +1614,25 @@ class SdkDictionaryService {
         }
     }
     getCurrentLanguageCode() {
-        return this.languageCodeSubject.asObservable();
+        return combineLatest([
+            this.availableLanguagesObservable,
+            this.languageCodeSubject.asObservable()
+        ]).pipe(switchMap(([availableLanguageCodes, languageCode]) => {
+            const matchedLanguage = availableLanguageCodes.find(lc => lc.code === languageCode);
+            if (!!matchedLanguage && !!matchedLanguage.code) {
+                return of(matchedLanguage.code);
+            }
+            return of(this.defaultLanguageCode);
+        }), shareReplay(1));
+    }
+    setDefaultLanguageCode(code) {
+        this.defaultLanguageCode = code;
+        this.languageCodeSubject.next(this.getNavigatorLanguageCodeOrDefault());
+    }
+    getNavigatorLanguageCodeOrDefault() {
+        return !!navigator && !!navigator.language
+            ? navigator.language.split('-')[0]
+            : this.defaultLanguageCode;
     }
 }
 SdkDictionaryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SdkDictionaryService, deps: [{ token: i1.HttpClient }, { token: GrowlBrokerService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -3937,7 +3954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: SessionInfo }, { type: GesdemEventService }, { type: GesdemHandlerService }]; } });
 
-const supportedBrowsers = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(14[_\.]0|14[_\.]([1-9]|\d{2,})|14[_\.]4|14[_\.]([5-9]|\d{2,})|14[_\.]8|14[_\.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_\.]\d+|15[_\.]0|15[_\.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_\.]\d+)(?:[_\.]\d+)?)|(OperaMini(?:\/att)?\/?(\d+)?(?:\.\d+)?(?:\.\d+)?)|(Opera\/.+Opera Mobi.+Version\/(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+))|(Opera\/(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+).+Opera Mobi)|(Opera Mobi.+Opera(?:\/|\s+)(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+))|(SamsungBrowser\/(7\.2|7\.([3-9]|\d{2,})|7\.4|7\.([5-9]|\d{2,})|([8-9]|\d{2,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+))|(Edge\/(85(?:\.0)?|85(?:\.([1-9]|\d{2,}))?|(8[6-9]|9\d|\d{3,})(?:\.\d+)?))|(HeadlessChrome((?:\/85\.0\.\d+)?|(?:\/85\.([1-9]|\d{2,})\.\d+)?|(?:\/(8[6-9]|9\d|\d{3,})\.\d+\.\d+)?))|((Chromium|Chrome)\/(85\.0|85\.([1-9]|\d{2,})|(8[6-9]|9\d|\d{3,})\.\d+)(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)?.*Safari\/)|(Firefox\/(68\.0|68\.([1-9]|\d{2,})|(69|[7-9]\d|\d{3,})\.\d+|80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+)\.\d+)|(Firefox\/(68\.0|68\.([1-9]|\d{2,})|(69|[7-9]\d|\d{3,})\.\d+|80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+)(pre|[ab]\d+[a-z]*)?)/;
+const supportedBrowsers = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(12[_\.]2|12[_\.]([3-9]|\d{2,})|12[_\.]5|12[_\.]([6-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})[_\.]\d+|14[_\.]0|14[_\.]([1-9]|\d{2,})|14[_\.]4|14[_\.]([5-9]|\d{2,})|14[_\.]8|14[_\.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_\.]\d+|15[_\.]0|15[_\.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_\.]\d+|16[_\.]0|16[_\.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_\.]\d+)(?:[_\.]\d+)?)|(OperaMini(?:\/att)?\/?(\d+)?(?:\.\d+)?(?:\.\d+)?)|(Opera\/.+Opera Mobi.+Version\/(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+))|(Opera\/(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+).+Opera Mobi)|(Opera Mobi.+Opera(?:\/|\s+)(64\.0|64\.([1-9]|\d{2,})|(6[5-9]|[7-9]\d|\d{3,})\.\d+))|(SamsungBrowser\/(17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+))|(Edge\/(85(?:\.0)?|85(?:\.([1-9]|\d{2,}))?|(8[6-9]|9\d|\d{3,})(?:\.\d+)?))|(HeadlessChrome((?:\/85\.0\.\d+)?|(?:\/85\.([1-9]|\d{2,})\.\d+)?|(?:\/(8[6-9]|9\d|\d{3,})\.\d+\.\d+)?))|((Chromium|Chrome)\/(85\.0|85\.([1-9]|\d{2,})|(8[6-9]|9\d|\d{3,})\.\d+)(?:\.\d+)?)|(Version\/(14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)?.*Safari\/)|(Firefox\/(68\.0|68\.([1-9]|\d{2,})|(69|[7-9]\d|\d{3,})\.\d+|80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+)\.\d+)|(Firefox\/(68\.0|68\.([1-9]|\d{2,})|(69|[7-9]\d|\d{3,})\.\d+|80\.0|80\.([1-9]|\d{2,})|(8[1-9]|9\d|\d{3,})\.\d+)(pre|[ab]\d+[a-z]*)?)/;
 
 class FoehnPageModalService {
     constructor(applicationInfoService) {
@@ -7236,17 +7253,17 @@ class FoehnInputEmailComponent extends FoehnInputStringComponent {
         super();
         this.ngZone = ngZone;
         this.dictionaryService = dictionaryService;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.type = 'email';
-        this.autocomplete = 'email';
         this.helpModal = {
             title: this.dictionaryService.getKeySync('foehn-input-email.modal.title'),
             body: this.dictionaryService.getKeySync('foehn-input-email.modal.content'),
             modalSize: 'modal-xs'
         };
     }
+    ngOnInit() {
+        super.ngOnInit();
+        this.type = 'email';
+        this.autocomplete = 'email';
+    }
     onModelChange(value) {
         if (value === undefined || !!value) {
             this.updateNgModel(value);
@@ -9832,10 +9849,10 @@ class FoehnNavigationComponent {
     }
 }
 FoehnNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnNavigationComponent, deps: [{ token: FoehnNavigationService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-FoehnNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnNavigationComponent, selector: "foehn-navigation", inputs: { nextLabel: "nextLabel", prevLabel: "prevLabel", transmitLabel: "transmitLabel", continueLaterLabel: "continueLaterLabel", showContinueLaterButton: "showContinueLaterButton", showNextButton: "showNextButton" }, outputs: { onNext: "onNext", onPrevious: "onPrevious" }, ngImport: i0, template: "<gesdem-action-recovery-registration\n    *ngIf=\"showContinueLaterButton\"\n    [continueLaterLabel]=\"continueLaterLabel | fromDictionary\"\n></gesdem-action-recovery-registration>\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        <li\n            class=\"vd-pagination__item vd-pagination__item--previous\"\n            *ngIf=\"canShowPreviousButton()\"\n        >\n            <button\n                id=\"prevButton\"\n                type=\"button\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToPrevious()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    <foehn-icon-chevron-left\n                        class=\"mr-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-left>\n                    {{ prevLabel | fromDictionary }}\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getPreviousRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"!isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                id=\"nextButton\"\n                type=\"submit\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToNext()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    {{ nextLabel | fromDictionary }}\n                    <foehn-icon-chevron-right\n                        class=\"ml-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-right>\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getNextRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                *ngIf=\"isLastFormPage() && canShowNextButton()\"\n                type=\"submit\"\n                id=\"transmitButton\"\n                (click)=\"goToNext()\"\n                class=\"btn btn-success vd-btn-pagination-submit\"\n            >\n                {{ transmitLabel | fromDictionary }}\n            </button>\n        </li>\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"], components: [{ type: GesdemActionRecoveryRegistrationComponent, selector: "gesdem-action-recovery-registration", inputs: ["continueLaterLabel"] }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+FoehnNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnNavigationComponent, selector: "foehn-navigation", inputs: { nextLabel: "nextLabel", prevLabel: "prevLabel", transmitLabel: "transmitLabel", continueLaterLabel: "continueLaterLabel", showContinueLaterButton: "showContinueLaterButton", showNextButton: "showNextButton" }, outputs: { onNext: "onNext", onPrevious: "onPrevious" }, ngImport: i0, template: "<gesdem-action-recovery-registration\n    *ngIf=\"showContinueLaterButton\"\n    [continueLaterLabel]=\"continueLaterLabel | fromDictionary\"\n></gesdem-action-recovery-registration>\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        <li\n            class=\"vd-pagination__item vd-pagination__item--previous\"\n            *ngIf=\"canShowPreviousButton()\"\n        >\n            <button\n                id=\"prevButton\"\n                type=\"button\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToPrevious()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    <foehn-icon-chevron-left\n                        class=\"mr-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-left>\n                    {{ prevLabel | fromDictionary }}\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getPreviousRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"!isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                id=\"nextButton\"\n                type=\"submit\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToNext()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    {{ nextLabel | fromDictionary }}\n                    <foehn-icon-chevron-right\n                        class=\"ml-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-right>\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getNextRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                *ngIf=\"isLastFormPage() && canShowNextButton()\"\n                type=\"submit\"\n                id=\"transmitButton\"\n                (click)=\"goToNext()\"\n                class=\"btn btn-success vd-btn-pagination-submit\"\n            >\n                {{ transmitLabel | fromDictionary }}\n            </button>\n        </li>\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"], components: [{ type: GesdemActionRecoveryRegistrationComponent, selector: "gesdem-action-recovery-registration", inputs: ["continueLaterLabel"] }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'foehn-navigation', template: "<gesdem-action-recovery-registration\n    *ngIf=\"showContinueLaterButton\"\n    [continueLaterLabel]=\"continueLaterLabel | fromDictionary\"\n></gesdem-action-recovery-registration>\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        <li\n            class=\"vd-pagination__item vd-pagination__item--previous\"\n            *ngIf=\"canShowPreviousButton()\"\n        >\n            <button\n                id=\"prevButton\"\n                type=\"button\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToPrevious()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    <foehn-icon-chevron-left\n                        class=\"mr-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-left>\n                    {{ prevLabel | fromDictionary }}\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getPreviousRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"!isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                id=\"nextButton\"\n                type=\"submit\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToNext()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    {{ nextLabel | fromDictionary }}\n                    <foehn-icon-chevron-right\n                        class=\"ml-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-right>\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getNextRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                *ngIf=\"isLastFormPage() && canShowNextButton()\"\n                type=\"submit\"\n                id=\"transmitButton\"\n                (click)=\"goToNext()\"\n                class=\"btn btn-success vd-btn-pagination-submit\"\n            >\n                {{ transmitLabel | fromDictionary }}\n            </button>\n        </li>\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"] }]
+            args: [{ selector: 'foehn-navigation', template: "<gesdem-action-recovery-registration\n    *ngIf=\"showContinueLaterButton\"\n    [continueLaterLabel]=\"continueLaterLabel | fromDictionary\"\n></gesdem-action-recovery-registration>\n\n<nav class=\"vd-pagination\" id=\"foehn_navContainer\" aria-label=\"Pagination\">\n    <ul class=\"vd-pagination__list\">\n        <li\n            class=\"vd-pagination__item vd-pagination__item--previous\"\n            *ngIf=\"canShowPreviousButton()\"\n        >\n            <button\n                id=\"prevButton\"\n                type=\"button\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToPrevious()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    <foehn-icon-chevron-left\n                        class=\"mr-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-left>\n                    {{ prevLabel | fromDictionary }}\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getPreviousRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"!isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                id=\"nextButton\"\n                type=\"submit\"\n                class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                (click)=\"$event.preventDefault(); goToNext()\"\n            >\n                <span class=\"vd-pagination__title\">\n                    {{ nextLabel | fromDictionary }}\n                    <foehn-icon-chevron-right\n                        class=\"ml-1\"\n                        aria-hidden=\"true\"\n                    ></foehn-icon-chevron-right>\n                </span>\n                <span class=\"sr-only\" *ngIf=\"isLinearRouting()\">:</span>\n                <span class=\"vd-pagination__label\" *ngIf=\"isLinearRouting()\">\n                    {{ getNextRouteIndex() }}\n                    {{\n                        'foehn-navigation.route.index.separator'\n                            | fromDictionary\n                    }}\n                    {{ getTotalRoutesSize() }}\n                </span>\n            </button>\n        </li>\n        <li\n            class=\"vd-pagination__item vd-pagination__item--next\"\n            *ngIf=\"isLastFormPage() && canShowNextButton()\"\n        >\n            <button\n                *ngIf=\"isLastFormPage() && canShowNextButton()\"\n                type=\"submit\"\n                id=\"transmitButton\"\n                (click)=\"goToNext()\"\n                class=\"btn btn-success vd-btn-pagination-submit\"\n            >\n                {{ transmitLabel | fromDictionary }}\n            </button>\n        </li>\n    </ul>\n</nav>\n", styles: [".vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"] }]
         }], ctorParameters: function () { return [{ type: FoehnNavigationService }, { type: i1$1.ActivatedRoute }]; }, propDecorators: {
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         onNext: [{
@@ -10080,10 +10097,10 @@ class FoehnListComponent {
     }
 }
 FoehnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FoehnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnListComponent, selector: "foehn-list", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", fixedPageCount: "fixedPageCount", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange" }, queries: [{ propertyName: "templateVariable", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n        <ul class=\"list-unstyled\">\n            <li\n                *ngFor=\"\n                    let item of filteredList;\n                    let index = index;\n                    trackBy: trackByFn\n                \"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"templateVariable\"\n                    [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n                ></ng-template>\n            </li>\n        </ul>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"], components: [{ type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FoehnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnListComponent, selector: "foehn-list", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", fixedPageCount: "fixedPageCount", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange" }, queries: [{ propertyName: "templateVariable", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n        <ul class=\"list-unstyled\">\n            <li\n                *ngFor=\"\n                    let item of filteredList;\n                    let index = index;\n                    trackBy: trackByFn\n                \"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"templateVariable\"\n                    [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n                ></ng-template>\n            </li>\n        </ul>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"], components: [{ type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'foehn-list', template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n        <ul class=\"list-unstyled\">\n            <li\n                *ngFor=\"\n                    let item of filteredList;\n                    let index = index;\n                    trackBy: trackByFn\n                \"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"templateVariable\"\n                    [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n                ></ng-template>\n            </li>\n        </ul>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"] }]
+            args: [{ selector: 'foehn-list', template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">\n        <ul class=\"list-unstyled\">\n            <li\n                *ngFor=\"\n                    let item of filteredList;\n                    let index = index;\n                    trackBy: trackByFn\n                \"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"templateVariable\"\n                    [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n                ></ng-template>\n            </li>\n        </ul>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}\n"] }]
         }], propDecorators: {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         templateVariable: [{
@@ -10232,10 +10249,10 @@ class FoehnTableComponent {
     }
 }
 FoehnTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.iconGetter\">\n                            <span\n                                *ngIf=\"col.iconGetter(item) as iconDef\"\n                                class=\"cell-vertical-align-middle mr-2\"\n                            >\n                                <fa-icon\n                                    aria-hidden=\"true\"\n                                    [icon]=\"iconDef.icon\"\n                                    [title]=\"iconDef.label\"\n                                ></fa-icon>\n                                <span class=\"sr-only\">{{ iconDef.label }}</span>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.template\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"col.template\"\n                                [ngTemplateOutletContext]=\"{\n                                    item: item,\n                                    index: index\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.template\">\n                            <ng-container *ngIf=\"!col.routerLinkGetter\">\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                    class=\"cell-vertical-align-middle\"\n                                ></span>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                                <a\n                                    [routerLink]=\"col.routerLinkGetter(item)\"\n                                    queryParamsHandling=\"merge\"\n                                    class=\"cell-vertical-align-middle\"\n                                >\n                                    <span\n                                        [innerHTML]=\"col.valueGetter(item)\"\n                                    ></span>\n                                </a>\n                            </ng-container>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"], components: [{ type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.iconGetter\">\n                            <span\n                                *ngIf=\"col.iconGetter(item) as iconDef\"\n                                class=\"cell-vertical-align-middle mr-2\"\n                            >\n                                <fa-icon\n                                    aria-hidden=\"true\"\n                                    [icon]=\"iconDef.icon\"\n                                    [title]=\"iconDef.label\"\n                                ></fa-icon>\n                                <span class=\"sr-only\">{{ iconDef.label }}</span>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.template\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"col.template\"\n                                [ngTemplateOutletContext]=\"{\n                                    item: item,\n                                    index: index\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.template\">\n                            <ng-container *ngIf=\"!col.routerLinkGetter\">\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                    class=\"cell-vertical-align-middle\"\n                                ></span>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                                <a\n                                    [routerLink]=\"col.routerLinkGetter(item)\"\n                                    queryParamsHandling=\"merge\"\n                                    class=\"cell-vertical-align-middle\"\n                                >\n                                    <span\n                                        [innerHTML]=\"col.valueGetter(item)\"\n                                    ></span>\n                                </a>\n                            </ng-container>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"], components: [{ type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'foehn-table', template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.iconGetter\">\n                            <span\n                                *ngIf=\"col.iconGetter(item) as iconDef\"\n                                class=\"cell-vertical-align-middle mr-2\"\n                            >\n                                <fa-icon\n                                    aria-hidden=\"true\"\n                                    [icon]=\"iconDef.icon\"\n                                    [title]=\"iconDef.label\"\n                                ></fa-icon>\n                                <span class=\"sr-only\">{{ iconDef.label }}</span>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.template\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"col.template\"\n                                [ngTemplateOutletContext]=\"{\n                                    item: item,\n                                    index: index\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.template\">\n                            <ng-container *ngIf=\"!col.routerLinkGetter\">\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                    class=\"cell-vertical-align-middle\"\n                                ></span>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                                <a\n                                    [routerLink]=\"col.routerLinkGetter(item)\"\n                                    queryParamsHandling=\"merge\"\n                                    class=\"cell-vertical-align-middle\"\n                                >\n                                    <span\n                                        [innerHTML]=\"col.valueGetter(item)\"\n                                    ></span>\n                                </a>\n                            </ng-container>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
+            args: [{ selector: 'foehn-table', template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.iconGetter\">\n                            <span\n                                *ngIf=\"col.iconGetter(item) as iconDef\"\n                                class=\"cell-vertical-align-middle mr-2\"\n                            >\n                                <fa-icon\n                                    aria-hidden=\"true\"\n                                    [icon]=\"iconDef.icon\"\n                                    [title]=\"iconDef.label\"\n                                ></fa-icon>\n                                <span class=\"sr-only\">{{ iconDef.label }}</span>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.template\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"col.template\"\n                                [ngTemplateOutletContext]=\"{\n                                    item: item,\n                                    index: index\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.template\">\n                            <ng-container *ngIf=\"!col.routerLinkGetter\">\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                    class=\"cell-vertical-align-middle\"\n                                ></span>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                                <a\n                                    [routerLink]=\"col.routerLinkGetter(item)\"\n                                    queryParamsHandling=\"merge\"\n                                    class=\"cell-vertical-align-middle\"\n                                >\n                                    <span\n                                        [innerHTML]=\"col.valueGetter(item)\"\n                                    ></span>\n                                </a>\n                            </ng-container>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
         }], propDecorators: { itemsPerPage: [{
                 type: Input
             }], id: [{
@@ -11138,7 +11155,7 @@ FoehnMultiUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => FoehnMultiUploadComponent),
             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    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"reference\">\n        <div\n            *ngFor=\"let document of model; trackBy: trackByDocument\"\n            class=\"file file-uploaded\"\n        >\n            <a [href]=\"multiUploadService.getDownloadUrl(url, document)\">\n                {{ document.filename }}\n            </a>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(document.fileSize) }}\n                <abbr title=\"Megaoctet\">Mo</abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-uploaded\"\n                (click)=\"removeFile(document)\"\n            >\n                <foehn-icon-times\n                    title=\"Supprimer {{ document.filename }}\"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary uploaded-global-info\"\n            *ngIf=\"showGlobalInfos(model)\"\n            [innerHTML]=\"getGlobalInfos(model)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"!reference\">\n        <div\n            *ngFor=\"let pending of pendingFiles; trackBy: trackByPending\"\n            class=\"file file-pending\"\n        >\n            <span>{{ pending.name }}</span>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(pending.size) }}\n                <abbr title=\"Megaoctet\">Mo</abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-pending\"\n                (click)=\"removeFile(pending)\"\n            >\n                <foehn-icon-times\n                    title=\"Supprimer {{ pending.name }}\"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary pending-global-info\"\n            *ngIf=\"showGlobalInfos(pendingFiles)\"\n            [innerHTML]=\"getGlobalInfos(pendingFiles)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"reference\">\n        <div\n            *ngFor=\"let document of model; trackBy: trackByDocument\"\n            class=\"file file-uploaded\"\n        >\n            <!-- prettier-ignore -->\n            <a [href]=\"multiUploadService.getDownloadUrl(url, document)\">{{ document.filename }}</a>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(document.fileSize) }}\n                <abbr\n                    [title]=\"\n                        'foehn-uploader.abbr-megaoctet-title' | fromDictionary\n                    \"\n                >\n                    {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n                </abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-uploaded\"\n                (click)=\"removeFile(document)\"\n            >\n                <foehn-icon-times\n                    [title]=\"\n                        'foehn-uploader.delete-icon-title'\n                            | fromDictionary: { docName: document.filename }\n                    \"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary uploaded-global-info\"\n            *ngIf=\"showGlobalInfos(model)\"\n            [innerHTML]=\"getGlobalInfos(model)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"!reference\">\n        <div\n            *ngFor=\"let pending of pendingFiles; trackBy: trackByPending\"\n            class=\"file file-pending\"\n        >\n            <span>{{ pending.name }}</span>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(pending.size) }}\n                <abbr\n                    [title]=\"\n                        'foehn-uploader.abbr-megaoctet-title' | fromDictionary\n                    \"\n                >\n                    {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n                </abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-pending\"\n                (click)=\"removeFile(pending)\"\n            >\n                <foehn-icon-times\n                    [title]=\"\n                        'foehn-uploader.delete-icon-title'\n                            | fromDictionary: { docName: pending.name }\n                    \"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary pending-global-info\"\n            *ngIf=\"showGlobalInfos(pendingFiles)\"\n            [innerHTML]=\"getGlobalInfos(pendingFiles)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnMultiUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-multi-upload', providers: [
@@ -11147,7 +11164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FoehnMultiUploadComponent),
                             multi: true
                         }
-                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"reference\">\n        <div\n            *ngFor=\"let document of model; trackBy: trackByDocument\"\n            class=\"file file-uploaded\"\n        >\n            <a [href]=\"multiUploadService.getDownloadUrl(url, document)\">\n                {{ document.filename }}\n            </a>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(document.fileSize) }}\n                <abbr title=\"Megaoctet\">Mo</abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-uploaded\"\n                (click)=\"removeFile(document)\"\n            >\n                <foehn-icon-times\n                    title=\"Supprimer {{ document.filename }}\"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary uploaded-global-info\"\n            *ngIf=\"showGlobalInfos(model)\"\n            [innerHTML]=\"getGlobalInfos(model)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"!reference\">\n        <div\n            *ngFor=\"let pending of pendingFiles; trackBy: trackByPending\"\n            class=\"file file-pending\"\n        >\n            <span>{{ pending.name }}</span>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(pending.size) }}\n                <abbr title=\"Megaoctet\">Mo</abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-pending\"\n                (click)=\"removeFile(pending)\"\n            >\n                <foehn-icon-times\n                    title=\"Supprimer {{ pending.name }}\"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary pending-global-info\"\n            *ngIf=\"showGlobalInfos(pendingFiles)\"\n            [innerHTML]=\"getGlobalInfos(pendingFiles)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"] }]
+                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"reference\">\n        <div\n            *ngFor=\"let document of model; trackBy: trackByDocument\"\n            class=\"file file-uploaded\"\n        >\n            <!-- prettier-ignore -->\n            <a [href]=\"multiUploadService.getDownloadUrl(url, document)\">{{ document.filename }}</a>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(document.fileSize) }}\n                <abbr\n                    [title]=\"\n                        'foehn-uploader.abbr-megaoctet-title' | fromDictionary\n                    \"\n                >\n                    {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n                </abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-uploaded\"\n                (click)=\"removeFile(document)\"\n            >\n                <foehn-icon-times\n                    [title]=\"\n                        'foehn-uploader.delete-icon-title'\n                            | fromDictionary: { docName: document.filename }\n                    \"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary uploaded-global-info\"\n            *ngIf=\"showGlobalInfos(model)\"\n            [innerHTML]=\"getGlobalInfos(model)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"!reference\">\n        <div\n            *ngFor=\"let pending of pendingFiles; trackBy: trackByPending\"\n            class=\"file file-pending\"\n        >\n            <span>{{ pending.name }}</span>\n            <span class=\"ml-1 mr-1\">\n                ({{ toMegaOctets(pending.size) }}\n                <abbr\n                    [title]=\"\n                        'foehn-uploader.abbr-megaoctet-title' | fromDictionary\n                    \"\n                >\n                    {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n                </abbr>\n                )\n            </span>\n            <button\n                *ngIf=\"!readonly\"\n                type=\"button\"\n                class=\"btn icon-button delete-pending\"\n                (click)=\"removeFile(pending)\"\n            >\n                <foehn-icon-times\n                    [title]=\"\n                        'foehn-uploader.delete-icon-title'\n                            | fromDictionary: { docName: pending.name }\n                    \"\n                ></foehn-icon-times>\n            </button>\n        </div>\n\n        <small\n            class=\"form-text text-secondary pending-global-info\"\n            *ngIf=\"showGlobalInfos(pendingFiles)\"\n            [innerHTML]=\"getGlobalInfos(pendingFiles)\"\n        ></small>\n    </ng-container>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"] }]
         }], ctorParameters: function () { return [{ type: MultiUploadService }, { type: PendingUploadService }, { type: ApplicationInfoService }, { type: FoehnConfirmModalService }, { type: SdkDictionaryService }]; }, propDecorators: { url: [{
                 type: Input
             }], reference: [{
@@ -11368,7 +11385,7 @@ FoehnBoMultiUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => FoehnBoMultiUploadComponent),
             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    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div\n        *ngFor=\"let document of model; trackBy: trackByDocument\"\n        class=\"file file-uploaded\"\n    >\n        <a [href]=\"boMultiUploadService.getDownloadUrl(downloadUrl, document)\">\n            {{ document.filename }}\n        </a>\n        <span class=\"ml-1 mr-1\">\n            ({{ toMegaOctets(document.fileSize) }}\n            <abbr\n                [title]=\"'foehn-uploader.abbr-megaoctet-title' | fromDictionary\"\n            >\n                {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n            </abbr>\n            )\n        </span>\n        <button\n            *ngIf=\"!readonly\"\n            type=\"button\"\n            class=\"btn icon-button delete-uploaded\"\n            (click)=\"removeFile(document)\"\n        >\n            <foehn-icon-times\n                [title]=\"\n                    'foehn-uploader.delete-icon-title'\n                        | fromDictionary: { docName: document.filename }\n                \"\n            ></foehn-icon-times>\n        </button>\n    </div>\n\n    <small\n        class=\"form-text text-secondary uploaded-global-info\"\n        *ngIf=\"showGlobalInfos(model)\"\n        [innerHTML]=\"getGlobalInfos(model)\"\n    ></small>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div\n        *ngFor=\"let document of model; trackBy: trackByDocument\"\n        class=\"file file-uploaded\"\n    >\n        <!-- prettier-ignore -->\n        <a [href]=\"boMultiUploadService.getDownloadUrl(downloadUrl, document)\">{{ document.filename }}</a>\n        <span class=\"ml-1 mr-1\">\n            ({{ toMegaOctets(document.fileSize) }}\n            <abbr\n                [title]=\"'foehn-uploader.abbr-megaoctet-title' | fromDictionary\"\n            >\n                {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n            </abbr>\n            )\n        </span>\n        <button\n            *ngIf=\"!readonly\"\n            type=\"button\"\n            class=\"btn icon-button delete-uploaded\"\n            (click)=\"removeFile(document)\"\n        >\n            <foehn-icon-times\n                [title]=\"\n                    'foehn-uploader.delete-icon-title'\n                        | fromDictionary: { docName: document.filename }\n                \"\n            ></foehn-icon-times>\n        </button>\n    </div>\n\n    <small\n        class=\"form-text text-secondary uploaded-global-info\"\n        *ngIf=\"showGlobalInfos(model)\"\n        [innerHTML]=\"getGlobalInfos(model)\"\n    ></small>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnBoMultiUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-bo-multi-upload', providers: [
@@ -11377,7 +11394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FoehnBoMultiUploadComponent),
                             multi: true
                         }
-                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div\n        *ngFor=\"let document of model; trackBy: trackByDocument\"\n        class=\"file file-uploaded\"\n    >\n        <a [href]=\"boMultiUploadService.getDownloadUrl(downloadUrl, document)\">\n            {{ document.filename }}\n        </a>\n        <span class=\"ml-1 mr-1\">\n            ({{ toMegaOctets(document.fileSize) }}\n            <abbr\n                [title]=\"'foehn-uploader.abbr-megaoctet-title' | fromDictionary\"\n            >\n                {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n            </abbr>\n            )\n        </span>\n        <button\n            *ngIf=\"!readonly\"\n            type=\"button\"\n            class=\"btn icon-button delete-uploaded\"\n            (click)=\"removeFile(document)\"\n        >\n            <foehn-icon-times\n                [title]=\"\n                    'foehn-uploader.delete-icon-title'\n                        | fromDictionary: { docName: document.filename }\n                \"\n            ></foehn-icon-times>\n        </button>\n    </div>\n\n    <small\n        class=\"form-text text-secondary uploaded-global-info\"\n        *ngIf=\"showGlobalInfos(model)\"\n        [innerHTML]=\"getGlobalInfos(model)\"\n    ></small>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"] }]
+                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [class.drop-zone-highlight]=\"showDropZone\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n    (drop)=\"onDrop($event)\"\n    (dragenter)=\"onDragenter($event)\"\n    (dragleave)=\"onDragleave($event)\"\n    (dragover)=\"onDragover($event)\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : 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\n        [component]=\"this\"\n        [shouldErrorsBeLive]=\"hasLiveUploadErrors()\"\n    ></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    <!-- PRESTAKIT-309: Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div\n        *ngFor=\"let document of model; trackBy: trackByDocument\"\n        class=\"file file-uploaded\"\n    >\n        <!-- prettier-ignore -->\n        <a [href]=\"boMultiUploadService.getDownloadUrl(downloadUrl, document)\">{{ document.filename }}</a>\n        <span class=\"ml-1 mr-1\">\n            ({{ toMegaOctets(document.fileSize) }}\n            <abbr\n                [title]=\"'foehn-uploader.abbr-megaoctet-title' | fromDictionary\"\n            >\n                {{ 'foehn-uploader.abbr-megaoctet' | fromDictionary }}\n            </abbr>\n            )\n        </span>\n        <button\n            *ngIf=\"!readonly\"\n            type=\"button\"\n            class=\"btn icon-button delete-uploaded\"\n            (click)=\"removeFile(document)\"\n        >\n            <foehn-icon-times\n                [title]=\"\n                    'foehn-uploader.delete-icon-title'\n                        | fromDictionary: { docName: document.filename }\n                \"\n            ></foehn-icon-times>\n        </button>\n    </div>\n\n    <small\n        class=\"form-text text-secondary uploaded-global-info\"\n        *ngIf=\"showGlobalInfos(model)\"\n        [innerHTML]=\"getGlobalInfos(model)\"\n    ></small>\n\n    <ng-container *ngIf=\"canAddMoreFiles()\">\n        <input\n            class=\"form-control-file actual-input\"\n            type=\"file\"\n            [name]=\"name || label\"\n            [multiple]=\"multiple\"\n            [attr.accept]=\"\n                overrideAcceptedExtensions\n                    ? overrideAcceptedExtensions\n                    : uploaderHelper.accept\n                    ? uploaderHelper.accept\n                    : null\n            \"\n            (change)=\"onFileChange($event)\"\n            #inputFile\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [ngClass]=\"{ 'sr-only': !showUploadButton }\"\n            [attr.id]=\"buildChildId()\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            #entryComponent\n        >\n            {{ multiple ? chooseButtonLabelMultiple : chooseButtonLabel }}\n        </button>\n\n        <div\n            *ngIf=\"dragAndDrop\"\n            aria-hidden=\"true\"\n            class=\"dropfile\"\n            [class.dropfile-border-transparent]=\"showDropZone\"\n            (click)=\"inputFile.click()\"\n        >\n            {{ multiple ? dropZoneLabelMultiple : dropZoneLabel }}\n        </div>\n    </ng-container>\n</div>\n", styles: [".dropfile{width:300px;border:3px dashed #bbb;text-align:center;margin-top:10px;cursor:pointer;padding:15px 3px}.dropfile-border-transparent{border-color:var(--white)}.actual-input{display:none}.file-list{margin-top:20px}.icon-button{border:0;background-color:transparent}.icon-button:hover{cursor:pointer}:host ::ng-deep .svg-inline--fa{color:#000!important}.drop-zone-highlight{outline:3px dashed #bbb}\n"] }]
         }], ctorParameters: function () { return [{ type: BoMultiUploadService }, { type: ApplicationInfoService }, { type: FoehnConfirmModalService }, { type: SdkDictionaryService }]; }, propDecorators: { uploadUrl: [{
                 type: Input
             }], deleteUrl: [{
@@ -12481,10 +12498,10 @@ class FoehnAgendaNavigationComponent {
     }
 }
 FoehnAgendaNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnAgendaNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FoehnAgendaNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnAgendaNavigationComponent, selector: "foehn-agenda-navigation", inputs: { id: "id", calendar: "calendar", isSrOnly: "isSrOnly", minDate: "minDate", maxDate: "maxDate" }, outputs: { paginationChange: "paginationChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mb-3\" *ngIf=\"!!calendar\">\n    <div class=\"col-12\">\n        <nav\n            class=\"vd-pagination calendar-week-navigation\"\n            [attr.id]=\"id\"\n            [attr.aria-label]=\"\n                'foehn-agenda-navigation.nav.aria-label' | fromDictionary\n            \"\n        >\n            <ul class=\"vd-pagination__list\">\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!!calendar.previousWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonPreviousWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.previousWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <foehn-icon-chevron-left\n                                class=\"vd-pagination__title\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-left>\n                            <span\n                                class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                                aria-hidden=\"true\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationPreviousSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  previousWeek:\n                                                      calendar.previousWeek\n                                                          .label\n                                              }\n                                }}\n                            </span>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!calendar.previousWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationPreviousDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <foehn-icon-chevron-left\n                            class=\"vd-pagination__title\"\n                            [title]=\"\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-left>\n                        <span\n                            class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                        >\n                            {{\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                    </div>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item d-flex justify-content-center col-4\"\n                    *ngIf=\"!isSrOnly\"\n                >\n                    <foehn-date-picker-button\n                        [model]=\"currentDay\"\n                        [minDate]=\"minDate\"\n                        [maxDate]=\"maxDate\"\n                        [selectedDateSrOnlyLabelKey]=\"\n                            'foehn-agenda-navigation.date-picker-button.screen-reader.selected-date'\n                        \"\n                        (userInput)=\"datePickerUserInput($event)\"\n                    ></foehn-date-picker-button>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!!calendar.nextWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonNextWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.nextWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <span\n                                aria-hidden=\"true\"\n                                class=\"vd-pagination__title d-xs-none d-sm-block\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationNextSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  nextWeek:\n                                                      calendar.nextWeek.label\n                                              }\n                                }}\n                            </span>\n                            <foehn-icon-chevron-right\n                                class=\"vd-pagination__title ml-2\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-right>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!calendar.nextWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationNextDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <span class=\"vd-pagination__title d-xs-none d-sm-block\">\n                            {{\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                        <foehn-icon-chevron-right\n                            class=\"vd-pagination__title ml-2\"\n                            [title]=\"\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-right>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>\n", styles: [".calendar-week-navigation{margin-bottom:0}.calendar-week-navigation li.vd-pagination__item{margin-top:0}.calendar-week-navigation span.vd-pagination__title{font-size:1em;line-height:1.2em;color:var(--gray-dark)}.calendar-week-navigation foehn-icon-chevron-right.vd-pagination__title,.calendar-week-navigation foehn-icon-chevron-left.vd-pagination__title{font-size:1.5em;color:var(--gray-dark)}.calendar-week-navigation .link-week-disabled .vd-pagination__title{color:var(--vd-neutral-light);cursor:not-allowed}.calendar-week-navigation .vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.calendar-week-navigation .vd-pagination__link-reset:focus{background-color:var(--vd-focus)}nav ul{margin-bottom:0}\n"], components: [{ type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnDatePickerButtonComponent, selector: "foehn-date-picker-button", inputs: ["id", "name", "minYear", "maxYear", "minDate", "maxDate", "displaySelectedDate", "selectedDateSrOnlyLabelKey", "model"], outputs: ["modelChange", "userInput"] }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+FoehnAgendaNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnAgendaNavigationComponent, selector: "foehn-agenda-navigation", inputs: { id: "id", calendar: "calendar", isSrOnly: "isSrOnly", minDate: "minDate", maxDate: "maxDate" }, outputs: { paginationChange: "paginationChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mb-3\" *ngIf=\"!!calendar\">\n    <div class=\"col-12\">\n        <nav\n            class=\"vd-pagination calendar-week-navigation\"\n            [attr.id]=\"id\"\n            [attr.aria-label]=\"\n                'foehn-agenda-navigation.nav.aria-label' | fromDictionary\n            \"\n        >\n            <ul class=\"vd-pagination__list\">\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!!calendar.previousWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonPreviousWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.previousWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <foehn-icon-chevron-left\n                                class=\"vd-pagination__title\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-left>\n                            <span\n                                class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                                aria-hidden=\"true\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationPreviousSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  previousWeek:\n                                                      calendar.previousWeek\n                                                          .label\n                                              }\n                                }}\n                            </span>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!calendar.previousWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationPreviousDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <foehn-icon-chevron-left\n                            class=\"vd-pagination__title\"\n                            [title]=\"\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-left>\n                        <span\n                            class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                        >\n                            {{\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                    </div>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item d-flex justify-content-center col-4\"\n                    *ngIf=\"!isSrOnly\"\n                >\n                    <foehn-date-picker-button\n                        [model]=\"currentDay\"\n                        [minDate]=\"minDate\"\n                        [maxDate]=\"maxDate\"\n                        [selectedDateSrOnlyLabelKey]=\"\n                            'foehn-agenda-navigation.date-picker-button.screen-reader.selected-date'\n                        \"\n                        (userInput)=\"datePickerUserInput($event)\"\n                    ></foehn-date-picker-button>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!!calendar.nextWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonNextWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.nextWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <span\n                                aria-hidden=\"true\"\n                                class=\"vd-pagination__title d-xs-none d-sm-block\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationNextSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  nextWeek:\n                                                      calendar.nextWeek.label\n                                              }\n                                }}\n                            </span>\n                            <foehn-icon-chevron-right\n                                class=\"vd-pagination__title ml-2\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-right>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!calendar.nextWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationNextDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <span class=\"vd-pagination__title d-xs-none d-sm-block\">\n                            {{\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                        <foehn-icon-chevron-right\n                            class=\"vd-pagination__title ml-2\"\n                            [title]=\"\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-right>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>\n", styles: [".calendar-week-navigation{margin-bottom:0}.calendar-week-navigation li.vd-pagination__item{margin-top:0}.calendar-week-navigation span.vd-pagination__title{font-size:1em;line-height:1.2em;color:var(--gray-dark)}.calendar-week-navigation foehn-icon-chevron-right.vd-pagination__title,.calendar-week-navigation foehn-icon-chevron-left.vd-pagination__title{font-size:1.5em;color:var(--gray-dark)}.calendar-week-navigation .link-week-disabled .vd-pagination__title{color:var(--vd-neutral-light);cursor:not-allowed}.calendar-week-navigation .vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.calendar-week-navigation .vd-pagination__link-reset:focus{background-color:var(--vd-focus)}nav ul{margin-bottom:0}\n"], components: [{ type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnDatePickerButtonComponent, selector: "foehn-date-picker-button", inputs: ["id", "name", "minYear", "maxYear", "minDate", "maxDate", "displaySelectedDate", "selectedDateSrOnlyLabelKey", "model"], outputs: ["modelChange", "userInput"] }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnAgendaNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'foehn-agenda-navigation', template: "<div class=\"row mb-3\" *ngIf=\"!!calendar\">\n    <div class=\"col-12\">\n        <nav\n            class=\"vd-pagination calendar-week-navigation\"\n            [attr.id]=\"id\"\n            [attr.aria-label]=\"\n                'foehn-agenda-navigation.nav.aria-label' | fromDictionary\n            \"\n        >\n            <ul class=\"vd-pagination__list\">\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!!calendar.previousWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonPreviousWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.previousWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <foehn-icon-chevron-left\n                                class=\"vd-pagination__title\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-left>\n                            <span\n                                class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                                aria-hidden=\"true\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationPreviousSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  previousWeek:\n                                                      calendar.previousWeek\n                                                          .label\n                                              }\n                                }}\n                            </span>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!calendar.previousWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationPreviousDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <foehn-icon-chevron-left\n                            class=\"vd-pagination__title\"\n                            [title]=\"\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-left>\n                        <span\n                            class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                        >\n                            {{\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                    </div>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item d-flex justify-content-center col-4\"\n                    *ngIf=\"!isSrOnly\"\n                >\n                    <foehn-date-picker-button\n                        [model]=\"currentDay\"\n                        [minDate]=\"minDate\"\n                        [maxDate]=\"maxDate\"\n                        [selectedDateSrOnlyLabelKey]=\"\n                            'foehn-agenda-navigation.date-picker-button.screen-reader.selected-date'\n                        \"\n                        (userInput)=\"datePickerUserInput($event)\"\n                    ></foehn-date-picker-button>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!!calendar.nextWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonNextWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.nextWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <span\n                                aria-hidden=\"true\"\n                                class=\"vd-pagination__title d-xs-none d-sm-block\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationNextSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  nextWeek:\n                                                      calendar.nextWeek.label\n                                              }\n                                }}\n                            </span>\n                            <foehn-icon-chevron-right\n                                class=\"vd-pagination__title ml-2\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-right>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!calendar.nextWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationNextDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <span class=\"vd-pagination__title d-xs-none d-sm-block\">\n                            {{\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                        <foehn-icon-chevron-right\n                            class=\"vd-pagination__title ml-2\"\n                            [title]=\"\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-right>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>\n", styles: [".calendar-week-navigation{margin-bottom:0}.calendar-week-navigation li.vd-pagination__item{margin-top:0}.calendar-week-navigation span.vd-pagination__title{font-size:1em;line-height:1.2em;color:var(--gray-dark)}.calendar-week-navigation foehn-icon-chevron-right.vd-pagination__title,.calendar-week-navigation foehn-icon-chevron-left.vd-pagination__title{font-size:1.5em;color:var(--gray-dark)}.calendar-week-navigation .link-week-disabled .vd-pagination__title{color:var(--vd-neutral-light);cursor:not-allowed}.calendar-week-navigation .vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.calendar-week-navigation .vd-pagination__link-reset:focus{background-color:var(--vd-focus)}nav ul{margin-bottom:0}\n"] }]
+            args: [{ selector: 'foehn-agenda-navigation', template: "<div class=\"row mb-3\" *ngIf=\"!!calendar\">\n    <div class=\"col-12\">\n        <nav\n            class=\"vd-pagination calendar-week-navigation\"\n            [attr.id]=\"id\"\n            [attr.aria-label]=\"\n                'foehn-agenda-navigation.nav.aria-label' | fromDictionary\n            \"\n        >\n            <ul class=\"vd-pagination__list\">\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!!calendar.previousWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonPreviousWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.previousWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <foehn-icon-chevron-left\n                                class=\"vd-pagination__title\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-left>\n                            <span\n                                class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                                aria-hidden=\"true\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationPreviousSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.previous-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  previousWeek:\n                                                      calendar.previousWeek\n                                                          .label\n                                              }\n                                }}\n                            </span>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--previous col-4\"\n                    *ngIf=\"!calendar.previousWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationPreviousDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <foehn-icon-chevron-left\n                            class=\"vd-pagination__title\"\n                            [title]=\"\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-left>\n                        <span\n                            class=\"vd-pagination__title ml-2 d-xs-none d-sm-block\"\n                        >\n                            {{\n                                'foehn-agenda-navigation.previous-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                    </div>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item d-flex justify-content-center col-4\"\n                    *ngIf=\"!isSrOnly\"\n                >\n                    <foehn-date-picker-button\n                        [model]=\"currentDay\"\n                        [minDate]=\"minDate\"\n                        [maxDate]=\"maxDate\"\n                        [selectedDateSrOnlyLabelKey]=\"\n                            'foehn-agenda-navigation.date-picker-button.screen-reader.selected-date'\n                        \"\n                        (userInput)=\"datePickerUserInput($event)\"\n                    ></foehn-date-picker-button>\n                </li>\n\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!!calendar.nextWeek\"\n                >\n                    <button\n                        [id]=\"id + 'ButtonNextWeek'\"\n                        class=\"btn-link vd-pagination__link vd-pagination__link-reset\"\n                        (click)=\"paginate(calendar.nextWeek)\"\n                        type=\"button\"\n                    >\n                        <span class=\"d-flex align-items-center\">\n                            <span\n                                aria-hidden=\"true\"\n                                class=\"vd-pagination__title d-xs-none d-sm-block\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                }}\n                            </span>\n                            <span\n                                [id]=\"id + 'NavigationNextSrOnly'\"\n                                class=\"sr-only\"\n                            >\n                                {{\n                                    'foehn-agenda-navigation.next-week-sr-only'\n                                        | fromDictionary\n                                            : {\n                                                  nextWeek:\n                                                      calendar.nextWeek.label\n                                              }\n                                }}\n                            </span>\n                            <foehn-icon-chevron-right\n                                class=\"vd-pagination__title ml-2\"\n                                [title]=\"\n                                    'foehn-agenda-navigation.next-week'\n                                        | fromDictionary\n                                \"\n                                aria-hidden=\"true\"\n                            ></foehn-icon-chevron-right>\n                        </span>\n                    </button>\n                </li>\n                <li\n                    class=\"vd-pagination__item vd-pagination__item--next col-4 d-flex justify-content-end\"\n                    *ngIf=\"!calendar.nextWeek && !isSrOnly\"\n                >\n                    <div\n                        [id]=\"id + 'NavigationNextDisabled'\"\n                        class=\"d-flex align-items-center link-week-disabled\"\n                    >\n                        <span class=\"vd-pagination__title d-xs-none d-sm-block\">\n                            {{\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            }}\n                        </span>\n                        <foehn-icon-chevron-right\n                            class=\"vd-pagination__title ml-2\"\n                            [title]=\"\n                                'foehn-agenda-navigation.next-week'\n                                    | fromDictionary\n                            \"\n                        ></foehn-icon-chevron-right>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>\n", styles: [".calendar-week-navigation{margin-bottom:0}.calendar-week-navigation li.vd-pagination__item{margin-top:0}.calendar-week-navigation span.vd-pagination__title{font-size:1em;line-height:1.2em;color:var(--gray-dark)}.calendar-week-navigation foehn-icon-chevron-right.vd-pagination__title,.calendar-week-navigation foehn-icon-chevron-left.vd-pagination__title{font-size:1.5em;color:var(--gray-dark)}.calendar-week-navigation .link-week-disabled .vd-pagination__title{color:var(--vd-neutral-light);cursor:not-allowed}.calendar-week-navigation .vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.calendar-week-navigation .vd-pagination__link-reset:focus{background-color:var(--vd-focus)}nav ul{margin-bottom:0}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], calendar: [{