npm - @dsivd/prestations-ng - Versions diffs - 15.4.1 → 15.4.2-BETA1 - Mend

@dsivd/prestations-ng 15.4.1 → 15.4.2-BETA1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/fesm2020/dsivd-prestations-ng.mjs CHANGED Viewed

@@ -4335,6 +4335,22 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         }
         this.groupedElements = this.getGroupedElements();
     }
+    getNestedProperty(obj, key) {
+        for (const property in obj) {
+            if (obj.hasOwnProperty(property)) {
+                // in case it is an object
+                if (typeof obj[property] === 'object') {
+                    const result = this.getNestedProperty(obj[property], key.split('.').slice(1).join('.'));
+                    if (typeof result !== 'undefined') {
+                        return result;
+                    }
+                }
+                else if (property === key) {
+                    return obj[key]; // returns the value
+                }
+            }
+        }
+    }
     getGroupedElements() {
         if (!this.elements) {
             return [];
@@ -4368,22 +4384,6 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         });
         return formSelectOptionsGroup;
     }
-    getNestedProperty(obj, key) {
-        for (const property in obj) {
-            if (obj.hasOwnProperty(property)) {
-                // in case it is an object
-                if (typeof obj[property] === 'object') {
-                    const result = this.getNestedProperty(obj[property], key.split('.').slice(1).join('.'));
-                    if (typeof result !== 'undefined') {
-                        return result;
-                    }
-                }
-                else if (property === key) {
-                    return obj[key]; // returns the value
-                }
-            }
-        }
-    }
     getValueIdentityFunction() {
         return typeof this.elementValueIdentity === 'function'
             ? this.elementValueIdentity
@@ -4474,7 +4474,7 @@ FoehnSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => FoehnSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\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        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngIf=\"!required\"\n            [ngValue]=\"null\"\n            [innerHTML]=\"noSelectionLabel\"\n        ></option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n", components: [{ type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\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        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">\n            {{ noSelectionLabel }}\n        </option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n", components: [{ type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-select', providers: [
@@ -4483,7 +4483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FoehnSelectComponent),
                             multi: true
                         }
-                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\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        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngIf=\"!required\"\n            [ngValue]=\"null\"\n            [innerHTML]=\"noSelectionLabel\"\n        ></option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n" }]
+                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <div class=\"d-flex justify-content-between\">\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        <foehn-help-modal\n            class=\"removePaddingButton\"\n            *ngIf=\"!!helpModal\"\n            [modalContent]=\"helpModal\"\n        ></foehn-help-modal>\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">\n            {{ noSelectionLabel }}\n        </option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { multiple: [{
                 type: Input
             }], noSelectionLabel: [{
@@ -5751,6 +5751,10 @@ function normalizeSearch(value) {
     }
     return normalizeUtf8(value.toLocaleLowerCase());
 }
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions,jsdoc/require-jsdoc
+function stripHtmlTags(value) {
+    return value.replace(/(<([^>]+)>)/gi, '');
+}
 class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
     constructor(zone) {
         super(zone);
@@ -5767,6 +5771,8 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
         this.NB_ITEMS_VISIBLE = 5;
         this.filterSubject = new Subject();
         this.SUGGESTION_SELECTED_CLASS = 'suggestion-selected';
+        this.EXCLUDE_HTML_TAGS_REGEX = '((?=[^>]*<)|(?![^<]*>))';
+        this.SUGGESTION_CUSTOM_ATTRIBUTE_LABEL_VALUE = 'label-value';
         this.filterSubcription = this.filterSubject
             .pipe(debounceTime(200))
             .subscribe(this.filterElements.bind(this));
@@ -5961,10 +5967,20 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
             this.setSuggestionsDisplayed(hideSuggestions, this.elements.filter((e) => this.matchResult(e)));
         }
     }
+    getSuggestionLabel(element) {
+        if (!this.elementSuggestionLabel) {
+            return this.getLabel(element);
+        }
+        if (typeof this.elementSuggestionLabel === 'string') {
+            return this.getNestedProperty(element, this.elementSuggestionLabel);
+        }
+        return this.elementSuggestionLabel(element);
+    }
     getLabelWithEmphasis(elem) {
-        let label = this.getLabel(elem);
+        let label = this.getSuggestionLabel(elem);
         if (!this.isEmpty(this.searchValue)) {
-            const startIndex = normalizeSearch(label).indexOf(normalizeSearch(this.searchValue));
+            const regexStr = `${normalizeSearch(this.searchValue)}${this.EXCLUDE_HTML_TAGS_REGEX}`;
+            const startIndex = normalizeSearch(label).search(regexStr);
             if (startIndex !== -1) {
                 label = `${startIndex > 0 ? label.substr(0, startIndex) : ''}<b>${label.substr(startIndex, this.searchValue.length)}</b>${label.length > startIndex + this.searchValue.length
                     ? label.substr(startIndex + this.searchValue.length, label.length)
@@ -6099,7 +6115,7 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
                     if (!isNaN(index)) {
                         const item = suggestions[index];
                         if (item.className.includes(this.SUGGESTION_SELECTED_CLASS)) {
-                            return item.innerText;
+                            return item.getAttribute(this.SUGGESTION_CUSTOM_ATTRIBUTE_LABEL_VALUE);
                         }
                     }
                 }
@@ -6211,10 +6227,11 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
     }
     matchResult(element) {
         const searchValue = normalizeSearch(this.searchValue);
-        const label = normalizeSearch(this.getLabel(element));
+        let label = normalizeSearch(this.getLabel(element));
         if (!label) {
             return false;
         }
+        label = stripHtmlTags(label);
         return label.includes(searchValue);
     }
     manuallyUpdateValue(newValue) {
@@ -6240,13 +6257,13 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
     }
 }
 FoehnAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FoehnAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: { searchValueMinCharsCount: "searchValueMinCharsCount", allowCustomValue: "allowCustomValue", customValueModelGenerator: "customValueModelGenerator", itemHeightInSuggestionListInPx: "itemHeightInSuggestionListInPx" }, providers: [
+FoehnAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: { searchValueMinCharsCount: "searchValueMinCharsCount", allowCustomValue: "allowCustomValue", customValueModelGenerator: "customValueModelGenerator", itemHeightInSuggestionListInPx: "itemHeightInSuggestionListInPx", elementSuggestionLabel: "elementSuggestionLabel" }, providers: [
         {
             provide: FoehnInputComponent,
             useExisting: forwardRef(() => FoehnAutocompleteComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "suggestionsList", first: true, predicate: ["suggestionsList"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["entryComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"sr-only\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"sr-only\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"autocomplete-clear-button btn\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            title=\"R\u00E9initialiser le champ\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.height.px]=\"itemHeightInSuggestionListInPx\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "suggestionsList", first: true, predicate: ["suggestionsList"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["entryComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"sr-only\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"sr-only\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"autocomplete-clear-button btn\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            title=\"R\u00E9initialiser le champ\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.height.px]=\"itemHeightInSuggestionListInPx\"\n                    [attr.label-value]=\"getLabel(element)\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-autocomplete', providers: [
@@ -6255,7 +6272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FoehnAutocompleteComponent),
                             multi: true
                         }
-                    ], template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"sr-only\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"sr-only\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"autocomplete-clear-button btn\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            title=\"R\u00E9initialiser le champ\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.height.px]=\"itemHeightInSuggestionListInPx\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"] }]
+                    ], template: "<!--\n    Accessible autocomplete widget following the listbox combobox pattern.\n    ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n    class=\"form-group autocomplete-form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.aria-expanded]=\"shouldDisplayListbox()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n        [attr.id]=\"buildChildId() + 'Label'\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <div class=\"sr-only\">\n        Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n        touche Entrer pour s\u00E9lectionner une option.\n    </div>\n\n    <!-- Give screen reader users the total of results when then input changes. -->\n    <div\n        class=\"sr-only\"\n        aria-live=\"polite\"\n        role=\"status\"\n        aria-atomic=\"true\"\n        *ngIf=\"displayedElements && shouldDisplayListbox()\"\n    >\n        Nombre de r\u00E9sultats: {{ displayedElements.length }}\n        <!-- Trick to have NVDA re-reading this properly -->\n        <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n    </div>\n\n    <input\n        [class.is-invalid]=\"hasErrorsToDisplay()\"\n        class=\"form-control autocomplete\"\n        type=\"text\"\n        role=\"textbox\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.placeholder]=\"placeholder || null\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-required]=\"required || null\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.autocomplete]=\"'off'\"\n        [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n        [attr.aria-owns]=\"\n            shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n        \"\n        [attr.list]=\"buildChildId() + 'list'\"\n        [(ngModel)]=\"inputValue\"\n        (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n        (paste)=\"onPaste($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\"\n        (click)=\"onInputClick()\"\n        autocomplete=\"off\"\n        #entryComponent\n    />\n\n    <button\n        type=\"button\"\n        *ngIf=\"displayClearButton() | async\"\n        class=\"autocomplete-clear-button btn\"\n        (click)=\"onClear()\"\n        [id]=\"buildChildId() + 'Clear'\"\n    >\n        <foehn-icon-times\n            class=\"autocomplete-clear-button-icon\"\n            title=\"R\u00E9initialiser le champ\"\n        ></foehn-icon-times>\n    </button>\n\n    <div\n        class=\"form-group suggestions-list-container\"\n        *ngIf=\"shouldDisplayListbox()\"\n    >\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"itemHeightInSuggestionListInPx\"\n            [style.height.px]=\"VIEW_PORT_HEIGHT\"\n        >\n            <ul\n                [attr.id]=\"buildChildId() + 'Listbox'\"\n                [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n                role=\"listbox\"\n                class=\"suggestions-list\"\n                #suggestionsList\n            >\n                <li\n                    tabindex=\"-1\"\n                    role=\"option\"\n                    class=\"suggestion\"\n                    *cdkVirtualFor=\"\n                        let element of displayedElements;\n                        index as i\n                    \"\n                    [attr.id]=\"buildChildId() + 'Option' + i\"\n                    (click)=\"onClickSuggestion(element)\"\n                    (mousedown)=\"onListOptionMouseDown($event)\"\n                    (focus)=\"onListOptionFocus()\"\n                    (blur)=\"onListOptionBlur()\"\n                    [style.height.px]=\"itemHeightInSuggestionListInPx\"\n                    [attr.label-value]=\"getLabel(element)\"\n                >\n                    <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n                    <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n                </li>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { virtualScrollViewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -6273,6 +6290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], itemHeightInSuggestionListInPx: [{
                 type: Input
+            }], elementSuggestionLabel: [{
+                type: Input
             }] } });
 class SdkDictionaryModule {
@@ -9010,7 +9029,7 @@ FoehnInputAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             useExisting: forwardRef(() => FoehnInputAddressComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "foreignLocalityComponent", first: true, predicate: FoehnInputForeignLocalityComponent, descendants: true }, { propertyName: "foreignStreetComponent", first: true, predicate: FoehnInputForeignStreetComponent, descendants: true }, { propertyName: "foreignHouseNumber", first: true, predicate: ["foreignHouseNumber"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.id]=\"buildId() + 'Container'\"\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [tabIndex]=\"-1\"\n>\n    <fieldset\n        class=\"mb-3\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n    >\n        <legend *ngIf=\"!!label\" [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\">\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </legend>\n\n        <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n        <small\n            *ngIf=\"helpText\"\n            [attr.id]=\"buildId() + 'Help'\"\n            class=\"text-secondary\"\n            [innerHTML]=\"helpText\"\n        ></small>\n\n        <ng-content></ng-content>\n\n        <foehn-autocomplete\n            *ngIf=\"!isOnlySwiss\"\n            [label]=\"'foehn-input-address.country.label' | fromDictionary\"\n            [elements]=\"countries | async\"\n            elementLabel=\"shortNameFr\"\n            [elementValue]=\"identity\"\n            [elementValueIdentity]=\"countryIdentity\"\n            (modelChange)=\"countryUpdated($event)\"\n            (userInput)=\"userInputCountry()\"\n            [model]=\"country\"\n            [name]=\"name + '.country'\"\n            [required]=\"countryRequired\"\n            [disabled]=\"disabled\"\n        ></foehn-autocomplete>\n\n        <ng-container *ngIf=\"isSwiss()\">\n            <foehn-autocomplete\n                [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n                [elements]=\"localities | async\"\n                [elementLabel]=\"getLocalityDisplayedName\"\n                [elementValue]=\"identity\"\n                [elementValueIdentity]=\"localityIdentity\"\n                (modelChange)=\"localityUpdated($event)\"\n                (userInput)=\"userInputLocality($event)\"\n                [model]=\"locality\"\n                [name]=\"name + '.locality'\"\n                [required]=\"swissNpaLocalityRequired\"\n                [allElementDisabled]=\"!country\"\n                [disabled]=\"disabled\"\n            ></foehn-autocomplete>\n\n            <foehn-autocomplete\n                [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n                [elements]=\"streets | async\"\n                elementLabel=\"longName\"\n                [elementValue]=\"identity\"\n                [elementValueIdentity]=\"streetIdentity\"\n                (modelChange)=\"streetUpdated($event)\"\n                [model]=\"street\"\n                [name]=\"name + '.street'\"\n                [allowCustomValue]=\"true\"\n                [customValueModelGenerator]=\"streetGenerator\"\n                [required]=\"streetRequired\"\n                [helpText]=\"\n                    'foehn-input-address.street.help-text' | fromDictionary\n                \"\n                [allElementDisabled]=\"!country\"\n                (userInput)=\"userInputStreet($event)\"\n                [disabled]=\"disabled\"\n            ></foehn-autocomplete>\n\n            <foehn-autocomplete\n                [label]=\"\n                    'foehn-input-address.houseNumber.label' | fromDictionary\n                \"\n                [elements]=\"streetNumbers | async\"\n                elementLabel=\"name\"\n                elementValue=\"name\"\n                [(model)]=\"houseNumber\"\n                [name]=\"name + '.houseNumber'\"\n                [allowCustomValue]=\"true\"\n                [helpText]=\"\n                    'foehn-input-address.houseNumber.help-text' | fromDictionary\n                \"\n                [allElementDisabled]=\"!country\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n                [required]=\"streetNumberRequired\"\n                [disabled]=\"disabled\"\n            ></foehn-autocomplete>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isSwiss()\">\n            <!--\n            Component <foehn-input-foreign-locality> is special because we use the same model when swiss or foreigner.\n            To do so, we need:\n                - Errors will be bind on 'locality' when NULL or on 'zipCode' and 'longName' model inside component when EMPTY\n                - Hide label from component because we need label from children to be displayed (isLabelSrOnly: true)\n                - required and disabled params are transmitted to children\n             -->\n            <foehn-input-foreign-locality\n                [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n                [name]=\"name + '.locality'\"\n                [(model)]=\"locality\"\n                [zipCodeRequired]=\"foreignZipCodeRequired\"\n                [localityRequired]=\"foreignLocalityRequired\"\n                [isLabelSrOnly]=\"true\"\n                [disabled]=\"!country || disabled\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n            ></foehn-input-foreign-locality>\n            <!--\n            Component <foehn-input-foreign-street> is special because we use the same model when swiss or foreigner.\n            To do so, we need:\n                - Errors will be bind on 'street' when NULL or on 'longName' model inside component when EMPTY\n                - required, helpText, isLabelSrOnly and disabled  params are transmitted to children\n             -->\n            <foehn-input-foreign-street\n                [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n                [name]=\"name + '.street'\"\n                [(model)]=\"street\"\n                [required]=\"foreignStreetRequired\"\n                [helpText]=\"\n                    'foehn-input-address.street.help-text' | fromDictionary\n                \"\n                [disabled]=\"!country || disabled\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n            ></foehn-input-foreign-street>\n\n            <foehn-input-text\n                #foreignHouseNumber\n                [label]=\"\n                    'foehn-input-address.houseNumber.label' | fromDictionary\n                \"\n                [name]=\"name + '.houseNumber'\"\n                [(model)]=\"houseNumber\"\n                [helpText]=\"\n                    'foehn-input-address.houseNumber.help-text' | fromDictionary\n                \"\n                [disabled]=\"!country || disabled\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n                [required]=\"foreignStreetNumberRequired\"\n            ></foehn-input-text>\n        </ng-container>\n\n        <foehn-input-text\n            *ngIf=\"showPostOfficeBoxText\"\n            [(model)]=\"postOfficeBoxText\"\n            [helpText]=\"\n                'foehn-input-address.postOfficeBoxText.help-text'\n                    | fromDictionary\n            \"\n            [label]=\"\n                'foehn-input-address.postOfficeBoxText.label' | fromDictionary\n            \"\n            [name]=\"name + '.postOfficeBoxText'\"\n            (modelChange)=\"updateAddress()\"\n            (userInput)=\"handleUserInput()\"\n            [required]=\"postOfficeBoxTextRequired\"\n            [disabled]=\"disabled\"\n        ></foehn-input-text>\n\n        <foehn-input-text\n            *ngIf=\"showAdressLines && showAdressLine1\"\n            [(model)]=\"addressLine1\"\n            [label]=\"'foehn-input-address.addressLine1.label' | fromDictionary\"\n            [name]=\"name + '.addressLine1'\"\n            (modelChange)=\"updateAddress()\"\n            (userInput)=\"handleUserInput()\"\n            [required]=\"addressLine1Required\"\n            [autocomplete]=\"'address-line2'\"\n            [disabled]=\"disabled\"\n        ></foehn-input-text>\n\n        <foehn-input-text\n            *ngIf=\"showAdressLines && showAdressLine2\"\n            [(model)]=\"addressLine2\"\n            [label]=\"'foehn-input-address.addressLine2.label' | fromDictionary\"\n            [name]=\"name + '.addressLine2'\"\n            (modelChange)=\"updateAddress()\"\n            (userInput)=\"handleUserInput()\"\n            [required]=\"addressLine2Required\"\n            [autocomplete]=\"'address-line3'\"\n            [disabled]=\"disabled\"\n        ></foehn-input-text>\n    </fieldset>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator", "itemHeightInSuggestionListInPx"] }, { type: FoehnInputForeignLocalityComponent, selector: "foehn-input-foreign-locality", inputs: ["localityRequired", "zipCodeRequired"] }, { type: FoehnInputForeignStreetComponent, selector: "foehn-input-foreign-street" }, { type: FoehnInputTextComponent, selector: "foehn-input-text", inputs: ["numberOnly"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
+    ], viewQueries: [{ propertyName: "foreignLocalityComponent", first: true, predicate: FoehnInputForeignLocalityComponent, descendants: true }, { propertyName: "foreignStreetComponent", first: true, predicate: FoehnInputForeignStreetComponent, descendants: true }, { propertyName: "foreignHouseNumber", first: true, predicate: ["foreignHouseNumber"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    [attr.id]=\"buildId() + 'Container'\"\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [tabIndex]=\"-1\"\n>\n    <fieldset\n        class=\"mb-3\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n    >\n        <legend *ngIf=\"!!label\" [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\">\n            <span [innerHTML]=\"label\"></span>\n            <span\n                *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n                aria-hidden=\"true\"\n            >\n                {{ 'foehn-input.optional' | fromDictionary }}\n            </span>\n        </legend>\n\n        <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n        <small\n            *ngIf=\"helpText\"\n            [attr.id]=\"buildId() + 'Help'\"\n            class=\"text-secondary\"\n            [innerHTML]=\"helpText\"\n        ></small>\n\n        <ng-content></ng-content>\n\n        <foehn-autocomplete\n            *ngIf=\"!isOnlySwiss\"\n            [label]=\"'foehn-input-address.country.label' | fromDictionary\"\n            [elements]=\"countries | async\"\n            elementLabel=\"shortNameFr\"\n            [elementValue]=\"identity\"\n            [elementValueIdentity]=\"countryIdentity\"\n            (modelChange)=\"countryUpdated($event)\"\n            (userInput)=\"userInputCountry()\"\n            [model]=\"country\"\n            [name]=\"name + '.country'\"\n            [required]=\"countryRequired\"\n            [disabled]=\"disabled\"\n        ></foehn-autocomplete>\n\n        <ng-container *ngIf=\"isSwiss()\">\n            <foehn-autocomplete\n                [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n                [elements]=\"localities | async\"\n                [elementLabel]=\"getLocalityDisplayedName\"\n                [elementValue]=\"identity\"\n                [elementValueIdentity]=\"localityIdentity\"\n                (modelChange)=\"localityUpdated($event)\"\n                (userInput)=\"userInputLocality($event)\"\n                [model]=\"locality\"\n                [name]=\"name + '.locality'\"\n                [required]=\"swissNpaLocalityRequired\"\n                [allElementDisabled]=\"!country\"\n                [disabled]=\"disabled\"\n            ></foehn-autocomplete>\n\n            <foehn-autocomplete\n                [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n                [elements]=\"streets | async\"\n                elementLabel=\"longName\"\n                [elementValue]=\"identity\"\n                [elementValueIdentity]=\"streetIdentity\"\n                (modelChange)=\"streetUpdated($event)\"\n                [model]=\"street\"\n                [name]=\"name + '.street'\"\n                [allowCustomValue]=\"true\"\n                [customValueModelGenerator]=\"streetGenerator\"\n                [required]=\"streetRequired\"\n                [helpText]=\"\n                    'foehn-input-address.street.help-text' | fromDictionary\n                \"\n                [allElementDisabled]=\"!country\"\n                (userInput)=\"userInputStreet($event)\"\n                [disabled]=\"disabled\"\n            ></foehn-autocomplete>\n\n            <foehn-autocomplete\n                [label]=\"\n                    'foehn-input-address.houseNumber.label' | fromDictionary\n                \"\n                [elements]=\"streetNumbers | async\"\n                elementLabel=\"name\"\n                elementValue=\"name\"\n                [(model)]=\"houseNumber\"\n                [name]=\"name + '.houseNumber'\"\n                [allowCustomValue]=\"true\"\n                [helpText]=\"\n                    'foehn-input-address.houseNumber.help-text' | fromDictionary\n                \"\n                [allElementDisabled]=\"!country\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n                [required]=\"streetNumberRequired\"\n                [disabled]=\"disabled\"\n            ></foehn-autocomplete>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isSwiss()\">\n            <!--\n            Component <foehn-input-foreign-locality> is special because we use the same model when swiss or foreigner.\n            To do so, we need:\n                - Errors will be bind on 'locality' when NULL or on 'zipCode' and 'longName' model inside component when EMPTY\n                - Hide label from component because we need label from children to be displayed (isLabelSrOnly: true)\n                - required and disabled params are transmitted to children\n             -->\n            <foehn-input-foreign-locality\n                [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n                [name]=\"name + '.locality'\"\n                [(model)]=\"locality\"\n                [zipCodeRequired]=\"foreignZipCodeRequired\"\n                [localityRequired]=\"foreignLocalityRequired\"\n                [isLabelSrOnly]=\"true\"\n                [disabled]=\"!country || disabled\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n            ></foehn-input-foreign-locality>\n            <!--\n            Component <foehn-input-foreign-street> is special because we use the same model when swiss or foreigner.\n            To do so, we need:\n                - Errors will be bind on 'street' when NULL or on 'longName' model inside component when EMPTY\n                - required, helpText, isLabelSrOnly and disabled  params are transmitted to children\n             -->\n            <foehn-input-foreign-street\n                [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n                [name]=\"name + '.street'\"\n                [(model)]=\"street\"\n                [required]=\"foreignStreetRequired\"\n                [helpText]=\"\n                    'foehn-input-address.street.help-text' | fromDictionary\n                \"\n                [disabled]=\"!country || disabled\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n            ></foehn-input-foreign-street>\n\n            <foehn-input-text\n                #foreignHouseNumber\n                [label]=\"\n                    'foehn-input-address.houseNumber.label' | fromDictionary\n                \"\n                [name]=\"name + '.houseNumber'\"\n                [(model)]=\"houseNumber\"\n                [helpText]=\"\n                    'foehn-input-address.houseNumber.help-text' | fromDictionary\n                \"\n                [disabled]=\"!country || disabled\"\n                (modelChange)=\"updateAddress()\"\n                (userInput)=\"handleUserInput()\"\n                [required]=\"foreignStreetNumberRequired\"\n            ></foehn-input-text>\n        </ng-container>\n\n        <foehn-input-text\n            *ngIf=\"showPostOfficeBoxText\"\n            [(model)]=\"postOfficeBoxText\"\n            [helpText]=\"\n                'foehn-input-address.postOfficeBoxText.help-text'\n                    | fromDictionary\n            \"\n            [label]=\"\n                'foehn-input-address.postOfficeBoxText.label' | fromDictionary\n            \"\n            [name]=\"name + '.postOfficeBoxText'\"\n            (modelChange)=\"updateAddress()\"\n            (userInput)=\"handleUserInput()\"\n            [required]=\"postOfficeBoxTextRequired\"\n            [disabled]=\"disabled\"\n        ></foehn-input-text>\n\n        <foehn-input-text\n            *ngIf=\"showAdressLines && showAdressLine1\"\n            [(model)]=\"addressLine1\"\n            [label]=\"'foehn-input-address.addressLine1.label' | fromDictionary\"\n            [name]=\"name + '.addressLine1'\"\n            (modelChange)=\"updateAddress()\"\n            (userInput)=\"handleUserInput()\"\n            [required]=\"addressLine1Required\"\n            [autocomplete]=\"'address-line2'\"\n            [disabled]=\"disabled\"\n        ></foehn-input-text>\n\n        <foehn-input-text\n            *ngIf=\"showAdressLines && showAdressLine2\"\n            [(model)]=\"addressLine2\"\n            [label]=\"'foehn-input-address.addressLine2.label' | fromDictionary\"\n            [name]=\"name + '.addressLine2'\"\n            (modelChange)=\"updateAddress()\"\n            (userInput)=\"handleUserInput()\"\n            [required]=\"addressLine2Required\"\n            [autocomplete]=\"'address-line3'\"\n            [disabled]=\"disabled\"\n        ></foehn-input-text>\n    </fieldset>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator", "itemHeightInSuggestionListInPx", "elementSuggestionLabel"] }, { type: FoehnInputForeignLocalityComponent, selector: "foehn-input-foreign-locality", inputs: ["localityRequired", "zipCodeRequired"] }, { type: FoehnInputForeignStreetComponent, selector: "foehn-input-foreign-street" }, { type: FoehnInputTextComponent, selector: "foehn-input-text", inputs: ["numberOnly"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnInputAddressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-input-address', providers: [
@@ -9348,7 +9367,7 @@ FoehnMultiselectAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
             useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "defaultDeleteFocusArea", first: true, predicate: ["defaultDeleteFocusArea"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<foehn-autocomplete\n    #autocompleteComponent\n    [name]=\"name\"\n    [label]=\"label\"\n    [elements]=\"elements\"\n    [elementsUrl]=\"elementsUrl\"\n    [elementValue]=\"elementValue\"\n    [elementLabel]=\"elementLabel\"\n    [elementValueIdentity]=\"elementValueIdentity\"\n    [elementDisabled]=\"elementDisabled\"\n    [allElementDisabled]=\"allElementDisabled\"\n    [elementGroup]=\"elementGroup\"\n    [allowCustomValue]=\"false\"\n    [searchValueMinCharsCount]=\"searchValueMinCharsCount\"\n    [customValueModelGenerator]=\"customValueModelGenerator\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (userInput)=\"addItem($event)\"\n    [(model)]=\"autocompleteInputValue\"\n    (elementsLoaded)=\"onAutocompleteElementsLoaded($event)\"\n    [showErrorWhenDisabled]=\"showErrorWhenDisabled\"\n    [hideNotRequiredExtraLabel]=\"hideNotRequiredExtraLabel\"\n    [itemHeightInSuggestionListInPx]=\"itemHeightInSuggestionListInPx\"\n>\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId('Help')\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"\n            helpText\n                ? helpText\n                : ('foehn-multiselect-autocomplete.autocomplete.screen-reader.label'\n                  | fromDictionary)\n        \"\n    ></small>\n\n    <div\n        [id]=\"buildChildId('AlertMessageContainer')\"\n        role=\"status\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info mb-0\"\n            tabindex=\"0\"\n        >\n            {{\n                'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                    | fromDictionary\n            }}\n        </p>\n    </div>\n</foehn-autocomplete>\n\n<p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ srAnnouncements }}\n</p>\n\n<div\n    class=\"form-group selected-list-container d-flex align-content-stretch flex-wrap\"\n    [ngClass]=\"!!model && !!model.length ? 'pt-2' : 'pt-0'\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    tabindex=\"-1\"\n>\n    <span\n        *ngIf=\"hasDefaultDeleteFocusArea()\"\n        class=\"sr-only\"\n        [tabindex]=\"0\"\n        [innerHTML]=\"\n            'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete'\n                | fromDictionary\n        \"\n        #defaultDeleteFocusArea\n    ></span>\n    <ng-container\n        *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n    >\n        <span\n            *ngIf=\"!canBeDeleted(index)\"\n            class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            #defaultElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <span class=\"sr-only\">\n                {{\n                    'foehn-multiselect-autocomplete.sr-default-selected-element'\n                        | fromDictionary\n                }}\n            </span>\n        </span>\n        <button\n            *ngIf=\"canBeDeleted(index)\"\n            class=\"btn btn-danger badge badge-pill mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"0\"\n            [attr.aria-label]=\"getDeleteButtonAriaLabel(element)\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            [title]=\"getDeleteButtonAriaLabel(element)\"\n            (click)=\"removeItem(element, index)\"\n            #selectedElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <foehn-icon-times\n                aria-hidden=\"true\"\n                class=\"ml-2\"\n                [title]=\"getDeleteButtonAriaLabel(element)\"\n            ></foehn-icon-times>\n        </button>\n    </ng-container>\n</div>\n", styles: ["foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}:host ::ng-deep foehn-autocomplete .form-group{margin-bottom:0!important}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa{color:#fff!important}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}\n"], components: [{ type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator", "itemHeightInSuggestionListInPx"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "defaultDeleteFocusArea", first: true, predicate: ["defaultDeleteFocusArea"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<foehn-autocomplete\n    #autocompleteComponent\n    [name]=\"name\"\n    [label]=\"label\"\n    [elements]=\"elements\"\n    [elementsUrl]=\"elementsUrl\"\n    [elementValue]=\"elementValue\"\n    [elementLabel]=\"elementLabel\"\n    [elementSuggestionLabel]=\"elementSuggestionLabel\"\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    [showErrorWhenDisabled]=\"showErrorWhenDisabled\"\n    [hideNotRequiredExtraLabel]=\"hideNotRequiredExtraLabel\"\n    [itemHeightInSuggestionListInPx]=\"itemHeightInSuggestionListInPx\"\n>\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId('Help')\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"\n            helpText\n                ? helpText\n                : ('foehn-multiselect-autocomplete.autocomplete.screen-reader.label'\n                  | fromDictionary)\n        \"\n    ></small>\n\n    <div\n        [id]=\"buildChildId('AlertMessageContainer')\"\n        role=\"status\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info mb-0\"\n            tabindex=\"0\"\n        >\n            {{\n                'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                    | fromDictionary\n            }}\n        </p>\n    </div>\n</foehn-autocomplete>\n\n<p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ srAnnouncements }}\n</p>\n\n<div\n    class=\"form-group selected-list-container d-flex align-content-stretch flex-wrap\"\n    [ngClass]=\"!!model && !!model.length ? 'pt-2' : 'pt-0'\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    tabindex=\"-1\"\n>\n    <span\n        *ngIf=\"hasDefaultDeleteFocusArea()\"\n        class=\"sr-only\"\n        [tabindex]=\"0\"\n        [innerHTML]=\"\n            'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete'\n                | fromDictionary\n        \"\n        #defaultDeleteFocusArea\n    ></span>\n    <ng-container\n        *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n    >\n        <span\n            *ngIf=\"!canBeDeleted(index)\"\n            class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            #defaultElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <span class=\"sr-only\">\n                {{\n                    'foehn-multiselect-autocomplete.sr-default-selected-element'\n                        | fromDictionary\n                }}\n            </span>\n        </span>\n        <button\n            *ngIf=\"canBeDeleted(index)\"\n            class=\"btn btn-danger badge badge-pill mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"0\"\n            [attr.aria-label]=\"getDeleteButtonAriaLabel(element)\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            [title]=\"getDeleteButtonAriaLabel(element)\"\n            (click)=\"removeItem(element, index)\"\n            #selectedElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <foehn-icon-times\n                aria-hidden=\"true\"\n                class=\"ml-2\"\n                [title]=\"getDeleteButtonAriaLabel(element)\"\n            ></foehn-icon-times>\n        </button>\n    </ng-container>\n</div>\n", styles: ["foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}:host ::ng-deep foehn-autocomplete .form-group{margin-bottom:0!important}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa{color:#fff!important}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}\n"], components: [{ type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator", "itemHeightInSuggestionListInPx", "elementSuggestionLabel"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-multiselect-autocomplete', providers: [
@@ -9357,7 +9376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
                             multi: true
                         }
-                    ], 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    [showErrorWhenDisabled]=\"showErrorWhenDisabled\"\n    [hideNotRequiredExtraLabel]=\"hideNotRequiredExtraLabel\"\n    [itemHeightInSuggestionListInPx]=\"itemHeightInSuggestionListInPx\"\n>\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId('Help')\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"\n            helpText\n                ? helpText\n                : ('foehn-multiselect-autocomplete.autocomplete.screen-reader.label'\n                  | fromDictionary)\n        \"\n    ></small>\n\n    <div\n        [id]=\"buildChildId('AlertMessageContainer')\"\n        role=\"status\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info mb-0\"\n            tabindex=\"0\"\n        >\n            {{\n                'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                    | fromDictionary\n            }}\n        </p>\n    </div>\n</foehn-autocomplete>\n\n<p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ srAnnouncements }}\n</p>\n\n<div\n    class=\"form-group selected-list-container d-flex align-content-stretch flex-wrap\"\n    [ngClass]=\"!!model && !!model.length ? 'pt-2' : 'pt-0'\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    tabindex=\"-1\"\n>\n    <span\n        *ngIf=\"hasDefaultDeleteFocusArea()\"\n        class=\"sr-only\"\n        [tabindex]=\"0\"\n        [innerHTML]=\"\n            'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete'\n                | fromDictionary\n        \"\n        #defaultDeleteFocusArea\n    ></span>\n    <ng-container\n        *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n    >\n        <span\n            *ngIf=\"!canBeDeleted(index)\"\n            class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            #defaultElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <span class=\"sr-only\">\n                {{\n                    'foehn-multiselect-autocomplete.sr-default-selected-element'\n                        | fromDictionary\n                }}\n            </span>\n        </span>\n        <button\n            *ngIf=\"canBeDeleted(index)\"\n            class=\"btn btn-danger badge badge-pill mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"0\"\n            [attr.aria-label]=\"getDeleteButtonAriaLabel(element)\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            [title]=\"getDeleteButtonAriaLabel(element)\"\n            (click)=\"removeItem(element, index)\"\n            #selectedElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <foehn-icon-times\n                aria-hidden=\"true\"\n                class=\"ml-2\"\n                [title]=\"getDeleteButtonAriaLabel(element)\"\n            ></foehn-icon-times>\n        </button>\n    </ng-container>\n</div>\n", styles: ["foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}:host ::ng-deep foehn-autocomplete .form-group{margin-bottom:0!important}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa{color:#fff!important}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}\n"] }]
+                    ], template: "<foehn-autocomplete\n    #autocompleteComponent\n    [name]=\"name\"\n    [label]=\"label\"\n    [elements]=\"elements\"\n    [elementsUrl]=\"elementsUrl\"\n    [elementValue]=\"elementValue\"\n    [elementLabel]=\"elementLabel\"\n    [elementSuggestionLabel]=\"elementSuggestionLabel\"\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    [showErrorWhenDisabled]=\"showErrorWhenDisabled\"\n    [hideNotRequiredExtraLabel]=\"hideNotRequiredExtraLabel\"\n    [itemHeightInSuggestionListInPx]=\"itemHeightInSuggestionListInPx\"\n>\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId('Help')\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"\n            helpText\n                ? helpText\n                : ('foehn-multiselect-autocomplete.autocomplete.screen-reader.label'\n                  | fromDictionary)\n        \"\n    ></small>\n\n    <div\n        [id]=\"buildChildId('AlertMessageContainer')\"\n        role=\"status\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info mb-0\"\n            tabindex=\"0\"\n        >\n            {{\n                'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                    | fromDictionary\n            }}\n        </p>\n    </div>\n</foehn-autocomplete>\n\n<p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    {{ srAnnouncements }}\n</p>\n\n<div\n    class=\"form-group selected-list-container d-flex align-content-stretch flex-wrap\"\n    [ngClass]=\"!!model && !!model.length ? 'pt-2' : 'pt-0'\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    tabindex=\"-1\"\n>\n    <span\n        *ngIf=\"hasDefaultDeleteFocusArea()\"\n        class=\"sr-only\"\n        [tabindex]=\"0\"\n        [innerHTML]=\"\n            'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete'\n                | fromDictionary\n        \"\n        #defaultDeleteFocusArea\n    ></span>\n    <ng-container\n        *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n    >\n        <span\n            *ngIf=\"!canBeDeleted(index)\"\n            class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            #defaultElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <span class=\"sr-only\">\n                {{\n                    'foehn-multiselect-autocomplete.sr-default-selected-element'\n                        | fromDictionary\n                }}\n            </span>\n        </span>\n        <button\n            *ngIf=\"canBeDeleted(index)\"\n            class=\"btn btn-danger badge badge-pill mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"0\"\n            [attr.aria-label]=\"getDeleteButtonAriaLabel(element)\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            [title]=\"getDeleteButtonAriaLabel(element)\"\n            (click)=\"removeItem(element, index)\"\n            #selectedElemRef\n        >\n            {{ getBadgeLabel(element) }}\n            <foehn-icon-times\n                aria-hidden=\"true\"\n                class=\"ml-2\"\n                [title]=\"getDeleteButtonAriaLabel(element)\"\n            ></foehn-icon-times>\n        </button>\n    </ng-container>\n</div>\n", styles: ["foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}:host ::ng-deep foehn-autocomplete .form-group{margin-bottom:0!important}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa{color:#fff!important}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: SdkDictionaryService }]; }, propDecorators: { hostName: [{
                 type: HostBinding,
                 args: ['attr.name']