@dsivd/prestations-ng 14.5.21 → 14.5.23-beta2

package/fesm2015/dsivd-prestations-ng.js

@@ -1446,7 +1446,17 @@ const DEFAULT_DICTIONARY = {
     'foehn-status-progress-bar.step2': 'Vérification',
     'foehn-status-progress-bar.step2.srOnly': 'Etape 2 sur 3, Vérification',
     'foehn-status-progress-bar.step3': 'Confirmation',
-    'foehn-status-progress-bar.step3.srOnly': 'Etape 3 sur 3, Confirmation, demande transmise'
+    'foehn-status-progress-bar.step3.srOnly': 'Etape 3 sur 3, Confirmation, demande transmise',
+    'foehn-multiselect-autocomplete.selected.delete': 'Supprimer {elementLabel}',
+    'foehn-multiselect-autocomplete.selected.delete.aria-label': 'Supprimer {elementLabel} de la liste intitulée: {componentLabel}',
+    'foehn-multiselect-autocomplete.selected.screen-reader.default-value': 'Élément sélectionné par défaut non supprimable :',
+    'foehn-multiselect-autocomplete.selected.screen-reader.selected-value': 'Élément sélectionné:',
+    'foehn-multiselect-autocomplete.list-of-selected-items': 'Liste des éléments sélectionnés:',
+    'foehn-multiselect-autocomplete.list-of-selected-items.screen-reader.helper': 'En mode application, Utilisez les flèches ' +
+        'gauche et droite pour naviguer dans la liste.',
+    'foehn-multiselect-autocomplete.autocomplete.empty-message': 'Tous les éléments de la liste de proposition ont déjà été ajoutés.',
+    'foehn-multiselect-autocomplete.autocomplete.screen-reader.label': 'Sélectionner un élément dans la liste de recherche' +
+        ' ci-dessous pour l\'ajouter à votre sélection.'
 };
 
 const DICTIONARY_BASE_URL = 'api/dictionary';
