@dsivd/prestations-ng 14.5.22 → 14.5.23-beta3

package/bundles/dsivd-prestations-ng.umd.js

@@ -1928,7 +1928,14 @@
         '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.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.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.'
     };
 
     var DICTIONARY_BASE_URL = 'api/dictionary';
@@ -3861,7 +3868,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnInputTextComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnInputTextComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4526,6 +4533,98 @@
         return FormSelectOptionGroup;
     }());
 
+    /* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */
+    var ObjectHelper = /** @class */ (function () {
+        function 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
+         */
+        ObjectHelper.isEqual = function (value1, value2) {
+            if (value1 &&
+                value2 &&
+                typeof value1 === 'object' &&
+                typeof value2 === 'object') {
+                var matches_1 = function (obj, source) { return Object.keys(source).length === Object.keys(obj).length &&
+                    Object.keys(source).every(function (key) {
+                        if (obj.hasOwnProperty(key)) {
+                            if (obj[key] &&
+                                source[key] &&
+                                typeof obj[key] === 'object' &&
+                                typeof source[key] === 'object') {
+                                return matches_1(obj[key], source[key]);
+                            }
+                            return obj[key] === source[key];
+                        }
+                        return false;
+                    }); };
+                return matches_1(value1, value2);
+            }
+            return value1 === value2;
+        };
+        ObjectHelper.hasAnyValue = function (value) {
+            // do not simplify with an inline variable result due to compilation error
+            var result = Object.keys(value).some(function (key) {
+                if (value[key] && typeof value[key] === 'object') {
+                    return ObjectHelper.hasAnyValue(value[key]);
+                }
+                return !!value[key];
+            });
+            return result;
+        };
+        ObjectHelper.isEmpty = function (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
+         */
+        ObjectHelper.deepCopy = function (obj) {
+            if (!obj || typeof obj !== 'object') {
+                return obj;
+            }
+            var copy;
+            if (obj instanceof Date) {
+                copy = new Date();
+                copy.setTime(obj.getTime());
+                return copy;
+            }
+            if (obj instanceof Array) {
+                copy = [];
+                for (var i = 0, len = obj.length; i < len; i++) {
+                    copy[i] = ObjectHelper.deepCopy(obj[i]);
+                }
+                return copy;
+            }
+            if (obj instanceof Object) {
+                copy = {};
+                for (var 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.');
+        };
+        return ObjectHelper;
+    }());
+
     var FoehnCheckableGroupComponent = /** @class */ (function (_super) {
         __extends(FoehnCheckableGroupComponent, _super);
         function FoehnCheckableGroupComponent(ngZone) {
@@ -4543,6 +4642,7 @@
             _this.elementLabel = 'label';
             _this.elementDisabled = 'disabled';
             _this.allElementDisabled = false;
+            _this.elementsLoaded = new i0.EventEmitter();
             _this.multiple = false;
             _this._onInitSubject = new rxjs.Subject();
             _this.httpClient = ServiceLocator.injector.get(i1.HttpClient);
@@ -4601,6 +4701,7 @@
         };
         FoehnCheckableGroupComponent.prototype.setElements = function (elements) {
             this.elements = elements;
+            this.elementsLoaded.next(elements);
             this.onElementsRetrieved();
         };
         // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -4806,6 +4907,9 @@
                 // Hack to refresh the display value
                 this.updateNgModel(this.model_);
             }
+            else if (change && !ObjectHelper.isEqual(change.currentValue, change.previousValue)) {
+                this.elementsLoaded.next(change.currentValue);
+            }
         };
         FoehnCheckableGroupComponent.prototype.onElementsUrlChange = function (change) {
             if (change && !change.firstChange) {
@@ -4815,7 +4919,7 @@
         return FoehnCheckableGroupComponent;
     }(FoehnInputComponent));
     FoehnCheckableGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnCheckableGroupComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FoehnCheckableGroupComponent.ɵdir = i0__namespace.ɵɵ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__namespace });
+    FoehnCheckableGroupComponent.ɵdir = i0__namespace.ɵɵ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__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnCheckableGroupComponent, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { elements: [{
@@ -4834,102 +4938,12 @@
                     type: i0.Input
                 }], elementGroup: [{
                     type: i0.Input
+                }], elementsLoaded: [{
+                    type: i0.Output
                 }], defaultElementValue: [{
                     type: i0.Input
                 }] } });
 
