@dsivd/prestations-ng 15.2.0 → 15.2.3-beta1

package/fesm2015/dsivd-prestations-ng.mjs

@@ -10,7 +10,7 @@ import * as i3 from '@angular/common';
 import { AsyncPipe, CommonModule, registerLocaleData, DatePipe } from '@angular/common';
 import * as i4 from '@angular/forms';
 import { NgModel, NgForm, FormsModule } from '@angular/forms';
-import { faTimes, faInfoCircle, faExternalLinkAlt, faChevronUp, faCheckSquare, faCheck, faChevronDown, faLock, faMapMarkerAlt, faSearch, faUnlockAlt, faMinusCircle, faPlusCircle, faTrashAlt, faPlusSquare, faChevronLeft, faChevronRight, faEdit, faCommentDots } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faInfoCircle, faExternalLinkAlt, faLock, faChevronUp, faCheckSquare, faCheck, faChevronDown, faMapMarkerAlt, faSearch, faUnlockAlt, faMinusCircle, faPlusCircle, faTrashAlt, faPlusSquare, faChevronLeft, faChevronRight, faEdit, faCommentDots } from '@fortawesome/free-solid-svg-icons';
 import * as i1$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$3 from '@angular/platform-browser';
@@ -598,6 +598,7 @@ class GesdemHandlerService {
         url = `${url}/validated/${reference}`;
         return this.http.get(url).pipe(tap(this.emitResponse.bind(this)), map(() => true), catchError((response) => this.handleGesdemError(reference, response)));
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     retrieveActionStatut(reference) {
         let url = 'api';
         if (this.prefix) {
@@ -1415,7 +1416,7 @@ const DEFAULT_DICTIONARY = {
     'gesdem-confirmation.success-label': 'Demande transmise',
     'gesdem-confirmation.next-step.success-label': 'Réponse transmise',
     'gesdem-confirmation.abort-label': 'Demande abandonnée',
-    'gesdem-confirmation.reference-title.label': 'Votre numéro de référence',
+    'gesdem-confirmation.reference-title.label': 'Le numéro de référence de votre demande est',
     'gesdem-confirmation.mail-sent.label': 'Vous recevrez un email de confirmation dans quelques instants.',
     'gesdem-confirmation.download-pdf-recap-button': 'Télécharger la demande (pdf)',
     'gesdem-confirmation.exit-button': 'Terminer',
@@ -1455,9 +1456,11 @@ const DEFAULT_DICTIONARY = {
     'foehn-uploader.delete-icon-title': 'Supprimer {docName}',
     'use-login.text.decision-electronique-available': 'Pour obtenir la notification de la décision sous forme électronique ' +
         '(fichier au format pdf), vous devez demander la prestation en étant connecté au portail sécurisé.',
-    'use-login.text': "Cette prestation est aussi utilisable au travers de l'espace sécurisé qui vous " +
-        "permet de pré-remplir le formulaire et de suivre l'avancement de traitement de la demande.",
-    'use-login.button.text': 'Connectez-vous',
+    'use-login.text': 'Cette prestation est aussi utilisable <strong>en se connectant</strong> au portail sécurisé.</strong><br/>         ' +
+        '<i>Toutes les informations sur le portail sécurisé sont disponibles à cette adresse : ' +
+        '<a target="_blank" href="https://www.vd.ch/cyberadministration/">https://www.vd.ch/cyberadministration/</a>.</i>',
+    'use-login.button.text': 'Se connecter et continuer',
+    'use-login.continue-without-login.button.text': 'Continuer sans se connecter',
     'foehn-picture-upload.choose-button-label': 'Choisissez une photo',
     'foehn-picture-upload.loading-label': 'Chargement...',
     'foehn-picture-upload.loading-failure-label': 'Impossible de charger la photo sélectionnée',
@@ -1468,6 +1471,7 @@ const DEFAULT_DICTIONARY = {
     'foehn-table.totalElements': '{total} éléments trouvés',
     'foehn-table.totalElements.1': '1 élément trouvé',
     'foehn-table.totalElements.0': 'Aucun résultat',
+    'foehn-table.header.actions': 'Actions',
     'foehn-status-progress-bar.step1': 'Saisie',
     'foehn-status-progress-bar.step1.srOnly': 'Etape 1 sur 3, Saisie',
     'foehn-status-progress-bar.step2': 'Vérification',
@@ -4161,7 +4165,12 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         // This allows us to properly use an object as the model rather
         // than a string.
         const identityFn = this.getValueIdentityFunction();
-        return identityFn(value1) === identityFn(value2);
+        if (identityFn) {
+            return identityFn(value1) === identityFn(value2);
+        }
+        else {
+            return ObjectHelper.isEqual(value1, value2);
+        }
     }
     onElementsRetrieved() {
         if (!this.model && this.defaultElementValue) {
@@ -4228,7 +4237,7 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
     getValueIdentityFunction() {
         return typeof this.elementValueIdentity === 'function'
             ? this.elementValueIdentity
-            : (x) => x;
+            : null;
     }
     fetchData() {
         return this.httpClient.get(this.elementsUrl).pipe(map(r => {
@@ -4304,19 +4313,7 @@ class FoehnSelectComponent extends FoehnCheckableGroupComponent {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     compareFn(value1, value2) {
-        return ObjectHelper.isEqual(value1, value2);
-    }
-    /**
-     * We override areValuesEquals from FoehnCheckableGroupComponent so we keep only one way of comparing objects
-     * So there is no need to use 'elementValueIdentity' anymore
-     *
-     * @param value1 to be compared to
-     * @param value2 to be compared to
-     * @returns boolean
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    areValuesEquals(value1, value2) {
-        return ObjectHelper.isEqual(value1, value2);
+        return this.areValuesEquals(value1, value2);
     }
 }
 FoehnSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnSelectComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -4326,7 +4323,7 @@ FoehnSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => FoehnSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [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 [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }], 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    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\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 [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-select', providers: [
@@ -4335,7 +4332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                             useExisting: forwardRef(() => FoehnSelectComponent),
                             multi: true
                         }
-                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [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 [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n" }]
+                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [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 [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { multiple: [{
                 type: Input
             }] } });
@@ -4708,6 +4705,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
             args: [{ selector: 'foehn-user-connected-as', template: "<!-- prettier-ignore -->\n<p\n    *ngIf=\"(connectedAs | async) as userConnectedAs\"\n    class=\"h2\"\n>\n    La demande sera effectu\u00E9e pour <em>&laquo;{{ userConnectedAs }}&raquo;</em>\n</p>\n" }]
         }], ctorParameters: function () { return [{ type: SessionInfo }]; } });
 
+class FoehnIconLockComponent extends AbstractIconComponent {
+    constructor() {
+        super(...arguments);
+        this.iconName = faLock;
+        this.defaultTitle = 'Cadenas fermé';
+    }
+}
+FoehnIconLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnIconLockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FoehnIconLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FoehnIconLockComponent, selector: "foehn-icon-lock", usesInheritance: true, ngImport: i0, template: "<fa-icon\n    aria-hidden=\"true\"\n    [title]=\"title ? title : defaultTitle\"\n    [icon]=\"iconName\"\n></fa-icon>\n<span class=\"sr-only\">{{ title ? title : defaultTitle }}</span>\n", components: [{ 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnIconLockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'foehn-icon-lock', template: "<fa-icon\n    aria-hidden=\"true\"\n    [title]=\"title ? title : defaultTitle\"\n    [icon]=\"iconName\"\n></fa-icon>\n<span class=\"sr-only\">{{ title ? title : defaultTitle }}</span>\n" }]
+        }] });
+
 class FoehnIconChevronUpComponent extends AbstractIconComponent {
     constructor() {
         super(...arguments);
@@ -5051,6 +5062,7 @@ class FoehnPageComponent {
          * If set to 'false', hide the default Security Best Practice link.
          */
         this.showDefaultSecurityBestPracticeLink = true;
+        this.loginMessagesHidden = false;
         this.browserLinkTitlePrefix = 'Lien pour le téléchargement du navigateur internet';
         this.browserNotSupportedBypass = false;
         this.hasBlockingSupportAlert = supportAlertService.getHasAtLeastOneBlockingAlert();
@@ -5160,10 +5172,10 @@ class FoehnPageComponent {
     }
 }
 FoehnPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnPageComponent, deps: [{ token: i1$3.Title }, { token: FoehnPageService }, { token: SupportAlertService }, { token: FoehnNavigationService }, { token: ApplicationInfoService }, { token: GesdemEventService }, { token: BreadcrumbEventService }, { token: i1$1.Router }, { token: SessionInfo }, { token: FoehnPageModalService }, { token: SdkDictionaryService }, { token: SdkStatisticsService }], target: i0.ɵɵFactoryTarget.Component });
-FoehnPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FoehnPageComponent, selector: "foehn-page", inputs: { appTitle: "appTitle", footerLinks: "footerLinks", supportAlertEnabled: "supportAlertEnabled", supportAlertUrl: "supportAlertUrl", etapeId: "etapeId", userConnectedAsDisplayed: "userConnectedAsDisplayed", statusProgressBarHidden: "statusProgressBarHidden", confirmLeavingAlert: "confirmLeavingAlert", showDefaultContactFooterLink: "showDefaultContactFooterLink", showDefaultGuideFooterLink: "showDefaultGuideFooterLink", showDefaultTermOfUseLink: "showDefaultTermOfUseLink", showDefaultSecurityBestPracticeLink: "showDefaultSecurityBestPracticeLink" }, usesOnChanges: true, ngImport: i0, template: "<foehn-header id=\"foehn_header\" [title]=\"appTitle\"></foehn-header>\n<foehn-growl id=\"foehn_growl\"></foehn-growl>\n<div class=\"vd-bg-pattern-gray\">\n    <div class=\"container\">\n        <foehn-breadcrumb\n            [confirmLeavingAlert]=\"confirmLeavingAlert\"\n        ></foehn-breadcrumb>\n    </div>\n</div>\n<main id=\"main\">\n    <div class=\"vd-bg-pattern-gray\">\n        <div class=\"container\">\n            <!-- Fix annoying flickering when the page loads -->\n            <div class=\"h1 mt-0\" *ngIf=\"!pageTitle\">&nbsp;</div>\n            <h1\n                [tabIndex]=\"-1\"\n                class=\"mt-0\"\n                id=\"page-title\"\n                *ngIf=\"!!pageTitle\"\n                [innerHTML]=\"pageTitle\"\n            ></h1>\n        </div>\n    </div>\n\n    <foehn-status-progress-bar\n        [hidden]=\"statusProgressBarHidden\"\n    ></foehn-status-progress-bar>\n\n    <section\n        *ngIf=\"!isBrowserSupported\"\n        class=\"container alert alert-danger\"\n        id=\"browser_not_supported_block\"\n        role=\"alert\"\n    >\n        <p class=\"alert-heading\">\n            <strong>\n                Cette prestation n\u2019est pas compatible avec votre navigateur.\n            </strong>\n        </p>\n        <p class=\"mb-0\">\n            Nous vous invitons \u00E0 utiliser une version r\u00E9cente de\n            <ng-container *ngIf=\"!isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Edge'\"\n                    href=\"https://www.microsoft.com/fr-ch/windows/microsoft-edge\"\n                    target=\"_blank\"\n                >\n                    Edge\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <ng-container *ngIf=\"isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Safari'\"\n                    href=\"https://support.apple.com/downloads/safari\"\n                    target=\"_blank\"\n                >\n                    Safari\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Firefox'\"\n                href=\"https://www.mozilla.org/fr/firefox/\"\n                target=\"_blank\"\n            >\n                Firefox\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            ou\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Chrome'\"\n                href=\"https://www.google.com/intl/fr/chrome/\"\n                target=\"_blank\"\n            >\n                Chrome\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            .\n        </p>\n        <div class=\"row mt-3\">\n            <div class=\"col-md-12\">\n                <button\n                    id=\"browser_not_supported_bypass\"\n                    class=\"float-right btn btn-danger\"\n                    *ngIf=\"!browserNotSupportedBypass\"\n                    (click)=\"browserNotSupportedBypass = true\"\n                >\n                    Continuer avec ce navigateur\n                </button>\n            </div>\n        </div>\n    </section>\n\n    <sdk-support-alert-container\n        *ngIf=\"supportAlertEnabled\"\n        [etapeId]=\"etapeId\"\n        [supportAlertUrl]=\"supportAlertUrl\"\n    ></sdk-support-alert-container>\n    <ng-container\n        *ngIf=\"\n            !(hasBlockingSupportAlert | async) &&\n            (isBrowserSupported || browserNotSupportedBypass)\n        \"\n    >\n        <div class=\"container mt-5\" id=\"page_content\">\n            <foehn-user-connected-as\n                *ngIf=\"displayUserCategory | async\"\n            ></foehn-user-connected-as>\n            <ng-container\n                *ngIf=\"displayLoginMessages | async as displayLoginMessagesData\"\n            >\n                <div\n                    *ngIf=\"displayLoginMessagesData.displayShouldLoginMessage\"\n                    class=\"alert alert-info\"\n                    id=\"displayLoginMessage\"\n                >\n                    <p\n                        [innerHTML]=\"\n                            getFullLoginMessage(\n                                displayLoginMessagesData.decisionElectroniqueAvailable\n                            ) | async\n                        \"\n                    ></p>\n                    <div class=\"d-flex justify-content-start mr-2 mb-2 mt-2\">\n                        <a\n                            class=\"btn btn-primary\"\n                            [href]=\"getFullLoginUrl() | async\"\n                        >\n                            {{ 'use-login.button.text' | fromDictionary }}\n                        </a>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n        <ng-content></ng-content>\n    </ng-container>\n</main>\n<foehn-footer\n    id=\"foehn_footer\"\n    [links]=\"footerLinks\"\n    [showDefaultContactLink]=\"showDefaultContactFooterLink\"\n    [showDefaultGuideLink]=\"showDefaultGuideFooterLink\"\n    [showDefaultTermOfUseLink]=\"showDefaultTermOfUseLink\"\n    [showDefaultSecurityBestPracticeLink]=\"showDefaultSecurityBestPracticeLink\"\n></foehn-footer>\n<foehn-page-modal></foehn-page-modal>\n<foehn-confirm-modal></foehn-confirm-modal>\n", components: [{ type: FoehnHeaderComponent, selector: "foehn-header", inputs: ["userInfo", "title"] }, { type: FoehnGrowlComponent, selector: "foehn-growl" }, { type: FoehnBreadcrumbComponent, selector: "foehn-breadcrumb", inputs: ["breadcrumbItems", "currentNav", "confirmLeavingAlert"] }, { type: FoehnStatusProgressBarComponent, selector: "foehn-status-progress-bar", inputs: ["hidden"] }, { type: FoehnIconExternalLinkAltComponent, selector: "foehn-icon-external-link-alt" }, { type: SupportAlertContainerComponent, selector: "sdk-support-alert-container", inputs: ["etapeId", "supportAlertUrl"] }, { type: FoehnUserConnectedAsComponent, selector: "foehn-user-connected-as" }, { type: FoehnFooterComponent, selector: "foehn-footer", inputs: ["links", "showDefaultContactLink", "showDefaultGuideLink", "showDefaultTermOfUseLink", "showDefaultSecurityBestPracticeLink"] }, { type: FoehnPageModalComponent, selector: "foehn-page-modal" }, { type: FoehnConfirmModalComponent, selector: "foehn-confirm-modal" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe, "fromDictionary": SdkDictionaryPipe } });
+FoehnPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FoehnPageComponent, selector: "foehn-page", inputs: { appTitle: "appTitle", footerLinks: "footerLinks", supportAlertEnabled: "supportAlertEnabled", supportAlertUrl: "supportAlertUrl", etapeId: "etapeId", userConnectedAsDisplayed: "userConnectedAsDisplayed", statusProgressBarHidden: "statusProgressBarHidden", confirmLeavingAlert: "confirmLeavingAlert", showDefaultContactFooterLink: "showDefaultContactFooterLink", showDefaultGuideFooterLink: "showDefaultGuideFooterLink", showDefaultTermOfUseLink: "showDefaultTermOfUseLink", showDefaultSecurityBestPracticeLink: "showDefaultSecurityBestPracticeLink" }, usesOnChanges: true, ngImport: i0, template: "<foehn-header id=\"foehn_header\" [title]=\"appTitle\"></foehn-header>\n<foehn-growl id=\"foehn_growl\"></foehn-growl>\n<div class=\"vd-bg-pattern-gray\">\n    <div class=\"container\">\n        <foehn-breadcrumb\n            [confirmLeavingAlert]=\"confirmLeavingAlert\"\n        ></foehn-breadcrumb>\n    </div>\n</div>\n<main id=\"main\">\n    <div class=\"vd-bg-pattern-gray\">\n        <div class=\"container\">\n            <!-- Fix annoying flickering when the page loads -->\n            <div class=\"h1 mt-0\" *ngIf=\"!pageTitle\">&nbsp;</div>\n            <h1\n                [tabIndex]=\"-1\"\n                class=\"mt-0\"\n                id=\"page-title\"\n                *ngIf=\"!!pageTitle\"\n                [innerHTML]=\"pageTitle\"\n            ></h1>\n        </div>\n    </div>\n\n    <foehn-status-progress-bar\n        [hidden]=\"statusProgressBarHidden\"\n    ></foehn-status-progress-bar>\n\n    <section\n        *ngIf=\"!isBrowserSupported\"\n        class=\"container alert alert-danger\"\n        id=\"browser_not_supported_block\"\n        role=\"alert\"\n    >\n        <p class=\"alert-heading\">\n            <strong>\n                Cette prestation n\u2019est pas compatible avec votre navigateur.\n            </strong>\n        </p>\n        <p class=\"mb-0\">\n            Nous vous invitons \u00E0 utiliser une version r\u00E9cente de\n            <ng-container *ngIf=\"!isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Edge'\"\n                    href=\"https://www.microsoft.com/fr-ch/windows/microsoft-edge\"\n                    target=\"_blank\"\n                >\n                    Edge\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <ng-container *ngIf=\"isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Safari'\"\n                    href=\"https://support.apple.com/downloads/safari\"\n                    target=\"_blank\"\n                >\n                    Safari\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Firefox'\"\n                href=\"https://www.mozilla.org/fr/firefox/\"\n                target=\"_blank\"\n            >\n                Firefox\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            ou\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Chrome'\"\n                href=\"https://www.google.com/intl/fr/chrome/\"\n                target=\"_blank\"\n            >\n                Chrome\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            .\n        </p>\n        <div class=\"row mt-3\">\n            <div class=\"col-md-12\">\n                <button\n                    id=\"browser_not_supported_bypass\"\n                    class=\"float-right btn btn-danger\"\n                    *ngIf=\"!browserNotSupportedBypass\"\n                    (click)=\"browserNotSupportedBypass = true\"\n                >\n                    Continuer avec ce navigateur\n                </button>\n            </div>\n        </div>\n    </section>\n\n    <sdk-support-alert-container\n        *ngIf=\"supportAlertEnabled\"\n        [etapeId]=\"etapeId\"\n        [supportAlertUrl]=\"supportAlertUrl\"\n    ></sdk-support-alert-container>\n    <ng-container\n        *ngIf=\"\n            !(hasBlockingSupportAlert | async) &&\n            (isBrowserSupported || browserNotSupportedBypass)\n        \"\n    >\n        <div class=\"container mt-5\" id=\"page_content\">\n            <foehn-user-connected-as\n                *ngIf=\"displayUserCategory | async\"\n            ></foehn-user-connected-as>\n            <ng-container\n                *ngIf=\"displayLoginMessages | async as displayLoginMessagesData\"\n            >\n                <div\n                    class=\"container\"\n                    *ngIf=\"\n                        displayLoginMessagesData.displayShouldLoginMessage &&\n                        !loginMessagesHidden\n                    \"\n                >\n                    <div class=\"row\">\n                        <div\n                            class=\"alert alert-info col-md-8\"\n                            id=\"displayLoginMessage\"\n                        >\n                            <p\n                                [innerHTML]=\"\n                                    getFullLoginMessage(\n                                        displayLoginMessagesData.decisionElectroniqueAvailable\n                                    ) | async\n                                \"\n                            ></p>\n\n                            <div class=\"d-md-flex\">\n                                <div class=\"ml-md-auto mr-md-2 mb-2 mt-2\">\n                                    <button\n                                        id=\"continueWithoutLoginButton\"\n                                        class=\"btn btn-link\"\n                                        (click)=\"loginMessagesHidden = true\"\n                                    >\n                                        {{\n                                            'use-login.continue-without-login.button.text'\n                                                | fromDictionary\n                                        }}\n                                    </button>\n                                </div>\n                                <div class=\"ml-md-0 mr-md-2 mb-2 mt-2\">\n                                    <a\n                                        id=\"loginAndContinueButton\"\n                                        class=\"btn btn-primary\"\n                                        [href]=\"getFullLoginUrl() | async\"\n                                    >\n                                        {{\n                                            'use-login.button.text'\n                                                | fromDictionary\n                                        }}\n                                        <span class=\"ml-1\" aria-hidden=\"true\">\n                                            <foehn-icon-lock\n                                                [title]=\"\n                                                    'use-login.button.text'\n                                                        | fromDictionary\n                                                \"\n                                            ></foehn-icon-lock>\n                                        </span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n        <ng-content></ng-content>\n    </ng-container>\n</main>\n<foehn-footer\n    id=\"foehn_footer\"\n    [links]=\"footerLinks\"\n    [showDefaultContactLink]=\"showDefaultContactFooterLink\"\n    [showDefaultGuideLink]=\"showDefaultGuideFooterLink\"\n    [showDefaultTermOfUseLink]=\"showDefaultTermOfUseLink\"\n    [showDefaultSecurityBestPracticeLink]=\"showDefaultSecurityBestPracticeLink\"\n></foehn-footer>\n<foehn-page-modal></foehn-page-modal>\n<foehn-confirm-modal></foehn-confirm-modal>\n", components: [{ type: FoehnHeaderComponent, selector: "foehn-header", inputs: ["userInfo", "title"] }, { type: FoehnGrowlComponent, selector: "foehn-growl" }, { type: FoehnBreadcrumbComponent, selector: "foehn-breadcrumb", inputs: ["breadcrumbItems", "currentNav", "confirmLeavingAlert"] }, { type: FoehnStatusProgressBarComponent, selector: "foehn-status-progress-bar", inputs: ["hidden"] }, { type: FoehnIconExternalLinkAltComponent, selector: "foehn-icon-external-link-alt" }, { type: SupportAlertContainerComponent, selector: "sdk-support-alert-container", inputs: ["etapeId", "supportAlertUrl"] }, { type: FoehnUserConnectedAsComponent, selector: "foehn-user-connected-as" }, { type: FoehnIconLockComponent, selector: "foehn-icon-lock" }, { type: FoehnFooterComponent, selector: "foehn-footer", inputs: ["links", "showDefaultContactLink", "showDefaultGuideLink", "showDefaultTermOfUseLink", "showDefaultSecurityBestPracticeLink"] }, { type: FoehnPageModalComponent, selector: "foehn-page-modal" }, { type: FoehnConfirmModalComponent, selector: "foehn-confirm-modal" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe, "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'foehn-page', template: "<foehn-header id=\"foehn_header\" [title]=\"appTitle\"></foehn-header>\n<foehn-growl id=\"foehn_growl\"></foehn-growl>\n<div class=\"vd-bg-pattern-gray\">\n    <div class=\"container\">\n        <foehn-breadcrumb\n            [confirmLeavingAlert]=\"confirmLeavingAlert\"\n        ></foehn-breadcrumb>\n    </div>\n</div>\n<main id=\"main\">\n    <div class=\"vd-bg-pattern-gray\">\n        <div class=\"container\">\n            <!-- Fix annoying flickering when the page loads -->\n            <div class=\"h1 mt-0\" *ngIf=\"!pageTitle\">&nbsp;</div>\n            <h1\n                [tabIndex]=\"-1\"\n                class=\"mt-0\"\n                id=\"page-title\"\n                *ngIf=\"!!pageTitle\"\n                [innerHTML]=\"pageTitle\"\n            ></h1>\n        </div>\n    </div>\n\n    <foehn-status-progress-bar\n        [hidden]=\"statusProgressBarHidden\"\n    ></foehn-status-progress-bar>\n\n    <section\n        *ngIf=\"!isBrowserSupported\"\n        class=\"container alert alert-danger\"\n        id=\"browser_not_supported_block\"\n        role=\"alert\"\n    >\n        <p class=\"alert-heading\">\n            <strong>\n                Cette prestation n\u2019est pas compatible avec votre navigateur.\n            </strong>\n        </p>\n        <p class=\"mb-0\">\n            Nous vous invitons \u00E0 utiliser une version r\u00E9cente de\n            <ng-container *ngIf=\"!isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Edge'\"\n                    href=\"https://www.microsoft.com/fr-ch/windows/microsoft-edge\"\n                    target=\"_blank\"\n                >\n                    Edge\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <ng-container *ngIf=\"isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Safari'\"\n                    href=\"https://support.apple.com/downloads/safari\"\n                    target=\"_blank\"\n                >\n                    Safari\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Firefox'\"\n                href=\"https://www.mozilla.org/fr/firefox/\"\n                target=\"_blank\"\n            >\n                Firefox\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            ou\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Chrome'\"\n                href=\"https://www.google.com/intl/fr/chrome/\"\n                target=\"_blank\"\n            >\n                Chrome\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            .\n        </p>\n        <div class=\"row mt-3\">\n            <div class=\"col-md-12\">\n                <button\n                    id=\"browser_not_supported_bypass\"\n                    class=\"float-right btn btn-danger\"\n                    *ngIf=\"!browserNotSupportedBypass\"\n                    (click)=\"browserNotSupportedBypass = true\"\n                >\n                    Continuer avec ce navigateur\n                </button>\n            </div>\n        </div>\n    </section>\n\n    <sdk-support-alert-container\n        *ngIf=\"supportAlertEnabled\"\n        [etapeId]=\"etapeId\"\n        [supportAlertUrl]=\"supportAlertUrl\"\n    ></sdk-support-alert-container>\n    <ng-container\n        *ngIf=\"\n            !(hasBlockingSupportAlert | async) &&\n            (isBrowserSupported || browserNotSupportedBypass)\n        \"\n    >\n        <div class=\"container mt-5\" id=\"page_content\">\n            <foehn-user-connected-as\n                *ngIf=\"displayUserCategory | async\"\n            ></foehn-user-connected-as>\n            <ng-container\n                *ngIf=\"displayLoginMessages | async as displayLoginMessagesData\"\n            >\n                <div\n                    *ngIf=\"displayLoginMessagesData.displayShouldLoginMessage\"\n                    class=\"alert alert-info\"\n                    id=\"displayLoginMessage\"\n                >\n                    <p\n                        [innerHTML]=\"\n                            getFullLoginMessage(\n                                displayLoginMessagesData.decisionElectroniqueAvailable\n                            ) | async\n                        \"\n                    ></p>\n                    <div class=\"d-flex justify-content-start mr-2 mb-2 mt-2\">\n                        <a\n                            class=\"btn btn-primary\"\n                            [href]=\"getFullLoginUrl() | async\"\n                        >\n                            {{ 'use-login.button.text' | fromDictionary }}\n                        </a>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n        <ng-content></ng-content>\n    </ng-container>\n</main>\n<foehn-footer\n    id=\"foehn_footer\"\n    [links]=\"footerLinks\"\n    [showDefaultContactLink]=\"showDefaultContactFooterLink\"\n    [showDefaultGuideLink]=\"showDefaultGuideFooterLink\"\n    [showDefaultTermOfUseLink]=\"showDefaultTermOfUseLink\"\n    [showDefaultSecurityBestPracticeLink]=\"showDefaultSecurityBestPracticeLink\"\n></foehn-footer>\n<foehn-page-modal></foehn-page-modal>\n<foehn-confirm-modal></foehn-confirm-modal>\n" }]
+            args: [{ selector: 'foehn-page', template: "<foehn-header id=\"foehn_header\" [title]=\"appTitle\"></foehn-header>\n<foehn-growl id=\"foehn_growl\"></foehn-growl>\n<div class=\"vd-bg-pattern-gray\">\n    <div class=\"container\">\n        <foehn-breadcrumb\n            [confirmLeavingAlert]=\"confirmLeavingAlert\"\n        ></foehn-breadcrumb>\n    </div>\n</div>\n<main id=\"main\">\n    <div class=\"vd-bg-pattern-gray\">\n        <div class=\"container\">\n            <!-- Fix annoying flickering when the page loads -->\n            <div class=\"h1 mt-0\" *ngIf=\"!pageTitle\">&nbsp;</div>\n            <h1\n                [tabIndex]=\"-1\"\n                class=\"mt-0\"\n                id=\"page-title\"\n                *ngIf=\"!!pageTitle\"\n                [innerHTML]=\"pageTitle\"\n            ></h1>\n        </div>\n    </div>\n\n    <foehn-status-progress-bar\n        [hidden]=\"statusProgressBarHidden\"\n    ></foehn-status-progress-bar>\n\n    <section\n        *ngIf=\"!isBrowserSupported\"\n        class=\"container alert alert-danger\"\n        id=\"browser_not_supported_block\"\n        role=\"alert\"\n    >\n        <p class=\"alert-heading\">\n            <strong>\n                Cette prestation n\u2019est pas compatible avec votre navigateur.\n            </strong>\n        </p>\n        <p class=\"mb-0\">\n            Nous vous invitons \u00E0 utiliser une version r\u00E9cente de\n            <ng-container *ngIf=\"!isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Edge'\"\n                    href=\"https://www.microsoft.com/fr-ch/windows/microsoft-edge\"\n                    target=\"_blank\"\n                >\n                    Edge\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <ng-container *ngIf=\"isApplePlatform\">\n                <a\n                    [title]=\"browserLinkTitlePrefix + ' Safari'\"\n                    href=\"https://support.apple.com/downloads/safari\"\n                    target=\"_blank\"\n                >\n                    Safari\n                    <span class=\"sr-only\">(lien externe)</span>\n                    <span aria-hidden=\"true\">\n                        <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                    </span>\n                </a>\n                ,\n            </ng-container>\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Firefox'\"\n                href=\"https://www.mozilla.org/fr/firefox/\"\n                target=\"_blank\"\n            >\n                Firefox\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            ou\n            <a\n                [title]=\"browserLinkTitlePrefix + ' Chrome'\"\n                href=\"https://www.google.com/intl/fr/chrome/\"\n                target=\"_blank\"\n            >\n                Chrome\n                <span class=\"sr-only\">(lien externe)</span>\n                <span aria-hidden=\"true\">\n                    <foehn-icon-external-link-alt></foehn-icon-external-link-alt>\n                </span>\n            </a>\n            .\n        </p>\n        <div class=\"row mt-3\">\n            <div class=\"col-md-12\">\n                <button\n                    id=\"browser_not_supported_bypass\"\n                    class=\"float-right btn btn-danger\"\n                    *ngIf=\"!browserNotSupportedBypass\"\n                    (click)=\"browserNotSupportedBypass = true\"\n                >\n                    Continuer avec ce navigateur\n                </button>\n            </div>\n        </div>\n    </section>\n\n    <sdk-support-alert-container\n        *ngIf=\"supportAlertEnabled\"\n        [etapeId]=\"etapeId\"\n        [supportAlertUrl]=\"supportAlertUrl\"\n    ></sdk-support-alert-container>\n    <ng-container\n        *ngIf=\"\n            !(hasBlockingSupportAlert | async) &&\n            (isBrowserSupported || browserNotSupportedBypass)\n        \"\n    >\n        <div class=\"container mt-5\" id=\"page_content\">\n            <foehn-user-connected-as\n                *ngIf=\"displayUserCategory | async\"\n            ></foehn-user-connected-as>\n            <ng-container\n                *ngIf=\"displayLoginMessages | async as displayLoginMessagesData\"\n            >\n                <div\n                    class=\"container\"\n                    *ngIf=\"\n                        displayLoginMessagesData.displayShouldLoginMessage &&\n                        !loginMessagesHidden\n                    \"\n                >\n                    <div class=\"row\">\n                        <div\n                            class=\"alert alert-info col-md-8\"\n                            id=\"displayLoginMessage\"\n                        >\n                            <p\n                                [innerHTML]=\"\n                                    getFullLoginMessage(\n                                        displayLoginMessagesData.decisionElectroniqueAvailable\n                                    ) | async\n                                \"\n                            ></p>\n\n                            <div class=\"d-md-flex\">\n                                <div class=\"ml-md-auto mr-md-2 mb-2 mt-2\">\n                                    <button\n                                        id=\"continueWithoutLoginButton\"\n                                        class=\"btn btn-link\"\n                                        (click)=\"loginMessagesHidden = true\"\n                                    >\n                                        {{\n                                            'use-login.continue-without-login.button.text'\n                                                | fromDictionary\n                                        }}\n                                    </button>\n                                </div>\n                                <div class=\"ml-md-0 mr-md-2 mb-2 mt-2\">\n                                    <a\n                                        id=\"loginAndContinueButton\"\n                                        class=\"btn btn-primary\"\n                                        [href]=\"getFullLoginUrl() | async\"\n                                    >\n                                        {{\n                                            'use-login.button.text'\n                                                | fromDictionary\n                                        }}\n                                        <span class=\"ml-1\" aria-hidden=\"true\">\n                                            <foehn-icon-lock\n                                                [title]=\"\n                                                    'use-login.button.text'\n                                                        | fromDictionary\n                                                \"\n                                            ></foehn-icon-lock>\n                                        </span>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n        <ng-content></ng-content>\n    </ng-container>\n</main>\n<foehn-footer\n    id=\"foehn_footer\"\n    [links]=\"footerLinks\"\n    [showDefaultContactLink]=\"showDefaultContactFooterLink\"\n    [showDefaultGuideLink]=\"showDefaultGuideFooterLink\"\n    [showDefaultTermOfUseLink]=\"showDefaultTermOfUseLink\"\n    [showDefaultSecurityBestPracticeLink]=\"showDefaultSecurityBestPracticeLink\"\n></foehn-footer>\n<foehn-page-modal></foehn-page-modal>\n<foehn-confirm-modal></foehn-confirm-modal>\n" }]
         }], ctorParameters: function () { return [{ type: i1$3.Title }, { type: FoehnPageService }, { type: SupportAlertService }, { type: FoehnNavigationService }, { type: ApplicationInfoService }, { type: GesdemEventService }, { type: BreadcrumbEventService }, { type: i1$1.Router }, { type: SessionInfo }, { type: FoehnPageModalService }, { type: SdkDictionaryService }, { type: SdkStatisticsService }]; }, propDecorators: { appTitle: [{
                 type: Input
             }], footerLinks: [{
@@ -5266,20 +5278,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
             args: [{ selector: 'foehn-icon-chevron-down', template: "<fa-icon\n    aria-hidden=\"true\"\n    [title]=\"title ? title : defaultTitle\"\n    [icon]=\"iconName\"\n></fa-icon>\n<span class=\"sr-only\">{{ title ? title : defaultTitle }}</span>\n" }]
         }] });
 
-class FoehnIconLockComponent extends AbstractIconComponent {
-    constructor() {
-        super(...arguments);
-        this.iconName = faLock;
-        this.defaultTitle = 'Cadenas fermé';
-    }
-}
-FoehnIconLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnIconLockComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FoehnIconLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FoehnIconLockComponent, selector: "foehn-icon-lock", usesInheritance: true, ngImport: i0, template: "<fa-icon\n    aria-hidden=\"true\"\n    [title]=\"title ? title : defaultTitle\"\n    [icon]=\"iconName\"\n></fa-icon>\n<span class=\"sr-only\">{{ title ? title : defaultTitle }}</span>\n", components: [{ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnIconLockComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'foehn-icon-lock', template: "<fa-icon\n    aria-hidden=\"true\"\n    [title]=\"title ? title : defaultTitle\"\n    [icon]=\"iconName\"\n></fa-icon>\n<span class=\"sr-only\">{{ title ? title : defaultTitle }}</span>\n" }]
-        }] });
-
 class FoehnIconMapMarkerComponent extends AbstractIconComponent {
     constructor() {
         super(...arguments);
@@ -9866,11 +9864,13 @@ class FoehnTableComponent {
     }
 }
 FoehnTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", 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.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                    </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: 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: 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.5", type: FoehnTableComponent, selector: "foehn-table", inputs: { actionButtonsTemplate: "actionButtonsTemplate", 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                    <th *ngIf=\"!!actionButtonsTemplate\">\n                        <span\n                            [innerHTML]=\"\n                                'foehn-table.header.actions' | fromDictionary\n                            \"\n                        ></span>\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.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                    </td>\n                    <td *ngIf=\"!!actionButtonsTemplate\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"actionButtonsTemplate\"\n                            [ngTemplateOutletContext]=\"{\n                                item: item,\n                                index: index\n                            }\"\n                        ></ng-template>\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: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", 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.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                    </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"] }]
-        }], propDecorators: { itemsPerPage: [{
+            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                    <th *ngIf=\"!!actionButtonsTemplate\">\n                        <span\n                            [innerHTML]=\"\n                                'foehn-table.header.actions' | fromDictionary\n                            \"\n                        ></span>\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.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                    </td>\n                    <td *ngIf=\"!!actionButtonsTemplate\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"actionButtonsTemplate\"\n                            [ngTemplateOutletContext]=\"{\n                                item: item,\n                                index: index\n                            }\"\n                        ></ng-template>\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"] }]
+        }], propDecorators: { actionButtonsTemplate: [{
+                type: Input
+            }], itemsPerPage: [{
                 type: Input
             }], id: [{
                 type: Input