@@ -3203,7 +3213,7 @@ FoehnInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => FoehnInputTextComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.id]=\"buildChildId() + 'Label'\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnInputTextComponent, decorators: [{
             type: Component,
             args: [{
@@ -3807,6 +3817,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
 class FormSelectOptionGroup {
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */
+class ObjectHelper {
+    /**
+     * Angular uses object identity to select option. It's possible for the identities of items to change while the data does not.
+     * This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run.
+     * Even if the data hasn't changed, the second response will produce objects with different identities.
+     * (see: https://angular.io/api/forms/SelectControlValueAccessor#customizing-option-selection)
+     *
+     * @param value1 as first value to compare to
+     * @param value2 as value to be compared to
+     * @returns boolean
+     */
+    static isEqual(value1, value2) {
+        if (value1 &&
+            value2 &&
+            typeof value1 === 'object' &&
+            typeof value2 === 'object') {
+            const matches = (obj, source) => Object.keys(source).length === Object.keys(obj).length &&
+                Object.keys(source).every(key => {
+                    if (obj.hasOwnProperty(key)) {
+                        if (obj[key] &&
+                            source[key] &&
+                            typeof obj[key] === 'object' &&
+                            typeof source[key] === 'object') {
+                            return matches(obj[key], source[key]);
+                        }
+                        return obj[key] === source[key];
+                    }
+                    return false;
+                });
+            return matches(value1, value2);
+        }
+        return value1 === value2;
+    }
+    static hasAnyValue(value) {
+        // do not simplify with an inline variable result due to compilation error
+        const result = Object.keys(value).some(key => {
+            if (value[key] && typeof value[key] === 'object') {
+                return ObjectHelper.hasAnyValue(value[key]);
+            }
+            return !!value[key];
+        });
+        return result;
+    }
+    static isEmpty(value) {
+        return !ObjectHelper.hasAnyValue(value);
+    }
+    /**
+     * Deep copy is a true copy for nested objects
+     * Often, shallow copy is good enough and you will not need a deep copy.
+     * A shallow copy means the first level is copied, deeper levels are referenced.
+     *
+     * Examples of shallow copy :
+     * const shallowClone = { ...nestedObject };
+     * const shallowClone = Object.assign({}, nestedObject);
+     *
+     * @param obj is the object to copied
+     * @returns obj
+     */
+    static deepCopy(obj) {
+        if (!obj || typeof obj !== 'object') {
+            return obj;
+        }
+        let copy;
+        if (obj instanceof Date) {
+            copy = new Date();
+            copy.setTime(obj.getTime());
+            return copy;
+        }
+        if (obj instanceof Array) {
+            copy = [];
+            for (let i = 0, len = obj.length; i < len; i++) {
+                copy[i] = ObjectHelper.deepCopy(obj[i]);
+            }
+            return copy;
+        }
+        if (obj instanceof Object) {
+            copy = {};
+            for (const attr in obj) {
+                if (obj.hasOwnProperty(attr)) {
+                    copy[attr] = ObjectHelper.deepCopy(obj[attr]);
+                }
+            }
+            return copy;
+        }
+        throw new Error('Unable to copy obj! Type not supported.');
+    }
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class FoehnCheckableGroupComponent extends FoehnInputComponent {
     constructor(ngZone) {
@@ -3824,6 +3923,7 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         this.elementLabel = 'label';
         this.elementDisabled = 'disabled';
         this.allElementDisabled = false;
+        this.elementsLoaded = new EventEmitter();
         this.multiple = false;
         this._onInitSubject = new Subject();
         this.httpClient = ServiceLocator.injector.get(HttpClient);
@@ -3873,6 +3973,7 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
     }
     setElements(elements) {
         this.elements = elements;
+        this.elementsLoaded.next(elements);
         this.onElementsRetrieved();
     }
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -4062,6 +4163,9 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
             // Hack to refresh the display value
             this.updateNgModel(this.model_);
         }
+        else if (change && !ObjectHelper.isEqual(change.currentValue, change.previousValue)) {
+            this.elementsLoaded.next(change.currentValue);
+        }
     }
     onElementsUrlChange(change) {
         if (change && !change.firstChange) {
@@ -4070,7 +4174,7 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
     }
 }
 FoehnCheckableGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnCheckableGroupComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-FoehnCheckableGroupComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: FoehnCheckableGroupComponent, inputs: { elements: "elements", elementsUrl: "elementsUrl", elementValue: "elementValue", elementLabel: "elementLabel", elementValueIdentity: "elementValueIdentity", elementDisabled: "elementDisabled", allElementDisabled: "allElementDisabled", elementGroup: "elementGroup", defaultElementValue: "defaultElementValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+FoehnCheckableGroupComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: FoehnCheckableGroupComponent, inputs: { elements: "elements", elementsUrl: "elementsUrl", elementValue: "elementValue", elementLabel: "elementLabel", elementValueIdentity: "elementValueIdentity", elementDisabled: "elementDisabled", allElementDisabled: "allElementDisabled", elementGroup: "elementGroup", defaultElementValue: "defaultElementValue" }, outputs: { elementsLoaded: "elementsLoaded" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnCheckableGroupComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { elements: [{
@@ -4089,99 +4193,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                 type: Input
             }], elementGroup: [{
                 type: Input
+            }], elementsLoaded: [{
+                type: Output
             }], defaultElementValue: [{
                 type: Input
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */
-class ObjectHelper {
-    /**
-     * Angular uses object identity to select option. It's possible for the identities of items to change while the data does not.
-     * This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run.
-     * Even if the data hasn't changed, the second response will produce objects with different identities.
-     * (see: https://angular.io/api/forms/SelectControlValueAccessor#customizing-option-selection)
-     *
-     * @param value1 as first value to compare to
-     * @param value2 as value to be compared to
-     * @returns boolean
-     */
-    static isEqual(value1, value2) {
-        if (value1 &&
-            value2 &&
-            typeof value1 === 'object' &&
-            typeof value2 === 'object') {
-            const matches = (obj, source) => Object.keys(source).length === Object.keys(obj).length &&
-                Object.keys(source).every(key => {
-                    if (obj.hasOwnProperty(key)) {
-                        if (obj[key] &&
-                            source[key] &&
-                            typeof obj[key] === 'object' &&
-                            typeof source[key] === 'object') {
-                            return matches(obj[key], source[key]);
-                        }
-                        return obj[key] === source[key];
-                    }
-                    return false;
-                });
-            return matches(value1, value2);
-        }
-        return value1 === value2;
-    }
-    static hasAnyValue(value) {
-        // do not simplify with an inline variable result due to compilation error
-        const result = Object.keys(value).some(key => {
-            if (value[key] && typeof value[key] === 'object') {
-                return ObjectHelper.hasAnyValue(value[key]);
-            }
-            return !!value[key];
-        });
-        return result;
-    }
-    static isEmpty(value) {
-        return !ObjectHelper.hasAnyValue(value);
-    }
-    /**
-     * Deep copy is a true copy for nested objects
-     * Often, shallow copy is good enough and you will not need a deep copy.
-     * A shallow copy means the first level is copied, deeper levels are referenced.
-     *
-     * Examples of shallow copy :
-     * const shallowClone = { ...nestedObject };
-     * const shallowClone = Object.assign({}, nestedObject);
-     *
-     * @param obj is the object to copied
-     * @returns obj
-     */
-    static deepCopy(obj) {
-        if (!obj || typeof obj !== 'object') {
-            return obj;
-        }
-        let copy;
-        if (obj instanceof Date) {
-            copy = new Date();
-            copy.setTime(obj.getTime());
-            return copy;
-        }
-        if (obj instanceof Array) {
-            copy = [];
-            for (let i = 0, len = obj.length; i < len; i++) {
-                copy[i] = ObjectHelper.deepCopy(obj[i]);
-            }
-            return copy;
-        }
-        if (obj instanceof Object) {
-            copy = {};
-            for (const attr in obj) {
-                if (obj.hasOwnProperty(attr)) {
-                    copy[attr] = ObjectHelper.deepCopy(obj[attr]);
-                }
-            }
-            return copy;
-        }
-        throw new Error('Unable to copy obj! Type not supported.');
-    }
-}
-
 class FoehnSelectComponent extends FoehnCheckableGroupComponent {
     constructor(zone) {
         super(zone);
@@ -6707,7 +6724,7 @@ FoehnInputNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => FoehnInputNumberComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.id]=\"buildChildId() + 'Label'\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnInputNumberComponent, decorators: [{
             type: Component,
             args: [{
@@ -6760,7 +6777,7 @@ FoehnInputEmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => FoehnInputEmailComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.id]=\"buildChildId() + 'Label'\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnInputEmailComponent, decorators: [{
             type: Component,
             args: [{
@@ -6807,7 +6824,7 @@ FoehnInputHiddenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => FoehnInputHiddenComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.id]=\"buildChildId() + 'Label'\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnInputHiddenComponent, decorators: [{
             type: Component,
             args: [{
@@ -6851,7 +6868,7 @@ FoehnInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => FoehnInputPasswordComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.id]=\"buildChildId() + 'Label'\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnInputPasswordComponent, decorators: [{
             type: Component,
             args: [{
@@ -7183,7 +7200,7 @@ FoehnInputPhoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => FoehnInputPhoneComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group clearable-input-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.id]=\"buildChildId() + 'Label'\"\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"label && type !== 'hidden'\"\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    <small\n        *ngIf=\"helpText && type !== 'hidden'\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        [class.clearable-input]=\"displayClearButton() | async\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.maxlength]=\"getMaxLength()\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.type]=\"type\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"min\"\n        [attr.max]=\"max\"\n        [attr.id]=\"buildChildId()\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (paste)=\"onPaste($event)\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        (input)=\"handleChange(entryComponent.value)\"\n        (keydown)=\"onKeydown($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        [id]=\"buildChildId() + 'ClearButton'\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"clearable-input-clear-button btn\"\n        (click)=\"onClear()\"\n    >\n        <foehn-icon-times\n            class=\"clearable-input-clear-button-icon\"\n            title=\"R\u00E9initialiser le champs\"\n        ></foehn-icon-times>\n    </button>\n</div>\n", styles: ["input::-ms-clear{display:none}input.clearable-input{padding-right:30px}.clearable-input-form-group{position:relative}.clearable-input-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.clearable-input-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .clearable-input-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .clearable-input-clear-button.btn:hover .svg-inline--fa{color:#000!important}.chars-remaining{color:#757575;font-size:.9rem}.char-count-exceeded{color:#c21f39}:host ::ng-deep .sameLine-list{display:inline;list-style:none;padding:0}:host ::ng-deep .sameLine-list li{display:inline;padding:3px}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnInputPhoneComponent, decorators: [{
             type: Component,
             args: [{
@@ -7800,6 +7817,315 @@ class Address {
 class FormSelectOption {
 }
 
+class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
+    constructor(ngZone, dictionaryService) {
+        super(ngZone);
+        this.dictionaryService = dictionaryService;
+        this.showEmptyListMessage = false;
+        this.keyboardNavigationAllowed = false;
+    }
+    set defaultElementValues(items) {
+        this.defaultElementValues_ = [...items];
+        if ((!this.model || !this.model.length) && items) {
+            this.updateNgModel(items);
+        }
+    }
+    get defaultElementValues() {
+        return this.defaultElementValues_;
+    }
+    set defaultElementValue(item) {
+        this.defaultElementValues = [item];
+    }
+    handleKeyboardDownEvent(event) {
+        if (this.keyboardNavigationAllowed) {
+            this.onKeyDownSelectedInner(event);
+        }
+    }
+    updateMultiselectAutocomplete() {
+        const validValue = this.getValidValue();
+        if (typeof validValue !== 'undefined') {
+            this.updateNgModel(validValue);
+        }
+    }
+    handleUserInput() {
+        const validValue = this.getValidValue();
+        if (typeof validValue !== 'undefined') {
+            this.handleChange(validValue);
+        }
+    }
+    addItem(item) {
+        if (!!item) {
+            if (!this.model) {
+                this.model = [];
+            }
+            const index = this.model.indexOf(item);
+            if (index === -1) {
+                this.model.push(item);
+                this.updateMultiselectAutocomplete();
+                this.handleUserInput();
+                this.manageSuggestionListAndFocusAfterAddingAnItem();
+            }
+        }
+    }
+    removeItem(item) {
+        const index = this.model.indexOf(item);
+        if (index > -1) {
+            this.model.splice(index, 1);
+            this.triggerUserInput(this.model);
+            this.manageSuggestionListAndFocusAfterRemovingAnItem();
+        }
+    }
+    trackByFn(index) {
+        return index;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
+    getLabel(value) {
+        const elem = this.findElementByModelItem(value);
+        return super.getLabel(elem);
+    }
+    getSelectedElementTabIndex(index) {
+        let firstIndexFocusable = 0;
+        if (!!this.defaultElementValues) {
+            firstIndexFocusable = this.model.findIndex((selected) => !this.defaultElementValues.includes(selected));
+        }
+        if (index !== firstIndexFocusable) {
+            return -1;
+        }
+        return 0;
+    }
+    isSelectedItemFocusable(index) {
+        return !this.disabled && !!this.defaultElementValues && this.defaultElementValues.includes(this.model[index]);
+    }
+    canBeDeleted(index) {
+        return !this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]);
+    }
+    onSelectedItemsFocusin() {
+        this.keyboardNavigationAllowed = true;
+        this.currentFocusedElem = document.activeElement;
+    }
+    onSelectedItemsFocusout() {
+        this.keyboardNavigationAllowed = false;
+    }
+    onAutocompleteElementsLoaded(elements) {
+        // Need to wait for childView to be loaded
+        setTimeout(() => {
+            if (!!this.autocompleteComponent) {
+                this.autocompleteComponent.elements = this.filterAutocompleteElements(elements);
+                if (!this.disabled && !this.autocompleteComponent.elements.length) {
+                    this.showAlertMessageAndHideAutocomplete();
+                }
+            }
+        });
+    }
+    getDeleteButtonAriaLabel(element) {
+        return `${this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.selected.delete.aria-label', { elementLabel: this.getLabel(element), componentLabel: this.label })}`;
+    }
+    getSelectedListAriaLabel() {
+        return `${this.label}: ${this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.list-of-selected-items')}`;
+    }
+    findElementByModelItem(item) {
+        if (!!this.elements && !!this.elements.length) {
+            const itemValue = typeof item === 'string' ? item : this.getValue(item);
+            const elem = this.elements.find((element) => this.getValue(element) === itemValue);
+            if (!!elem) {
+                return elem;
+            }
+        }
+        return item;
+    }
+    getValidValue() {
+        if (!this.model || !this.model.length) {
+            if (this.model_ !== undefined) {
+                return null;
+            }
+            return undefined;
+        }
+        return this.model;
+    }
+    getFirstDeleteButtonToFocus() {
+        const closeButtonsElemRefArray = [...this.closeButtonsElemRef.toArray()];
+        if (!!closeButtonsElemRefArray.length) {
+            return closeButtonsElemRefArray[0].nativeElement;
+        }
+        return null;
+    }
+    navigateSelectedList(offset) {
+        if (!this.disabled) {
+            const closeButtonsElemRefArray = this.getDefaultSelectedElements().concat([...this.closeButtonsElemRef.toArray()]);
+            if (!!closeButtonsElemRefArray.length) {
+                const focusIndex = closeButtonsElemRefArray.findIndex(value => this.currentFocusedElem === value.nativeElement);
+                let newIndex = focusIndex + offset;
+                if (newIndex >= closeButtonsElemRefArray.length) {
+                    newIndex = 0;
+                }
+                if (newIndex < 0) {
+                    newIndex = closeButtonsElemRefArray.length - 1;
+                }
+                const elemRef = closeButtonsElemRefArray[newIndex];
+                if (!!elemRef) {
+                    elemRef.nativeElement.focus();
+                }
+            }
+        }
+    }
+    getDefaultSelectedElements() {
+        return [...this.selectedElemRef.toArray()].filter(value => value.nativeElement.getAttribute('is-default') === 'true');
+    }
+    onKeyDownSelectedInner(keyEvent) {
+        // IE doesn't support keyEvent.code, and has different values
+        // in keyEvent.key (Down instead of ArrowDown for instance), hence the multi-support.
+        const ie11CompatibleCode = keyEvent.code || keyEvent.key;
+        switch (ie11CompatibleCode) {
+            case 'Right':
+            case 'ArrowRight':
+                this.navigateSelectedList(1);
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                this.navigateSelectedList(-1);
+                break;
+            default:
+                return true;
+        }
+        keyEvent.preventDefault();
+        keyEvent.stopPropagation();
+        return false;
+    }
+    filterAutocompleteElements(elements) {
+        const filteredElements = ObjectHelper.deepCopy(elements);
+        if (!!this.model && !!this.model.length) {
+            this.model.forEach((selected) => {
+                for (const [index, value] of filteredElements.entries()) {
+                    const elem = this.findElementByModelItem(selected);
+                    if (ObjectHelper.isEqual(elem, value)) {
+                        filteredElements.splice(index, 1);
+                        break;
+                    }
+                }
+            });
+        }
+        return filteredElements;
+    }
+    manageSuggestionListAndFocusAfterAddingAnItem() {
+        // Highlight selected suggestion in input so screen reader knows there is still some text in input
+        this.autocompleteComponent.inputElement.nativeElement.select();
+        // Remove selected item from autocomplete suggestion list
+        this.autocompleteComponent.elements = this.filterAutocompleteElements(this.elements);
+        // Check if we still have suggestions to display
+        if (!this.autocompleteComponent.elements.length) {
+            this.showAlertMessageAndHideAutocomplete();
+            // Need setTimeout to ensure alert message is on the DOM and can be focusable
+            setTimeout(() => {
+                const alertMessage = this.alertMessageContainer.nativeElement.querySelector('p');
+                if (alertMessage) {
+                    alertMessage.focus();
+                }
+            });
+        }
+    }
+    manageSuggestionListAndFocusAfterRemovingAnItem() {
+        // Hide message saying no more suggestions to display
+        this.showEmptyListMessage = false;
+        // Manually show autocomplete because there is at least one suggestions to display
+        this.autocompleteComponent.inputElement.nativeElement.hidden = false;
+        // Add back selected item to autocomplete suggestion list
+        this.autocompleteComponent.elements = this.filterAutocompleteElements(this.elements);
+        // When deleting a selected item, check were to set focus back
+        this.closeButtonsElemRef.changes.pipe(first()).subscribe(() => {
+            const buttonToFocus = this.getFirstDeleteButtonToFocus();
+            if (!!buttonToFocus) {
+                buttonToFocus.focus();
+            }
+            else {
+                this.autocompleteComponent.setFocusOnInput();
+                this.autocompleteComponent.onInputFocus();
+            }
+        });
+    }
+    showAlertMessageAndHideAutocomplete() {
+        // Show a message to user indicating there is no more suggestions to display
+        this.showEmptyListMessage = true;
+        // Manually reset and hide autocomplete because there is no more suggestions to display
+        this.autocompleteInputValue = null;
+        this.autocompleteComponent.inputElement.nativeElement.hidden = true;
+    }
+}
+FoehnMultiselectAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, deps: [{ token: i0.NgZone }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Component });
+FoehnMultiselectAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnMultiselectAutocompleteComponent, selector: "foehn-multiselect-autocomplete", inputs: { defaultElementValues: "defaultElementValues", defaultElementValue: "defaultElementValue" }, host: { listeners: { "keydown": "handleKeyboardDownEvent($event)" } }, providers: [
+        {
+            provide: FoehnInputComponent,
+            useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "closeButtonsElemRef", predicate: ["closeButtonsElemRef"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<foehn-autocomplete\n    #autocompleteComponent\n    [name]=\"name\"\n    [label]=\"label\"\n    [elements]=\"elements\"\n    [elementsUrl]=\"elementsUrl\"\n    [elementValue]=\"elementValue\"\n    [elementLabel]=\"elementLabel\"\n    [elementValueIdentity]=\"elementValueIdentity\"\n    [elementDisabled]=\"elementDisabled\"\n    [allElementDisabled]=\"allElementDisabled\"\n    [elementGroup]=\"elementGroup\"\n    [allowCustomValue]=\"false\"\n    [searchValueMinCharsCount]=\"searchValueMinCharsCount\"\n    [customValueModelGenerator]=\"customValueModelGenerator\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (userInput)=\"addItem($event)\"\n    [(model)]=\"autocompleteInputValue\"\n    (elementsLoaded)=\"onAutocompleteElementsLoaded($event)\"\n>\n    <div\n        [attr.role]=\"!disabled ? 'application' : null\"\n        (focusin)=\"onSelectedItemsFocusin()\"\n        (focusout)=\"onSelectedItemsFocusout()\"\n        [tabindex]=\"(!!model && !!model.length) ? 0 : -1\"\n        class=\"selected-list-container\"\n    >\n        <div class=\"sr-only\">\n            {{'foehn-multiselect-autocomplete.list-of-selected-items.screen-reader.helper' | fromDictionary}}\n        </div>\n        <ul\n            [id]=\"buildChildId() + 'SelectedItemsList'\"\n            class=\"list-unstyled mb-1 d-flex align-content-stretch flex-wrap\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            aria-orientation=\"horizontal\"\n            [attr.aria-label]=\"getSelectedListAriaLabel()\"\n        >\n            <li\n                *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n                class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                [tabindex]=\"isSelectedItemFocusable(index) ? 0 : -1\"\n                [attr.is-default]=\"!canBeDeleted(index)\"\n                #selectedElemRef\n            >\n                <ng-container *ngIf=\"!disabled\">\n                    <span *ngIf=\"!canBeDeleted(index)\" class=\"sr-only\">{{ 'foehn-multiselect-autocomplete.selected.screen-reader.default-value' | fromDictionary }}</span>\n                    <span *ngIf=\"canBeDeleted(index)\" class=\"sr-only\">{{ 'foehn-multiselect-autocomplete.selected.screen-reader.selected-value' | fromDictionary }}</span>\n                </ng-container>\n\n                <span [innerHtml]=\"getLabel(element)\"></span>\n\n                <button\n                    *ngIf=\"!disabled && canBeDeleted(index)\"\n                    type=\"button\"\n                    class=\"btn btn-link ml-2\"\n                    [tabindex]=\"getSelectedElementTabIndex(index)\"\n                    (click)=\"removeItem(element)\"\n                    [attr.aria-label]=\"getDeleteButtonAriaLabel(element)\"\n                    #closeButtonsElemRef\n                >\n                    <foehn-icon-times\n                        title=\"{{ 'foehn-multiselect-autocomplete.selected.delete' | fromDictionary: {elementLabel: getLabel(element)} }}\"\n                    ></foehn-icon-times>\n                </button>\n            </li>\n        </ul>\n    </div>\n\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText ? helpText : 'foehn-multiselect-autocomplete.autocomplete.screen-reader.label' | fromDictionary\"\n    ></small>\n\n    <div\n        [id]=\"buildChildId() + 'AlertMessageContainer'\"\n        role=\"status\"\n        tabindex=\"-1\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info\"\n            tabindex=\"0\"\n        >{{'foehn-multiselect-autocomplete.autocomplete.empty-message' | fromDictionary}}</p>\n    </div>\n</foehn-autocomplete>\n", styles: [".selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container li:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}.selected-list-container:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}\n"], components: [{ type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'foehn-multiselect-autocomplete',
+                    templateUrl: './foehn-multiselect-autocomplete.component.html',
+                    styleUrls: ['./foehn-multiselect-autocomplete.component.css'],
+                    providers: [
+                        {
+                            provide: FoehnInputComponent,
+                            useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: SdkDictionaryService }]; }, propDecorators: { autocompleteComponent: [{
+                type: ViewChild,
+                args: ['autocompleteComponent']
+            }], alertMessageContainer: [{
+                type: ViewChild,
+                args: ['alertMessageContainer']
+            }], closeButtonsElemRef: [{
+                type: ViewChildren,
+                args: ['closeButtonsElemRef']
+            }], selectedElemRef: [{
+                type: ViewChildren,
+                args: ['selectedElemRef']
+            }], defaultElementValues: [{
+                type: Input
+            }], defaultElementValue: [{
+                type: Input
+            }], handleKeyboardDownEvent: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class FoehnMultiselectAutocompleteModule {
+}
+FoehnMultiselectAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FoehnMultiselectAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteModule, declarations: [FoehnMultiselectAutocompleteComponent], imports: [FoehnAutocompleteModule,
+        SdkDictionaryModule,
+        FoehnValidationAlertsModule,
+        CommonModule,
+        FoehnIconsModule,
+        FormsModule], exports: [FoehnMultiselectAutocompleteComponent] });
+FoehnMultiselectAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteModule, imports: [[
+            FoehnAutocompleteModule,
+            SdkDictionaryModule,
+            FoehnValidationAlertsModule,
+            CommonModule,
+            FoehnIconsModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FoehnAutocompleteModule,
+                        SdkDictionaryModule,
+                        FoehnValidationAlertsModule,
+                        CommonModule,
+                        FoehnIconsModule,
+                        FormsModule
+                    ],
+                    declarations: [FoehnMultiselectAutocompleteComponent],
+                    exports: [FoehnMultiselectAutocompleteComponent]
+                }]
+        }] });
+
 class FoehnInputNav13Component extends FoehnInputStringComponent {
     constructor() {
         super(...arguments);
@@ -8892,7 +9218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
                 }]
         }] });
 
-const RECAPTCHA_URL = 'https://www.google.com/recaptcha/api.js?onload=reCaptchaLoad&render=explicit';
+const RECAPTCHA_URL = 'https://www.recaptcha.net/recaptcha/api.js?onload=reCaptchaLoad&render=explicit';
 const SCRIPT_ID = 'prestations-ng-captcha-script';
 /**
  * Integration with Google Recaptcha.
@@ -10115,7 +10441,7 @@ FoehnPictureUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => FoehnPictureUploadComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.id]=\"buildId('Container')\"\n    [class.has-danger]=\"hasErrors()\"\n    [class.vd-form-group-danger]=\"hasErrors()\"\n    class=\"form-group clearable-input-form-group\"\n    tabindex=\"-1\"\n>\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    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div *ngIf=\"hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <img\n                [id]=\"buildChildId('Picture')\"\n                [attr.alt]=\"label\"\n                [src]=\"getDownloadUrl()\"\n            />\n        </div>\n        <div class=\"col-md-4\">\n            <button\n                type=\"button\"\n                class=\"btn btn-danger w-100\"\n                [attr.id]=\"buildChildId('DeleteButton')\"\n                (click)=\"deleteFile()\"\n            >\n                {{\n                    'foehn-picture-upload.delete-picture-label' | fromDictionary\n                }}\n            </button>\n        </div>\n    </div>\n\n    <div *ngIf=\"!hasPicture && !croppedPictureAsBase64Url\">\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"form-control-file d-none\"\n            [attr.id]=\"name\"\n            [attr.accept]=\"'.jpeg,.jpg,.png'\"\n            [multiple]=\"false\"\n            [name]=\"name\"\n            (change)=\"onPictureSelection($event)\"\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary my-2\"\n            [attr.id]=\"buildChildId('ChooseButton')\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            [disabled]=\"loading\"\n        >\n            {{ 'foehn-picture-upload.choose-button-label' | fromDictionary }}\n        </button>\n    </div>\n\n    <div *ngIf=\"loading\">\n        {{ 'foehn-picture-upload.loading-label' | fromDictionary }}\n    </div>\n\n    <div *ngIf=\"!hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <image-cropper\n                [id]=\"buildChildId('Cropper')\"\n                (cropperReady)=\"loading = false\"\n                (imageCropped)=\"onImageCropped($event)\"\n                (loadImageFailed)=\"onPictureSelectionFailed()\"\n                [aspectRatio]=\"3 / 4\"\n                [imageChangedEvent]=\"pictureToCrop\"\n                [maintainAspectRatio]=\"true\"\n                [resizeToWidth]=\"resizeToWidth\"\n                [resizeToHeight]=\"resizeToHeight\"\n                [onlyScaleDown]=\"true\"\n                format=\"png\"\n            ></image-cropper>\n        </div>\n\n        <div *ngIf=\"!hasPicture\" class=\"col-md-4\">\n            <div class=\"row mb-3\">\n                <button\n                    *ngIf=\"croppedPictureAsBase64Url\"\n                    type=\"button\"\n                    class=\"btn btn-primary w-100\"\n                    [attr.id]=\"buildChildId('SaveButton')\"\n                    (click)=\"savePicture()\"\n                >\n                    {{\n                        'foehn-picture-upload.validate-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n            <div class=\"row\">\n                <button\n                    *ngIf=\"croppedPictureAsBase64Url\"\n                    type=\"button\"\n                    class=\"btn btn-secondary w-100\"\n                    [attr.id]=\"buildChildId('CancelButton')\"\n                    (click)=\"resetPictureSelection()\"\n                >\n                    {{\n                        'foehn-picture-upload.cancel-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: i5.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.id]=\"buildId('Container')\"\n    [class.has-danger]=\"hasErrors()\"\n    [class.vd-form-group-danger]=\"hasErrors()\"\n    class=\"form-group clearable-input-form-group\"\n    tabindex=\"-1\"\n>\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    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <input type=\"hidden\" [name]=\"name || label\" [ngModel]=\"model\" />\n\n    <ng-content></ng-content>\n\n    <div *ngIf=\"hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <img\n                [id]=\"buildChildId('Picture')\"\n                [attr.alt]=\"label\"\n                [src]=\"getDownloadUrl()\"\n            />\n        </div>\n        <div class=\"col-md-4\">\n            <button\n                type=\"button\"\n                class=\"btn btn-danger w-100\"\n                [attr.id]=\"buildChildId('DeleteButton')\"\n                (click)=\"deleteFile()\"\n            >\n                {{\n                    'foehn-picture-upload.delete-picture-label' | fromDictionary\n                }}\n            </button>\n        </div>\n    </div>\n\n    <div *ngIf=\"!hasPicture && !croppedPictureAsBase64Url\">\n        <input\n            #inputFile\n            type=\"file\"\n            class=\"form-control-file d-none\"\n            [attr.id]=\"name\"\n            [attr.accept]=\"'.jpeg,.jpg,.png'\"\n            [multiple]=\"false\"\n            [name]=\"name\"\n            (change)=\"onPictureSelection($event)\"\n        />\n\n        <button\n            type=\"button\"\n            class=\"btn btn-primary my-2\"\n            [attr.id]=\"buildChildId('ChooseButton')\"\n            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n            [attr.aria-describedby]=\"buildId('ErrorsContainer')\"\n            (click)=\"inputFile.click()\"\n            [attr.disabled]=\"loading ? 'disabled' : null\"\n        >\n            {{ 'foehn-picture-upload.choose-button-label' | fromDictionary }}\n        </button>\n    </div>\n\n    <div *ngIf=\"loading\">\n        {{ 'foehn-picture-upload.loading-label' | fromDictionary }}\n    </div>\n\n    <div *ngIf=\"!hasPicture\" class=\"row\">\n        <div class=\"col-md-6\">\n            <image-cropper\n                [id]=\"buildChildId('Cropper')\"\n                (cropperReady)=\"loading = false\"\n                (imageCropped)=\"onImageCropped($event)\"\n                (loadImageFailed)=\"onPictureSelectionFailed()\"\n                [aspectRatio]=\"3 / 4\"\n                [imageChangedEvent]=\"pictureToCrop\"\n                [maintainAspectRatio]=\"true\"\n                [resizeToWidth]=\"resizeToWidth\"\n                [resizeToHeight]=\"resizeToHeight\"\n                [onlyScaleDown]=\"true\"\n                format=\"png\"\n            ></image-cropper>\n        </div>\n\n        <div *ngIf=\"!hasPicture\" class=\"col-md-4\">\n            <div class=\"row mb-3\">\n                <button\n                    *ngIf=\"croppedPictureAsBase64Url\"\n                    type=\"button\"\n                    class=\"btn btn-primary w-100\"\n                    [attr.id]=\"buildChildId('SaveButton')\"\n                    (click)=\"savePicture()\"\n                >\n                    {{\n                        'foehn-picture-upload.validate-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n            <div class=\"row\">\n                <button\n                    *ngIf=\"croppedPictureAsBase64Url\"\n                    type=\"button\"\n                    class=\"btn btn-secondary w-100\"\n                    [attr.id]=\"buildChildId('CancelButton')\"\n                    (click)=\"resetPictureSelection()\"\n                >\n                    {{\n                        'foehn-picture-upload.cancel-selection-label'\n                            | fromDictionary\n                    }}\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: i5.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnPictureUploadComponent, decorators: [{
             type: Component,
             args: [{
@@ -11633,7 +11959,7 @@ class FoehnDatePickerComponent {
     }
 }
 FoehnDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnDatePickerComponent, deps: [{ token: SdkDictionaryService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FoehnDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnDatePickerComponent, selector: "foehn-date-picker", inputs: { minYear: "minYear", maxYear: "maxYear", datepickerTriggerHtmlElement: "datepickerTriggerHtmlElement", closeable: "closeable", isDatepickerVisible: "isDatepickerVisible", model: "model" }, outputs: { modelChange: "modelChange", userInput: "userInput", isDatepickerVisibleChange: "isDatepickerVisibleChange" }, host: { listeners: { "keyup": "handleKeyboardUpEvent($event)", "keydown": "handleKeyboardDownEvent($event)" } }, viewQueries: [{ propertyName: "daysButtonsElemRef", predicate: ["dayButtonElemRef"], descendants: true }], ngImport: i0, template: "<div\n    id=\"datepicker_wrapper\"\n    *ngIf=\"isDatepickerVisible\"\n    [cdkTrapFocus]=\"!!datepickerTriggerHtmlElement\"\n    tabindex=\"-1\"\n    role=\"application\"\n    [attr.aria-label]=\"\n        'foehn-date-picker.container.aria-label' | fromDictionary\n    \"\n>\n    <button\n        *ngIf=\"closeable\"\n        (click)=\"isDatepickerVisible = false\"\n        type=\"button\"\n        class=\"btn close\"\n        [attr.aria-label]=\"\n            'foehn-date-picker.close-button.aria-label' | fromDictionary\n        \"\n        id=\"closeButton\"\n    >\n        <span aria-hidden=\"true\">&times;</span>\n    </button>\n    <div id=\"datepicker_header\" class=\"d-flex justify-content-between\">\n        <button\n            id=\"previous-month\"\n            class=\"btn btn-link\"\n            (click)=\"previousMonth()\"\n        >\n            <foehn-icon-chevron-left\n                [title]=\"\n                    'foehn-date-picker.previous-month-button.title'\n                        | fromDictionary\n                \"\n            ></foehn-icon-chevron-left>\n        </button>\n        <ng-container *ngIf=\"currentMonthYear | async as monthYear\">\n            <span id=\"month-year-label\" aria-live=\"polite\" class=\"sr-only\">\n                {{\n                    'foehn-date-picker.screen-reader.actual-month-displayed'\n                        | fromDictionary\n                }}\n                {{ getMonthAsReadable(monthYear.month) }} {{ monthYear.year }}\n            </span>\n            <foehn-select\n                id=\"month-input\"\n                class=\"align-self-center\"\n                [label]=\"\n                    'foehn-date-picker.screen-reader.month-input.label'\n                        | fromDictionary\n                \"\n                [isLabelSrOnly]=\"true\"\n                [elements]=\"monthListItem\"\n                [model]=\"monthYear.month\"\n                [required]=\"false\"\n                (userInput)=\"userInputMonth($event)\"\n            ></foehn-select>\n            <foehn-select\n                id=\"year-input\"\n                class=\"align-self-center\"\n                [label]=\"\n                    'foehn-date-picker.screen-reader.year-input.label'\n                        | fromDictionary\n                \"\n                [isLabelSrOnly]=\"true\"\n                [elements]=\"yearListItem\"\n                [model]=\"monthYear.year\"\n                [required]=\"false\"\n                (userInput)=\"userInputYear($event)\"\n            ></foehn-select>\n        </ng-container>\n        <button id=\"next-month\" class=\"btn btn-link\" (click)=\"nextMonth()\">\n            <foehn-icon-chevron-right\n                [title]=\"\n                    'foehn-date-picker.next-month-button.title' | fromDictionary\n                \"\n            ></foehn-icon-chevron-right>\n        </button>\n    </div>\n    <table\n        id=\"datepicker_table\"\n        role=\"grid\"\n        (focusin)=\"onDaysFocusin()\"\n        (focusout)=\"onDaysFocusout()\"\n    >\n        <thead role=\"presentation\" aria-hidden=\"true\">\n            <tr role=\"row\">\n                <th\n                    scope=\"col\"\n                    role=\"columnheader\"\n                    *ngFor=\"let weekday of weekDays\"\n                >\n                    <foehn-abbr\n                        [text]=\"weekday.substr(0, 2)\"\n                        [title]=\"weekday\"\n                    ></foehn-abbr>\n                </th>\n            </tr>\n        </thead>\n        <tbody role=\"presentation\">\n            <tr role=\"row\" *ngFor=\"let week of weeks; let indexRow = index\">\n                <td\n                    role=\"gridcell\"\n                    *ngFor=\"let dayOfWeek of week; let indexColumn = index\"\n                >\n                    <button\n                        class=\"btn w-100\"\n                        #dayButtonElemRef\n                        [id]=\"'day_' + indexRow + '_' + indexColumn\"\n                        [tabindex]=\"getDayTabIndex(dayOfWeek)\"\n                        [class.btn-info]=\"!isToday(dayOfWeek.date)\"\n                        [class.btn-secondary]=\"isToday(dayOfWeek.date)\"\n                        [class.btn-danger]=\"isSelected(dayOfWeek.date)\"\n                        [attr.aria-label]=\"\n                            weekDays[indexColumn] +\n                            ' ' +\n                            dayOfWeek.dateAsReadable\n                        \"\n                        [attr.data-is-today]=\"isToday(dayOfWeek.date)\"\n                        [attr.data-is-selected]=\"isSelected(dayOfWeek.date)\"\n                        [attr.data-row-index]=\"indexRow\"\n                        [attr.data-column-index]=\"indexColumn\"\n                        [attr.day-number]=\"dayOfWeek.dayOfMonth\"\n                        [disabled]=\"!dayOfWeek.isCurrentMonth\"\n                        (click)=\"handleUserInput(dayOfWeek.date)\"\n                    >\n                        {{ dayOfWeek.dayOfMonth }}\n                    </button>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [":host ::ng-deep .btn-link .svg-inline--fa{color:#000!important}#datepicker_header{margin-bottom:10px}#datepicker_wrapper{max-width:245px;padding:5px;border:1px solid #dfdfdf;background-color:#fff}#datepicker_wrapper .h4{margin-bottom:0}#datepicker_wrapper thead th{text-align:center;width:15%}#datepicker_wrapper .btn{padding:2px 4px}#datepicker_wrapper button.close{position:absolute;right:-14px;top:-18px;background-color:#fff;border:1px solid #dfdfdf;border-radius:50%;width:30px;height:30px;opacity:1}#datepicker_wrapper #month-input{width:50%;margin-right:5px}:host ::ng-deep foehn-select select.form-control{padding:0;margin:0;height:30px}:host ::ng-deep foehn-select .form-group{margin:0}\n"], components: [{ type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnSelectComponent, selector: "foehn-select", inputs: ["multiple"] }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { type: FoehnAbbrComponent, selector: "foehn-abbr", inputs: ["title", "text"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+FoehnDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnDatePickerComponent, selector: "foehn-date-picker", inputs: { minYear: "minYear", maxYear: "maxYear", datepickerTriggerHtmlElement: "datepickerTriggerHtmlElement", closeable: "closeable", isDatepickerVisible: "isDatepickerVisible", model: "model" }, outputs: { modelChange: "modelChange", userInput: "userInput", isDatepickerVisibleChange: "isDatepickerVisibleChange" }, host: { listeners: { "keyup": "handleKeyboardUpEvent($event)", "keydown": "handleKeyboardDownEvent($event)" } }, viewQueries: [{ propertyName: "daysButtonsElemRef", predicate: ["dayButtonElemRef"], descendants: true }], ngImport: i0, template: "<div\n    id=\"datepicker_wrapper\"\n    *ngIf=\"isDatepickerVisible\"\n    [cdkTrapFocus]=\"!!datepickerTriggerHtmlElement\"\n    tabindex=\"-1\"\n    role=\"application\"\n    [attr.aria-label]=\"\n        'foehn-date-picker.container.aria-label' | fromDictionary\n    \"\n>\n    <button\n        *ngIf=\"closeable\"\n        (click)=\"isDatepickerVisible = false\"\n        type=\"button\"\n        class=\"btn close\"\n        [attr.aria-label]=\"\n            'foehn-date-picker.close-button.aria-label' | fromDictionary\n        \"\n        id=\"closeButton\"\n    >\n        <span aria-hidden=\"true\">&times;</span>\n    </button>\n    <div id=\"datepicker_header\" class=\"d-flex justify-content-between\">\n        <button\n            id=\"previous-month\"\n            class=\"btn btn-link\"\n            (click)=\"previousMonth()\"\n        >\n            <foehn-icon-chevron-left\n                [title]=\"\n                    'foehn-date-picker.previous-month-button.title'\n                        | fromDictionary\n                \"\n            ></foehn-icon-chevron-left>\n        </button>\n        <ng-container *ngIf=\"currentMonthYear | async as monthYear\">\n            <span id=\"month-year-label\" aria-live=\"polite\" class=\"sr-only\">\n                {{\n                    'foehn-date-picker.screen-reader.actual-month-displayed'\n                        | fromDictionary\n                }}\n                {{ getMonthAsReadable(monthYear.month) }} {{ monthYear.year }}\n            </span>\n            <foehn-select\n                id=\"month-input\"\n                class=\"align-self-center\"\n                [label]=\"\n                    'foehn-date-picker.screen-reader.month-input.label'\n                        | fromDictionary\n                \"\n                [isLabelSrOnly]=\"true\"\n                [elements]=\"monthListItem\"\n                [model]=\"monthYear.month\"\n                [required]=\"false\"\n                (userInput)=\"userInputMonth($event)\"\n            ></foehn-select>\n            <foehn-select\n                id=\"year-input\"\n                class=\"align-self-center\"\n                [label]=\"\n                    'foehn-date-picker.screen-reader.year-input.label'\n                        | fromDictionary\n                \"\n                [isLabelSrOnly]=\"true\"\n                [elements]=\"yearListItem\"\n                [model]=\"monthYear.year\"\n                [required]=\"false\"\n                (userInput)=\"userInputYear($event)\"\n            ></foehn-select>\n        </ng-container>\n        <button id=\"next-month\" class=\"btn btn-link\" (click)=\"nextMonth()\">\n            <foehn-icon-chevron-right\n                [title]=\"\n                    'foehn-date-picker.next-month-button.title' | fromDictionary\n                \"\n            ></foehn-icon-chevron-right>\n        </button>\n    </div>\n    <table\n        id=\"datepicker_table\"\n        role=\"grid\"\n        (focusin)=\"onDaysFocusin()\"\n        (focusout)=\"onDaysFocusout()\"\n    >\n        <thead role=\"presentation\" aria-hidden=\"true\">\n            <tr role=\"row\">\n                <th\n                    scope=\"col\"\n                    role=\"columnheader\"\n                    *ngFor=\"let weekday of weekDays\"\n                >\n                    <foehn-abbr\n                        [text]=\"weekday.substr(0, 2)\"\n                        [title]=\"weekday\"\n                    ></foehn-abbr>\n                </th>\n            </tr>\n        </thead>\n        <tbody role=\"presentation\">\n            <tr role=\"row\" *ngFor=\"let week of weeks; let indexRow = index\">\n                <td\n                    role=\"gridcell\"\n                    *ngFor=\"let dayOfWeek of week; let indexColumn = index\"\n                >\n                    <button\n                        class=\"btn w-100\"\n                        #dayButtonElemRef\n                        [id]=\"'day_' + indexRow + '_' + indexColumn\"\n                        [tabindex]=\"getDayTabIndex(dayOfWeek)\"\n                        [class.btn-info]=\"!isToday(dayOfWeek.date)\"\n                        [class.btn-secondary]=\"isToday(dayOfWeek.date)\"\n                        [class.btn-danger]=\"isSelected(dayOfWeek.date)\"\n                        [attr.aria-label]=\"\n                            weekDays[indexColumn] +\n                            ' ' +\n                            dayOfWeek.dateAsReadable\n                        \"\n                        [attr.data-is-today]=\"isToday(dayOfWeek.date)\"\n                        [attr.data-is-selected]=\"isSelected(dayOfWeek.date)\"\n                        [attr.data-row-index]=\"indexRow\"\n                        [attr.data-column-index]=\"indexColumn\"\n                        [attr.day-number]=\"dayOfWeek.dayOfMonth\"\n                        [attr.disabled]=\"!dayOfWeek.isCurrentMonth ? 'disabled' : null\"\n                        (click)=\"handleUserInput(dayOfWeek.date)\"\n                    >\n                        {{ dayOfWeek.dayOfMonth }}\n                    </button>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [":host ::ng-deep .btn-link .svg-inline--fa{color:#000!important}#datepicker_header{margin-bottom:10px}#datepicker_wrapper{max-width:245px;padding:5px;border:1px solid #dfdfdf;background-color:#fff}#datepicker_wrapper .h4{margin-bottom:0}#datepicker_wrapper thead th{text-align:center;width:15%}#datepicker_wrapper .btn{padding:2px 4px}#datepicker_wrapper button.close{position:absolute;right:-14px;top:-18px;background-color:#fff;border:1px solid #dfdfdf;border-radius:50%;width:30px;height:30px;opacity:1}#datepicker_wrapper #month-input{width:50%;margin-right:5px}:host ::ng-deep foehn-select select.form-control{padding:0;margin:0;height:30px}:host ::ng-deep foehn-select .form-group{margin:0}\n"], components: [{ type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnSelectComponent, selector: "foehn-select", inputs: ["multiple"] }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { type: FoehnAbbrComponent, selector: "foehn-abbr", inputs: ["title", "text"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnDatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -11862,5 +12188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_INFO_API_URL, AbstractFoehnUploaderComponent, AbstractListDetailPageComponent, AbstractMenuPageComponent, AbstractPageComponent, AbstractPageFromMenuComponent, ActionStatut, Address, ApplicationInfo, ApplicationInfoService, BAD_PARAMS_HELP_TEXT, BackendResponse, BoDocumentError, BoDocumentsWithErrors, BoMultiUploadService, Breadcrumb, BreadcrumbEventService, BreadcrumbItem, CAPTCHA_ERROR_NAME, CURRENCY_REGEXP, Captcha, ComponentError, Configuration, Country, CurrencyHelper, DECIMALS_SEPARATOR, DEFAULT_INTERNATIONAL_AND_NO_SWISS, DEFAULT_INTERNATIONAL_AND_NO_SWISS_MOBILE, DEFAULT_INTERNATIONAL_AND_NO_SWISS_PHONE, DEFAULT_INTERNATIONAL_HELP_TEXT, DEFAULT_SWISS_HELP_TEXT, DEFAULT_SWISS_MOBILE_PHONE_HELP_TEXT, DEFAULT_SWISS_PHONE_HELP_TEXT, DICTIONARY_BASE_URL, DateHelper, DatePickerHelper, DatePickerNavigationHelper, DayMonth, DisplayCurrencyPipe, DisplayDatePipe, DisplayLoginMessagesData, Document, DocumentError, DocumentReference, DocumentReferenceWithFile, DocumentsWithErrors, EPaymentService, EtapeInfo, FORM_SUPPORT_CYBER_TITLE_FALLBACK, FocusedDay, FoehnAbbrComponent, FoehnAddressModule, FoehnAutocompleteComponent, FoehnAutocompleteModule, FoehnBoMultiUploadComponent, FoehnBoMultiUploadModule, FoehnBooleanCheckboxComponent, FoehnBooleanModule, FoehnBooleanRadioComponent, FoehnBreadcrumbComponent, FoehnBreadcrumbModule, FoehnCheckableGroupComponent, FoehnCheckablesModule, FoehnCheckboxComponent, FoehnConfirmModalComponent, FoehnConfirmModalContent, FoehnConfirmModalModule, FoehnConfirmModalService, FoehnDateComponent, FoehnDatePickerButtonComponent, FoehnDatePickerButtonModule, FoehnDatePickerComponent, FoehnDatePickerModule, FoehnDecisionElectroniqueComponent, FoehnDecisionElectroniqueModule, FoehnDisplayAddressComponent, FoehnErrorPillComponent, FoehnFormComponent, FoehnFormModule, FoehnHeaderComponent, FoehnHeaderModule, FoehnHelpModalComponent, FoehnHelpModalModule, FoehnIconCalendarComponent, FoehnIconCheckComponent, FoehnIconCheckSquareOComponent, FoehnIconChevronDownComponent, FoehnIconChevronLeftComponent, FoehnIconChevronRightComponent, FoehnIconChevronUpComponent, FoehnIconClockComponent, FoehnIconCommentDotsComponent, FoehnIconEditComponent, FoehnIconExternalLinkAltComponent, FoehnIconFilePdfComponent, FoehnIconInfoCircleComponent, FoehnIconLockComponent, FoehnIconMapMarkerComponent, FoehnIconMinusCircleComponent, FoehnIconPlusCircleComponent, FoehnIconPlusSquareComponent, FoehnIconSearchComponent, FoehnIconTimesComponent, FoehnIconTrashAltComponent, FoehnIconUnlockAltComponent, FoehnIconsModule, FoehnInputAddressComponent, FoehnInputComponent, FoehnInputEmailComponent, FoehnInputForeignLocalityComponent, FoehnInputForeignStreetComponent, FoehnInputHiddenComponent, FoehnInputModule, FoehnInputNav13Component, FoehnInputNav13Module, FoehnInputNumberComponent, FoehnInputPasswordComponent, FoehnInputPhoneComponent, FoehnInputStringComponent, FoehnInputTextComponent, FoehnInputTextareaComponent, FoehnListComponent, FoehnListItem, FoehnListModule, FoehnListSummaryComponent, FoehnMenuItemComponent, FoehnMenuItemTransmitComponent, FoehnMenuPrestationModule, FoehnMiscModule, FoehnModalComponent, FoehnModalModule, FoehnMultiUploadComponent, FoehnMultiUploadModule, FoehnNavigationComponent, FoehnNavigationModule, FoehnNavigationService, FoehnNotFoundModule, FoehnNotfoundComponent, FoehnPageComponent, FoehnPageCounterComponent, FoehnPageModalComponent, FoehnPageModule, FoehnPageService, FoehnPictureUploadComponent, FoehnPictureUploadModule, FoehnRadioComponent, FoehnRecapSectionComponent, FoehnRecapSectionModule, FoehnRemainingAlertsSummaryComponent, FoehnRemainingAlertsSummaryModule, FoehnSelectComponent, FoehnSkipLinkComponent, FoehnStatusProgressBarComponent, FoehnStatusProgressBarModule, FoehnTableColumnConfiguration, FoehnTableComponent, FoehnTableModule, FoehnTablePageChangeEvent, FoehnTimeComponent, FoehnUserConnectedAsComponent, FoehnUserConnectedAsModule, FoehnValidationAlertSummaryComponent, FoehnValidationAlertSummaryModule, FoehnValidationAlertsComponent, FoehnValidationAlertsModule, FooterLink, FormSelectOption, FormatIdePipe, FormatterModule, GESDEM_MAX_DATA_LENGTH, GesdemActionRecoveryLoginComponent, GesdemActionRecoveryModule, GesdemActionRecoveryRegistrationComponent, GesdemConfirmationComponent, GesdemConfirmationModule, GesdemErrorComponent, GesdemErrorModule, GesdemEventService, GesdemHandlerService, GesdemLoaderGuard, GesdemMeta, GesdemStatutUtils, GrowlBrokerService, GrowlMessage, GrowlType, I18nForm, IbanFormatterDirective, IdeFormatterDirective, Locality, MonthYear, MultiUploadService, NDCFormatterDirective, NavigationDirection, NumberCurrencyFormatterDirective, ObjectHelper, PORTAIL_BASE_URL_INT, PageChangeEvent, PendingFiles, PendingUploadService, PipeModule, Portail, Preferences, PrestationsNgCoreModule, RECAPTCHA_API_URL, RecaptchaService, RedirectComponent, SESSION_INFO_API_URL, SWISS_ISO_ID, SdkDictionaryModule, SdkDictionaryPipe, SdkDictionaryService, SdkEpaymentComponent, SdkEpaymentModule, SdkRecaptchaComponent, SdkRecaptchaModule, SdkRedirectModule, ServiceLocator, SessionInfo, SessionInfoData, SessionInfoWithApplicationService, Street, StreetNumber, THOUSANDS_SEPARATOR, TableSort, UploaderHelper, ValidationHandlerService };
+export { APP_INFO_API_URL, AbstractFoehnUploaderComponent, AbstractListDetailPageComponent, AbstractMenuPageComponent, AbstractPageComponent, AbstractPageFromMenuComponent, ActionStatut, Address, ApplicationInfo, ApplicationInfoService, BAD_PARAMS_HELP_TEXT, BackendResponse, BoDocumentError, BoDocumentsWithErrors, BoMultiUploadService, Breadcrumb, BreadcrumbEventService, BreadcrumbItem, CAPTCHA_ERROR_NAME, CURRENCY_REGEXP, Captcha, ComponentError, Configuration, Country, CurrencyHelper, DECIMALS_SEPARATOR, DEFAULT_INTERNATIONAL_AND_NO_SWISS, DEFAULT_INTERNATIONAL_AND_NO_SWISS_MOBILE, DEFAULT_INTERNATIONAL_AND_NO_SWISS_PHONE, DEFAULT_INTERNATIONAL_HELP_TEXT, DEFAULT_SWISS_HELP_TEXT, DEFAULT_SWISS_MOBILE_PHONE_HELP_TEXT, DEFAULT_SWISS_PHONE_HELP_TEXT, DICTIONARY_BASE_URL, DateHelper, DatePickerHelper, DatePickerNavigationHelper, DayMonth, DisplayCurrencyPipe, DisplayDatePipe, DisplayLoginMessagesData, Document, DocumentError, DocumentReference, DocumentReferenceWithFile, DocumentsWithErrors, EPaymentService, EtapeInfo, FORM_SUPPORT_CYBER_TITLE_FALLBACK, FocusedDay, FoehnAbbrComponent, FoehnAddressModule, FoehnAutocompleteComponent, FoehnAutocompleteModule, FoehnBoMultiUploadComponent, FoehnBoMultiUploadModule, FoehnBooleanCheckboxComponent, FoehnBooleanModule, FoehnBooleanRadioComponent, FoehnBreadcrumbComponent, FoehnBreadcrumbModule, FoehnCheckableGroupComponent, FoehnCheckablesModule, FoehnCheckboxComponent, FoehnConfirmModalComponent, FoehnConfirmModalContent, FoehnConfirmModalModule, FoehnConfirmModalService, FoehnDateComponent, FoehnDatePickerButtonComponent, FoehnDatePickerButtonModule, FoehnDatePickerComponent, FoehnDatePickerModule, FoehnDecisionElectroniqueComponent, FoehnDecisionElectroniqueModule, FoehnDisplayAddressComponent, FoehnErrorPillComponent, FoehnFormComponent, FoehnFormModule, FoehnHeaderComponent, FoehnHeaderModule, FoehnHelpModalComponent, FoehnHelpModalModule, FoehnIconCalendarComponent, FoehnIconCheckComponent, FoehnIconCheckSquareOComponent, FoehnIconChevronDownComponent, FoehnIconChevronLeftComponent, FoehnIconChevronRightComponent, FoehnIconChevronUpComponent, FoehnIconClockComponent, FoehnIconCommentDotsComponent, FoehnIconEditComponent, FoehnIconExternalLinkAltComponent, FoehnIconFilePdfComponent, FoehnIconInfoCircleComponent, FoehnIconLockComponent, FoehnIconMapMarkerComponent, FoehnIconMinusCircleComponent, FoehnIconPlusCircleComponent, FoehnIconPlusSquareComponent, FoehnIconSearchComponent, FoehnIconTimesComponent, FoehnIconTrashAltComponent, FoehnIconUnlockAltComponent, FoehnIconsModule, FoehnInputAddressComponent, FoehnInputComponent, FoehnInputEmailComponent, FoehnInputForeignLocalityComponent, FoehnInputForeignStreetComponent, FoehnInputHiddenComponent, FoehnInputModule, FoehnInputNav13Component, FoehnInputNav13Module, FoehnInputNumberComponent, FoehnInputPasswordComponent, FoehnInputPhoneComponent, FoehnInputStringComponent, FoehnInputTextComponent, FoehnInputTextareaComponent, FoehnListComponent, FoehnListItem, FoehnListModule, FoehnListSummaryComponent, FoehnMenuItemComponent, FoehnMenuItemTransmitComponent, FoehnMenuPrestationModule, FoehnMiscModule, FoehnModalComponent, FoehnModalModule, FoehnMultiUploadComponent, FoehnMultiUploadModule, FoehnMultiselectAutocompleteComponent, FoehnMultiselectAutocompleteModule, FoehnNavigationComponent, FoehnNavigationModule, FoehnNavigationService, FoehnNotFoundModule, FoehnNotfoundComponent, FoehnPageComponent, FoehnPageCounterComponent, FoehnPageModalComponent, FoehnPageModule, FoehnPageService, FoehnPictureUploadComponent, FoehnPictureUploadModule, FoehnRadioComponent, FoehnRecapSectionComponent, FoehnRecapSectionModule, FoehnRemainingAlertsSummaryComponent, FoehnRemainingAlertsSummaryModule, FoehnSelectComponent, FoehnSkipLinkComponent, FoehnStatusProgressBarComponent, FoehnStatusProgressBarModule, FoehnTableColumnConfiguration, FoehnTableComponent, FoehnTableModule, FoehnTablePageChangeEvent, FoehnTimeComponent, FoehnUserConnectedAsComponent, FoehnUserConnectedAsModule, FoehnValidationAlertSummaryComponent, FoehnValidationAlertSummaryModule, FoehnValidationAlertsComponent, FoehnValidationAlertsModule, FooterLink, FormSelectOption, FormatIdePipe, FormatterModule, GESDEM_MAX_DATA_LENGTH, GesdemActionRecoveryLoginComponent, GesdemActionRecoveryModule, GesdemActionRecoveryRegistrationComponent, GesdemConfirmationComponent, GesdemConfirmationModule, GesdemErrorComponent, GesdemErrorModule, GesdemEventService, GesdemHandlerService, GesdemLoaderGuard, GesdemMeta, GesdemStatutUtils, GrowlBrokerService, GrowlMessage, GrowlType, I18nForm, IbanFormatterDirective, IdeFormatterDirective, Locality, MonthYear, MultiUploadService, NDCFormatterDirective, NavigationDirection, NumberCurrencyFormatterDirective, ObjectHelper, PORTAIL_BASE_URL_INT, PageChangeEvent, PendingFiles, PendingUploadService, PipeModule, Portail, Preferences, PrestationsNgCoreModule, RECAPTCHA_API_URL, RecaptchaService, RedirectComponent, SESSION_INFO_API_URL, SWISS_ISO_ID, SdkDictionaryModule, SdkDictionaryPipe, SdkDictionaryService, SdkEpaymentComponent, SdkEpaymentModule, SdkRecaptchaComponent, SdkRecaptchaModule, SdkRedirectModule, ServiceLocator, SessionInfo, SessionInfoData, SessionInfoWithApplicationService, Street, StreetNumber, THOUSANDS_SEPARATOR, TableSort, UploaderHelper, ValidationHandlerService };
 //# sourceMappingURL=dsivd-prestations-ng.js.map