-    /* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types */
-    var ObjectHelper = /** @class */ (function () {
-        function 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
-         */
-        ObjectHelper.isEqual = function (value1, value2) {
-            if (value1 &&
-                value2 &&
-                typeof value1 === 'object' &&
-                typeof value2 === 'object') {
-                var matches_1 = function (obj, source) { return Object.keys(source).length === Object.keys(obj).length &&
-                    Object.keys(source).every(function (key) {
-                        if (obj.hasOwnProperty(key)) {
-                            if (obj[key] &&
-                                source[key] &&
-                                typeof obj[key] === 'object' &&
-                                typeof source[key] === 'object') {
-                                return matches_1(obj[key], source[key]);
-                            }
-                            return obj[key] === source[key];
-                        }
-                        return false;
-                    }); };
-                return matches_1(value1, value2);
-            }
-            return value1 === value2;
-        };
-        ObjectHelper.hasAnyValue = function (value) {
-            // do not simplify with an inline variable result due to compilation error
-            var result = Object.keys(value).some(function (key) {
-                if (value[key] && typeof value[key] === 'object') {
-                    return ObjectHelper.hasAnyValue(value[key]);
-                }
-                return !!value[key];
-            });
-            return result;
-        };
-        ObjectHelper.isEmpty = function (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
-         */
-        ObjectHelper.deepCopy = function (obj) {
-            if (!obj || typeof obj !== 'object') {
-                return obj;
-            }
-            var copy;
-            if (obj instanceof Date) {
-                copy = new Date();
-                copy.setTime(obj.getTime());
-                return copy;
-            }
-            if (obj instanceof Array) {
-                copy = [];
-                for (var i = 0, len = obj.length; i < len; i++) {
-                    copy[i] = ObjectHelper.deepCopy(obj[i]);
-                }
-                return copy;
-            }
-            if (obj instanceof Object) {
-                copy = {};
-                for (var 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.');
-        };
-        return ObjectHelper;
-    }());
-
     var FoehnSelectComponent = /** @class */ (function (_super) {
         __extends(FoehnSelectComponent, _super);
         function FoehnSelectComponent(zone) {
@@ -7673,7 +7687,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnInputNumberComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnInputNumberComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7730,7 +7744,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnInputEmailComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnInputEmailComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7781,7 +7795,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnInputHiddenComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnInputHiddenComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7829,7 +7843,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnInputPasswordComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnInputPasswordComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8176,7 +8190,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnInputPhoneComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4__namespace.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnInputPhoneComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8837,6 +8851,343 @@
         return FormSelectOption;
     }());
 
+    var FoehnMultiselectAutocompleteComponent = /** @class */ (function (_super) {
+        __extends(FoehnMultiselectAutocompleteComponent, _super);
+        function FoehnMultiselectAutocompleteComponent(ngZone, dictionaryService) {
+            var _this = _super.call(this, ngZone) || this;
+            _this.dictionaryService = dictionaryService;
+            _this.showEmptyListMessage = false;
+            _this.keyboardNavigationAllowed = false;
+            return _this;
+        }
+        Object.defineProperty(FoehnMultiselectAutocompleteComponent.prototype, "defaultElementValues", {
+            get: function () {
+                return this.defaultElementValues_;
+            },
+            set: function (items) {
+                this.defaultElementValues_ = __spreadArray([], __read(items));
+                if ((!this.model || !this.model.length) && items) {
+                    this.updateNgModel(items);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FoehnMultiselectAutocompleteComponent.prototype, "defaultElementValue", {
+            set: function (item) {
+                this.defaultElementValues = [item];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FoehnMultiselectAutocompleteComponent.prototype.handleKeyboardDownEvent = function (event) {
+            if (this.keyboardNavigationAllowed) {
+                this.onKeyDownSelectedInner(event);
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.updateMultiselectAutocomplete = function () {
+            var validValue = this.getValidValue();
+            if (typeof validValue !== 'undefined') {
+                this.updateNgModel(validValue);
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.handleUserInput = function () {
+            var validValue = this.getValidValue();
+            if (typeof validValue !== 'undefined') {
+                this.handleChange(validValue);
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.addItem = function (item) {
+            if (!!item) {
+                if (!this.model) {
+                    this.model = [];
+                }
+                var index = this.model.indexOf(item);
+                if (index === -1) {
+                    this.model.push(item);
+                    this.updateMultiselectAutocomplete();
+                    this.handleUserInput();
+                    this.manageSuggestionListAndFocusAfterAddingAnItem();
+                }
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.removeItem = function (item) {
+            var index = this.model.indexOf(item);
+            if (index > -1) {
+                this.model.splice(index, 1);
+                this.triggerUserInput(this.model);
+                this.manageSuggestionListAndFocusAfterRemovingAnItem();
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.trackByFn = function (index) {
+            return index;
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
+        FoehnMultiselectAutocompleteComponent.prototype.getLabel = function (value) {
+            var elem = this.findElementByModelItem(value);
+            return _super.prototype.getLabel.call(this, elem);
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.getSelectedElementTabIndex = function (index) {
+            var _this = this;
+            var firstIndexFocusable = 0;
+            if (!!this.defaultElementValues) {
+                firstIndexFocusable = this.model.findIndex(function (selected) { return !_this.defaultElementValues.includes(selected); });
+            }
+            if (index !== firstIndexFocusable) {
+                return -1;
+            }
+            return 0;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.isSelectedItemFocusable = function (index) {
+            return !this.disabled && !!this.defaultElementValues && this.defaultElementValues.includes(this.model[index]);
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.canBeDeleted = function (index) {
+            return !this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]);
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.onSelectedItemsFocusin = function () {
+            this.keyboardNavigationAllowed = true;
+            this.currentFocusedElem = document.activeElement;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.onSelectedItemsFocusout = function () {
+            this.keyboardNavigationAllowed = false;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.onAutocompleteElementsLoaded = function (elements) {
+            var _this = this;
+            // Need to wait for childView to be loaded
+            setTimeout(function () {
+                if (!!_this.autocompleteComponent) {
+                    _this.autocompleteComponent.elements = _this.filterAutocompleteElements(elements);
+                    if (!_this.disabled && !_this.autocompleteComponent.elements.length) {
+                        _this.showAlertMessageAndHideAutocomplete();
+                    }
+                }
+            });
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.getSelectedListAriaLabel = function () {
+            return this.label + ": " + this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.list-of-selected-items');
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.findElementByModelItem = function (item) {
+            var _this = this;
+            if (!!this.elements && !!this.elements.length) {
+                var itemValue_1 = typeof item === 'string' ? item : this.getValue(item);
+                var elem = this.elements.find(function (element) { return _this.getValue(element) === itemValue_1; });
+                if (!!elem) {
+                    return elem;
+                }
+            }
+            return item;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.getValidValue = function () {
+            if (!this.model || !this.model.length) {
+                if (this.model_ !== undefined) {
+                    return null;
+                }
+                return undefined;
+            }
+            return this.model;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.getFirstDeleteButtonToFocus = function () {
+            var closeButtonsElemRefArray = __spreadArray([], __read(this.closeButtonsElemRef.toArray()));
+            if (!!closeButtonsElemRefArray.length) {
+                return closeButtonsElemRefArray[0].nativeElement;
+            }
+            return null;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.navigateSelectedList = function (offset) {
+            var _this = this;
+            if (!this.disabled) {
+                var closeButtonsElemRefArray = this.getDefaultSelectedElements().concat(__spreadArray([], __read(this.closeButtonsElemRef.toArray())));
+                if (!!closeButtonsElemRefArray.length) {
+                    var focusIndex = closeButtonsElemRefArray.findIndex(function (value) { return _this.currentFocusedElem === value.nativeElement; });
+                    var newIndex = focusIndex + offset;
+                    if (newIndex >= closeButtonsElemRefArray.length) {
+                        newIndex = 0;
+                    }
+                    if (newIndex < 0) {
+                        newIndex = closeButtonsElemRefArray.length - 1;
+                    }
+                    var elemRef = closeButtonsElemRefArray[newIndex];
+                    if (!!elemRef) {
+                        elemRef.nativeElement.focus();
+                    }
+                }
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.getDefaultSelectedElements = function () {
+            return __spreadArray([], __read(this.selectedElemRef.toArray())).filter(function (value) { return value.nativeElement.getAttribute('is-default') === 'true'; });
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.onKeyDownSelectedInner = function (keyEvent) {
+            // IE doesn't support keyEvent.code, and has different values
+            // in keyEvent.key (Down instead of ArrowDown for instance), hence the multi-support.
+            var 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;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.filterAutocompleteElements = function (elements) {
+            var _this = this;
+            var filteredElements = ObjectHelper.deepCopy(elements);
+            if (!!this.model && !!this.model.length) {
+                this.model.forEach(function (selected) {
+                    var e_1, _a;
+                    try {
+                        for (var _b = __values(filteredElements.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var _d = __read(_c.value, 2), index = _d[0], value = _d[1];
+                            var elem = _this.findElementByModelItem(selected);
+                            if (ObjectHelper.isEqual(elem, value)) {
+                                filteredElements.splice(index, 1);
+                                break;
+                            }
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                });
+            }
+            return filteredElements;
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.manageSuggestionListAndFocusAfterAddingAnItem = function () {
+            var _this = this;
+            this.autocompleteInputValue = null;
+            // 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(function () {
+                    var alertMessage = _this.alertMessageContainer.nativeElement.querySelector('p');
+                    if (alertMessage) {
+                        alertMessage.focus();
+                    }
+                });
+            }
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.manageSuggestionListAndFocusAfterRemovingAnItem = function () {
+            var _this = this;
+            // 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(operators.first()).subscribe(function () {
+                var buttonToFocus = _this.getFirstDeleteButtonToFocus();
+                if (!!buttonToFocus) {
+                    buttonToFocus.focus();
+                }
+                else {
+                    _this.autocompleteComponent.setFocusOnInput();
+                    _this.autocompleteComponent.onInputFocus();
+                }
+            });
+        };
+        FoehnMultiselectAutocompleteComponent.prototype.showAlertMessageAndHideAutocomplete = function () {
+            // 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;
+        };
+        return FoehnMultiselectAutocompleteComponent;
+    }(FoehnAutocompleteComponent));
+    FoehnMultiselectAutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteComponent, deps: [{ token: i0__namespace.NgZone }, { token: SdkDictionaryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FoehnMultiselectAutocompleteComponent.ɵcmp = i0__namespace.ɵɵ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: i0.forwardRef(function () { return 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__namespace, 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        <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                    #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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'foehn-multiselect-autocomplete',
+                        templateUrl: './foehn-multiselect-autocomplete.component.html',
+                        styleUrls: ['./foehn-multiselect-autocomplete.component.css'],
+                        providers: [
+                            {
+                                provide: FoehnInputComponent,
+                                useExisting: i0.forwardRef(function () { return FoehnMultiselectAutocompleteComponent; }),
+                                multi: true
+                            }
+                        ]
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: SdkDictionaryService }]; }, propDecorators: { autocompleteComponent: [{
+                    type: i0.ViewChild,
+                    args: ['autocompleteComponent']
+                }], alertMessageContainer: [{
+                    type: i0.ViewChild,
+                    args: ['alertMessageContainer']
+                }], closeButtonsElemRef: [{
+                    type: i0.ViewChildren,
+                    args: ['closeButtonsElemRef']
+                }], selectedElemRef: [{
+                    type: i0.ViewChildren,
+                    args: ['selectedElemRef']
+                }], defaultElementValues: [{
+                    type: i0.Input
+                }], defaultElementValue: [{
+                    type: i0.Input
+                }], handleKeyboardDownEvent: [{
+                    type: i0.HostListener,
+                    args: ['keydown', ['$event']]
+                }] } });
+
+    var FoehnMultiselectAutocompleteModule = /** @class */ (function () {
+        function FoehnMultiselectAutocompleteModule() {
+        }
+        return FoehnMultiselectAutocompleteModule;
+    }());
+    FoehnMultiselectAutocompleteModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FoehnMultiselectAutocompleteModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteModule, declarations: [FoehnMultiselectAutocompleteComponent], imports: [FoehnAutocompleteModule,
+            SdkDictionaryModule,
+            FoehnValidationAlertsModule,
+            i3.CommonModule,
+            FoehnIconsModule,
+            i4.FormsModule], exports: [FoehnMultiselectAutocompleteComponent] });
+    FoehnMultiselectAutocompleteModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteModule, imports: [[
+                FoehnAutocompleteModule,
+                SdkDictionaryModule,
+                FoehnValidationAlertsModule,
+                i3.CommonModule,
+                FoehnIconsModule,
+                i4.FormsModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            FoehnAutocompleteModule,
+                            SdkDictionaryModule,
+                            FoehnValidationAlertsModule,
+                            i3.CommonModule,
+                            FoehnIconsModule,
+                            i4.FormsModule
+                        ],
+                        declarations: [FoehnMultiselectAutocompleteComponent],
+                        exports: [FoehnMultiselectAutocompleteComponent]
+                    }]
+            }] });
+
     var FoehnInputNav13Component = /** @class */ (function (_super) {
         __extends(FoehnInputNav13Component, _super);
         function FoehnInputNav13Component() {
@@ -11342,7 +11693,7 @@
                 useExisting: i0.forwardRef(function () { return FoehnPictureUploadComponent; }),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, 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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnPictureUploadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12980,7 +13331,7 @@
         return FoehnDatePickerComponent;
     }());
     FoehnDatePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnDatePickerComponent, deps: [{ token: SdkDictionaryService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FoehnDatePickerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
+    FoehnDatePickerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnDatePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13371,6 +13722,8 @@
     exports.FoehnModalModule = FoehnModalModule;
     exports.FoehnMultiUploadComponent = FoehnMultiUploadComponent;
     exports.FoehnMultiUploadModule = FoehnMultiUploadModule;
+    exports.FoehnMultiselectAutocompleteComponent = FoehnMultiselectAutocompleteComponent;
+    exports.FoehnMultiselectAutocompleteModule = FoehnMultiselectAutocompleteModule;
     exports.FoehnNavigationComponent = FoehnNavigationComponent;
     exports.FoehnNavigationModule = FoehnNavigationModule;
     exports.FoehnNavigationService = FoehnNavigationService;