@dsivd/prestations-ng 19.0.8 → 19.1.0-beta.1

package/UPGRADING_V19.md

@@ -67,6 +67,17 @@ And replace the old `AutoConfigureMockMvc` import, which is not recognized anymo
 If you use Spring/Hibernate dependencies in `pom.xml` (like `hibernate-jpamodelgen`), check the Spring Boot 4 migration
 guide to see if it has been replaced by another library: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-4.0-Migration-Guide
 
+### LDAP
+
+if you use ldap, you should replace `spring-ldap-core` by `spring-boot-starter-ldap` in your `pom.xml` to maintain the LDAP health indicator.
+
+```xml
+<dependency>
+    <groupId>org.springframework.boot</groupId>
+    <artifactId>spring-boot-starter-ldap</artifactId>
+</dependency>
+```
+
 ### Jackson migration
 
 With Spring Boot 4, Jackson 3 is now used instead of Jackson 2, so we need to replace the previous Jackson 2 classes.
@@ -917,7 +928,7 @@ rm karma.conf.js
 Then run the following command to migrate from jasmine to vitest:
 
 ```bash
-ng g @schematics/angular:refactor-jasmine-vitest
+ng g @schematics/angular:refactor-jasmine-vitest --no-report
 ```
 
 Now you can run your tests with `npm test` and check that everything is up and running.
@@ -1449,3 +1460,8 @@ See [getImtPortailApplications](https://dsigit.etat-de-vaud.ch/outils/git/projec
 +       'node'   : '22'
 ],
 ```
+
+## RENOVATE BOT
+
+Enroll your project in Renovate bot to automatically update your dependencies.
+See [Mend Renovate CE](https://dgnsiwiki.etat-de-vaud.ch/outils/dgnsiwiki/x/7QFDgg) for more information.

package/fesm2022/dsivd-prestations-ng.mjs

@@ -1336,6 +1336,7 @@ const DEFAULT_DICTIONARY = {
     'foehn-picture-upload.selection-not-validated-label': 'Merci de valider votre sélection',
     'foehn-picture-upload.delete-picture-label': 'Supprimer',
     'foehn-select.no-selection.label': '-',
+    'foehn-checkable-group.missing-value.warning': 'La valeur enregistrée « {value} » n’existe plus dans la liste des choix possibles.',
     'foehn-table.totalElements': '{total} éléments trouvés',
     'foehn-table.totalElements.1': '1 élément trouvé',
     'foehn-table.totalElements.0': 'Aucun résultat',
@@ -3951,17 +3952,18 @@ class GesdemConfirmationComponent {
         if (lastResponse) {
             this.reference.set(lastResponse.meta.reference);
             this.actionStatut.set(ActionStatut[lastResponse.meta.statut]);
-            this.urlPdf = this.baseUrlPdf() + this.reference();
             const currentAction = lastResponse.meta.currentAction;
+            let fullReference = this.reference();
             if (!!currentAction) {
-                this.urlPdf += `-${currentAction}`;
+                fullReference = `${this.reference()}-${currentAction}`;
                 if (this.location.path().includes(`/${this.reference()}/`)) {
                     const fullReferenceUrl = this.location
                         .path()
-                        .replace(this.reference(), `${this.reference()}-${currentAction}`);
+                        .replace(this.reference(), fullReference);
                     this.location.replaceState(fullReferenceUrl);
                 }
             }
+            this.urlPdf = this.buildPdfRecapUrl(fullReference);
             const languageCode = lastResponse.form.language;
             this.dictionaryService.changeLanguage(languageCode);
         }
@@ -3998,6 +4000,13 @@ class GesdemConfirmationComponent {
     gotToTop() {
         window.scrollTo(0, 0);
     }
+    buildPdfRecapUrl(fullReference) {
+        const applicationKey = this.gesdemService.prefix;
+        if (applicationKey) {
+            return `api/document/${applicationKey}/pdf/${fullReference}`;
+        }
+        return this.baseUrlPdf() + fullReference;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: GesdemConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: GesdemConfirmationComponent, isStandalone: true, selector: "gesdem-confirmation", inputs: { reference: { classPropertyName: "reference", publicName: "reference", isSignal: true, isRequired: false, transformFunction: null }, hasEmailSent: { classPropertyName: "hasEmailSent", publicName: "hasEmailSent", isSignal: true, isRequired: false, transformFunction: null }, showDownloadPdfRecapButton: { classPropertyName: "showDownloadPdfRecapButton", publicName: "showDownloadPdfRecapButton", isSignal: true, isRequired: false, transformFunction: null }, showLinkToMyDemandes: { classPropertyName: "showLinkToMyDemandes", publicName: "showLinkToMyDemandes", isSignal: true, isRequired: false, transformFunction: null }, demandeIsClosedOnTransmit: { classPropertyName: "demandeIsClosedOnTransmit", publicName: "demandeIsClosedOnTransmit", isSignal: true, isRequired: false, transformFunction: null }, actionStatut: { classPropertyName: "actionStatut", publicName: "actionStatut", isSignal: true, isRequired: false, transformFunction: null }, connectedConfirmationMessage: { classPropertyName: "connectedConfirmationMessage", publicName: "connectedConfirmationMessage", isSignal: true, isRequired: false, transformFunction: null }, connectedConfirmationMessageIfAbandoned: { classPropertyName: "connectedConfirmationMessageIfAbandoned", publicName: "connectedConfirmationMessageIfAbandoned", isSignal: true, isRequired: false, transformFunction: null }, downloadPdfRecapButtonText: { classPropertyName: "downloadPdfRecapButtonText", publicName: "downloadPdfRecapButtonText", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null }, closeButtonConnectedText: { classPropertyName: "closeButtonConnectedText", publicName: "closeButtonConnectedText", isSignal: true, isRequired: false, transformFunction: null }, baseUrlPdf: { classPropertyName: "baseUrlPdf", publicName: "baseUrlPdf", isSignal: true, isRequired: false, transformFunction: null }, hideReference: { classPropertyName: "hideReference", publicName: "hideReference", isSignal: true, isRequired: false, transformFunction: null }, hideFeedbackNotificationOverride: { classPropertyName: "hideFeedbackNotificationOverride", publicName: "hideFeedbackNotificationOverride", isSignal: true, isRequired: false, transformFunction: null }, successLabelDicoKeyFirstStep: { classPropertyName: "successLabelDicoKeyFirstStep", publicName: "successLabelDicoKeyFirstStep", isSignal: true, isRequired: false, transformFunction: null }, successLabelDicoAdditionalSteps: { classPropertyName: "successLabelDicoAdditionalSteps", publicName: "successLabelDicoAdditionalSteps", isSignal: true, isRequired: false, transformFunction: null }, closeHref: { classPropertyName: "closeHref", publicName: "closeHref", isSignal: true, isRequired: false, transformFunction: null }, closeHrefConnected: { classPropertyName: "closeHrefConnected", publicName: "closeHrefConnected", isSignal: true, isRequired: false, transformFunction: null }, setPageTitle: { classPropertyName: "setPageTitle", publicName: "setPageTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reference: "referenceChange", hasEmailSent: "hasEmailSentChange", showDownloadPdfRecapButton: "showDownloadPdfRecapButtonChange", showLinkToMyDemandes: "showLinkToMyDemandesChange", demandeIsClosedOnTransmit: "demandeIsClosedOnTransmitChange", actionStatut: "actionStatutChange", connectedConfirmationMessage: "connectedConfirmationMessageChange", connectedConfirmationMessageIfAbandoned: "connectedConfirmationMessageIfAbandonedChange", downloadPdfRecapButtonText: "downloadPdfRecapButtonTextChange", closeButtonText: "closeButtonTextChange", closeButtonConnectedText: "closeButtonConnectedTextChange", baseUrlPdf: "baseUrlPdfChange", hideReference: "hideReferenceChange", hideFeedbackNotificationOverride: "hideFeedbackNotificationOverrideChange", successLabelDicoKeyFirstStep: "successLabelDicoKeyFirstStepChange", successLabelDicoAdditionalSteps: "successLabelDicoAdditionalStepsChange" }, usesOnChanges: true, ngImport: i0, template: "@if (reference() && !isInProgress) {\n    <div class=\"container mt-5\">\n        <div\n            [id]=\"'main-summary'\"\n            class=\"alert text-center mb-2\"\n            [class.alert-success]=\"isTransferred\"\n            [class.alert-danger]=\"!isTransferred\"\n        >\n            <p class=\"h2\">\n                {{\n                    isTransferred\n                        ? (successLabelDicoKey | fromDictionary)\n                        : ('gesdem-confirmation.abort-label' | fromDictionary)\n                }}\n            </p>\n            @if (!hideReference()) {\n                <dl>\n                    <dt class=\"fw-light\">\n                        {{\n                            'gesdem-confirmation.reference-title.label'\n                                | fromDictionary\n                        }}\n                    </dt>\n                    <dd id=\"numDemande\" class=\"h4 d-block mt-3\">\n                        {{ reference() }}\n                    </dd>\n                </dl>\n            }\n            @if (hasEmailSent() && !(isConnectedCyber | async)) {\n                <p>\n                    {{ 'gesdem-confirmation.mail-sent.label' | fromDictionary }}\n                </p>\n            }\n        </div>\n        <span\n            [innerHTML]=\"'gesdem-confirmation.extra-content' | fromDictionary\"\n        ></span>\n        <ng-content />\n        @if ((isConnectedCyber | async) && hasConnectedContent()) {\n            <div class=\"col-md-12 vd-highlight highlight-dark\">\n                <span\n                    class=\"visually-hidden\"\n                    [innerHTML]=\"\n                        'gesdem-confirmation.transmission-information.label'\n                            | fromDictionary\n                    \"\n                ></span>\n                <div class=\"row\">\n                    <div class=\"col-md-1\">\n                        <foehn-icon-info-circle class=\"h3\" />\n                    </div>\n                    <div class=\"col-md-11\">\n                        <p\n                            [innerHTML]=\"\n                                (isTransferred\n                                    ? connectedConfirmationMessage()\n                                    : connectedConfirmationMessageIfAbandoned()\n                                ) | fromDictionary\n                            \"\n                        ></p>\n                        @if (\n                            showLinkToMyDemandes() &&\n                            (demandeIsClosedOnTransmit() || isAbandoned)\n                        ) {\n                            <p id=\"linkToTreatedDemandes\">\n                                {{\n                                    'gesdem-confirmation.demand-detail-link.label'\n                                        | fromDictionary\n                                }}\n                                <a\n                                    href=\"/100002/demandes/{{ reference() }}\"\n                                    [attr.aria-label]=\"\n                                        'gesdem-demand-detail'\n                                            | fromDictionary\n                                                : { reference: reference() }\n                                    \"\n                                    [innerHTML]=\"reference()\"\n                                ></a>\n                                .\n                            </p>\n                        }\n                        @if (\n                            showLinkToMyDemandes() &&\n                            !demandeIsClosedOnTransmit() &&\n                            !isAbandoned\n                        ) {\n                            <p id=\"linkToInProgressDemandes\">\n                                {{\n                                    'gesdem-confirmation.demand-processing-progress-link.label'\n                                        | fromDictionary\n                                }}\n                                <a\n                                    href=\"/100002/demandes/{{ reference() }}\"\n                                    [attr.aria-label]=\"\n                                        'gesdem-demand-detail'\n                                            | fromDictionary\n                                                : { reference: reference() }\n                                    \"\n                                    [innerHTML]=\"reference()\"\n                                ></a>\n                                .\n                            </p>\n                        }\n                    </div>\n                </div>\n            </div>\n        }\n        <div class=\"col-md-12 list-unstyled d-md-flex p-0 mt-4\">\n            <div class=\"ms-0 me-md-auto me-md-2 mb-2 mt-2\">\n                @if (showDownloadPdfRecapButton()) {\n                    <a\n                        [href]=\"urlPdf\"\n                        (click)=\"logPdfDownloadedEvent()\"\n                        id=\"telechargerBtn\"\n                        class=\"btn btn-secondary w-100\"\n                        [attr.aria-label]=\"\n                            'gesdem.download-pdf.button.title' | fromDictionary\n                        \"\n                    >\n                        {{ downloadPdfRecapButtonText() | fromDictionary }}\n                    </a>\n                }\n            </div>\n            @if (\n                !(isConnectedCyber | async) && closeLinkNotConnected | async;\n                as link\n            ) {\n                <div class=\"me-0 ms-md-auto mb-2 mt-2\">\n                    <a\n                        [href]=\"link\"\n                        id=\"terminerBtn\"\n                        class=\"btn btn-primary w-100\"\n                    >\n                        {{ closeButtonText() | fromDictionary }}\n                    </a>\n                </div>\n            }\n            @if (\n                !!(isConnectedCyber | async) && closeLinkConnected | async;\n                as link\n            ) {\n                <div class=\"me-0 ms-md-auto mb-2 mt-2\">\n                    <a\n                        [href]=\"link\"\n                        id=\"terminerConnectedBtn\"\n                        class=\"btn btn-primary w-100\"\n                    >\n                        {{ closeButtonConnectedText() | fromDictionary }}\n                    </a>\n                </div>\n            }\n        </div>\n    </div>\n}\n\n@if (!hideReference() && reference() && isInProgress) {\n    <div class=\"container mt-5\">\n        <div class=\"alert alert-info text-center mb-2\">\n            <p\n                class=\"h2\"\n                [innerHTML]=\"\n                    'gesdem-confirmation.demand-in-progress.title'\n                        | fromDictionary\n                \"\n            ></p>\n            <dl>\n                <dt class=\"fw-light\">\n                    {{\n                        'gesdem-confirmation.reference-title.label'\n                            | fromDictionary\n                    }}\n                </dt>\n                <dd id=\"numDemandeEnCours\" class=\"h4 d-block mt-3\">\n                    {{ reference() }}\n                </dd>\n            </dl>\n        </div>\n        <div class=\"col-md-12 vd-highlight highlight-dark\">\n            <div class=\"row\">\n                <div class=\"col-md-1\">\n                    <foehn-icon-info-circle class=\"h3\" />\n                </div>\n                <div class=\"col-md-11\">\n                    <p>\n                        {{\n                            'gesdem-confirmation.resume-my-demand.label'\n                                | fromDictionary\n                        }}\n                    </p>\n                    <p>\n                        <a [routerLink]=\"firstPageLink\">\n                            {{\n                                'gesdem-confirmation.resume-my-demand.button'\n                                    | fromDictionary\n                            }}\n                        </a>\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n}\n\n@if (!hideFeedbackNotificationOverride()) {\n    <foehn-feedback-notification [id]=\"'feedbackNotification'\" />\n}\n", dependencies: [{ kind: "component", type: FoehnIconInfoCircleComponent, selector: "foehn-icon-info-circle" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FoehnFeedbackNotificationComponent, selector: "foehn-feedback-notification" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
@@ -5855,6 +5864,28 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         this.autocomplete = input('off', { ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), transform: () => 'off' });
         this.defaultElementValue = input(...(ngDevMode ? [undefined, { debugName: "defaultElementValue" }] : /* istanbul ignore next */ []));
         this.elementsLoaded = output();
+        /**
+         * Values stored in the model that are no longer present in the list of
+         * elements (e.g. a locality that has been removed from the reference data).
+         * Used to warn the user that a previously saved value no longer exists.
+         */
+        this.missingModelValues = computed(() => {
+            const elements = this.elements();
+            const modelValue = this.model();
+            // Elements not loaded yet, empty model, or detection disabled by a
+            // subclass (e.g. autocomplete accepting custom / dynamic values):
+            // nothing can be considered missing.
+            if (!elements ||
+                this.isEmpty(modelValue) ||
+                !this.detectMissingModelValues()) {
+                return [];
+            }
+            const modelValues = this.multiple()
+                ? (modelValue ?? [])
+                : [modelValue];
+            return modelValues.filter((value) => !this.isEmpty(value) && !this.isValueInElements(value));
+        }, ...(ngDevMode ? [{ debugName: "missingModelValues" }] : /* istanbul ignore next */ []));
+        this.hasMissingModelValue = computed(() => this.missingModelValues().length > 0, ...(ngDevMode ? [{ debugName: "hasMissingModelValue" }] : /* istanbul ignore next */ []));
         this.httpClient = inject(HttpClient);
         this.multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         this.ngZone = inject(NgZone);
@@ -5963,6 +5994,27 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
             this.model.set(null);
         }
     }
+    /**
+     * Builds a human readable representation of a model value that is no longer
+     * present in the list of elements.
+     */
+    getMissingValueLabel(value) {
+        if (this.isEmpty(value)) {
+            return '';
+        }
+        if (typeof value === 'object') {
+            const label = this.getLabel(value);
+            if (!this.isEmpty(label)) {
+                return label;
+            }
+            const nestedValue = this.getValue(value);
+            if (!this.isEmpty(nestedValue)) {
+                return `${nestedValue}`;
+            }
+            return JSON.stringify(value);
+        }
+        return `${value}`;
+    }
     isElementSelected(element) {
         const value = this.getValue(element);
         if (this.multiple()) {
@@ -5991,6 +6043,19 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         }
         throw new Error('findIndexInModel cannot be used when this.multiple() is false !');
     }
+    isValueInElements(value) {
+        const elements = this.elements() ?? [];
+        return elements.some((element) => this.areValuesEquals(this.getValue(element), value));
+    }
+    /**
+     * Whether values absent from the list of elements should be reported as
+     * "missing". `true` by default (select, radio, checkbox). Overridden by
+     * components where an absent value can be legitimate — e.g. an autocomplete
+     * accepting custom values or fed by a dynamic suggestion list.
+     */
+    detectMissingModelValues() {
+        return true;
+    }
     areValuesEquals(value1, value2) {
         // Get an option way to compare the value from the model.
         // This allows us to properly use an object as the model rather
@@ -6158,7 +6223,7 @@ class FoehnSelectComponent extends FoehnCheckableGroupComponent {
                 provide: FoehnInputComponent,
                 useExisting: forwardRef(() => FoehnSelectComponent),
             },
-        ], 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        @if (!!label()) {\n            <label\n                [class]=\"\n                    'form-label ' +\n                    (isLabelSrOnly()\n                        ? 'visually-hidden'\n                        : (labelStyleModifier() ?? ''))\n                \"\n                [attr.for]=\"buildChildId()\"\n            >\n                <span [innerHTML]=\"label()\"></span>\n                @if (!required() && !hideNotRequiredExtraLabel()) {\n                    <span aria-hidden=\"true\">\n                        {{ 'foehn-input.optional' | fromDictionary }}\n                    </span>\n                }\n            </label>\n        }\n        @if (!!helpModal()) {\n            <foehn-help-modal\n                class=\"removePaddingButton\"\n                [modalContent]=\"helpModal()\"\n            />\n        }\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\" />\n\n    @if (!elements()) {\n        <div>Chargement...</div>\n    }\n\n    @if (helpText()) {\n        <small\n            [attr.id]=\"buildChildId() + 'Help'\"\n            class=\"form-text text-secondary\"\n            [innerHTML]=\"helpText()\"\n        ></small>\n    }\n\n    <ng-content />\n\n    @if (!multiple()) {\n        <select\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @if (showEmptyOption()) {\n                <option [ngValue]=\"null\">\n                    <!-- empty option displayed even if required=true as long as there's no model to fix https://github.com/angular/angular/issues/14505 -->\n                </option>\n            }\n            @if (!required()) {\n                <option [ngValue]=\"null\">\n                    {{ noSelectionLabel() | fromDictionary }}\n                </option>\n            }\n            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n    @if (multiple()) {\n        <select\n            multiple\n            [attr.aria-multiselectable]=\"true\"\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [attr.aria-selected]=\"isElementSelected(element)\"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n</div>\n", styles: [".form-group select{appearance:none}\n"], dependencies: [{ kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent", "draggable", "hideable"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], 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        @if (!!label()) {\n            <label\n                [class]=\"\n                    'form-label ' +\n                    (isLabelSrOnly()\n                        ? 'visually-hidden'\n                        : (labelStyleModifier() ?? ''))\n                \"\n                [attr.for]=\"buildChildId()\"\n            >\n                <span [innerHTML]=\"label()\"></span>\n                @if (!required() && !hideNotRequiredExtraLabel()) {\n                    <span aria-hidden=\"true\">\n                        {{ 'foehn-input.optional' | fromDictionary }}\n                    </span>\n                }\n            </label>\n        }\n        @if (!!helpModal()) {\n            <foehn-help-modal\n                class=\"removePaddingButton\"\n                [modalContent]=\"helpModal()\"\n            />\n        }\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\" />\n\n    @if (hasMissingModelValue()) {\n        @for (missingValue of missingModelValues(); track $index) {\n            <p\n                class=\"alert alert-warning\"\n                role=\"alert\"\n                [attr.id]=\"buildId('MissingValue') + $index\"\n            >\n                {{\n                    'foehn-checkable-group.missing-value.warning'\n                        | fromDictionary\n                            : { value: getMissingValueLabel(missingValue) }\n                }}\n            </p>\n        }\n    }\n\n    @if (!elements()) {\n        <div>Chargement...</div>\n    }\n\n    @if (helpText()) {\n        <small\n            [attr.id]=\"buildChildId() + 'Help'\"\n            class=\"form-text text-secondary\"\n            [innerHTML]=\"helpText()\"\n        ></small>\n    }\n\n    <ng-content />\n\n    @if (!multiple()) {\n        <select\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @if (showEmptyOption()) {\n                <option [ngValue]=\"null\">\n                    <!-- empty option displayed even if required=true as long as there's no model to fix https://github.com/angular/angular/issues/14505 -->\n                </option>\n            }\n            @if (!required()) {\n                <option [ngValue]=\"null\">\n                    {{ noSelectionLabel() | fromDictionary }}\n                </option>\n            }\n            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n    @if (multiple()) {\n        <select\n            multiple\n            [attr.aria-multiselectable]=\"true\"\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [attr.aria-selected]=\"isElementSelected(element)\"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n</div>\n", styles: [".form-group select{appearance:none}\n"], dependencies: [{ kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent", "draggable", "hideable"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FoehnSelectComponent, decorators: [{
             type: Component,
@@ -6172,7 +6237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                         FoehnValidationAlertsComponent,
                         FormsModule,
                         SdkDictionaryPipe,
-                    ], 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        @if (!!label()) {\n            <label\n                [class]=\"\n                    'form-label ' +\n                    (isLabelSrOnly()\n                        ? 'visually-hidden'\n                        : (labelStyleModifier() ?? ''))\n                \"\n                [attr.for]=\"buildChildId()\"\n            >\n                <span [innerHTML]=\"label()\"></span>\n                @if (!required() && !hideNotRequiredExtraLabel()) {\n                    <span aria-hidden=\"true\">\n                        {{ 'foehn-input.optional' | fromDictionary }}\n                    </span>\n                }\n            </label>\n        }\n        @if (!!helpModal()) {\n            <foehn-help-modal\n                class=\"removePaddingButton\"\n                [modalContent]=\"helpModal()\"\n            />\n        }\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\" />\n\n    @if (!elements()) {\n        <div>Chargement...</div>\n    }\n\n    @if (helpText()) {\n        <small\n            [attr.id]=\"buildChildId() + 'Help'\"\n            class=\"form-text text-secondary\"\n            [innerHTML]=\"helpText()\"\n        ></small>\n    }\n\n    <ng-content />\n\n    @if (!multiple()) {\n        <select\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @if (showEmptyOption()) {\n                <option [ngValue]=\"null\">\n                    <!-- empty option displayed even if required=true as long as there's no model to fix https://github.com/angular/angular/issues/14505 -->\n                </option>\n            }\n            @if (!required()) {\n                <option [ngValue]=\"null\">\n                    {{ noSelectionLabel() | fromDictionary }}\n                </option>\n            }\n            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n    @if (multiple()) {\n        <select\n            multiple\n            [attr.aria-multiselectable]=\"true\"\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [attr.aria-selected]=\"isElementSelected(element)\"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n</div>\n", styles: [".form-group select{appearance:none}\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        @if (!!label()) {\n            <label\n                [class]=\"\n                    'form-label ' +\n                    (isLabelSrOnly()\n                        ? 'visually-hidden'\n                        : (labelStyleModifier() ?? ''))\n                \"\n                [attr.for]=\"buildChildId()\"\n            >\n                <span [innerHTML]=\"label()\"></span>\n                @if (!required() && !hideNotRequiredExtraLabel()) {\n                    <span aria-hidden=\"true\">\n                        {{ 'foehn-input.optional' | fromDictionary }}\n                    </span>\n                }\n            </label>\n        }\n        @if (!!helpModal()) {\n            <foehn-help-modal\n                class=\"removePaddingButton\"\n                [modalContent]=\"helpModal()\"\n            />\n        }\n    </div>\n\n    <foehn-validation-alerts [component]=\"this\" />\n\n    @if (hasMissingModelValue()) {\n        @for (missingValue of missingModelValues(); track $index) {\n            <p\n                class=\"alert alert-warning\"\n                role=\"alert\"\n                [attr.id]=\"buildId('MissingValue') + $index\"\n            >\n                {{\n                    'foehn-checkable-group.missing-value.warning'\n                        | fromDictionary\n                            : { value: getMissingValueLabel(missingValue) }\n                }}\n            </p>\n        }\n    }\n\n    @if (!elements()) {\n        <div>Chargement...</div>\n    }\n\n    @if (helpText()) {\n        <small\n            [attr.id]=\"buildChildId() + 'Help'\"\n            class=\"form-text text-secondary\"\n            [innerHTML]=\"helpText()\"\n        ></small>\n    }\n\n    <ng-content />\n\n    @if (!multiple()) {\n        <select\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @if (showEmptyOption()) {\n                <option [ngValue]=\"null\">\n                    <!-- empty option displayed even if required=true as long as there's no model to fix https://github.com/angular/angular/issues/14505 -->\n                </option>\n            }\n            @if (!required()) {\n                <option [ngValue]=\"null\">\n                    {{ noSelectionLabel() | fromDictionary }}\n                </option>\n            }\n            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n    @if (multiple()) {\n        <select\n            multiple\n            [attr.aria-multiselectable]=\"true\"\n            [class.is-invalid]=\"\n                hasErrorsToDisplay() || hasInheritErrorFromParent()\n            \"\n            class=\"form-select\"\n            [name]=\"name() || label()\"\n            [attr.id]=\"buildChildId()\"\n            [disabled]=\"disabled()\"\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            @for (element of elements(); track getValue(element)) {\n                <option\n                    [ngValue]=\"getValue(element)\"\n                    [attr.selected]=\"\n                        isElementSelected(element) ? 'selected' : null\n                    \"\n                    [attr.aria-selected]=\"isElementSelected(element)\"\n                    [disabled]=\"getDisabled(element)\"\n                >\n                    {{ getLabel(element) }}\n                </option>\n            }\n        </select>\n    }\n</div>\n", styles: [".form-group select{appearance:none}\n"] }]
         }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], noSelectionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelectionLabel", required: false }] }] } });
 
 class FoehnDropdownMenuComponent {
@@ -8119,6 +8184,9 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
             });
         }
     }
+    detectMissingModelValues() {
+        return !this.allowCustomValue() && !this.isSuggestionListDynamic();
+    }
     clearOnBlurTimeout() {
         if (this.currentBlurTimer) {
             clearTimeout(this.currentBlurTimer);
@@ -9013,7 +9081,7 @@ class FoehnCheckboxComponent extends FoehnCheckableGroupComponent {
                 provide: FoehnInputComponent,
                 useExisting: forwardRef(() => FoehnCheckboxComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValue(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"checkbox\"\n                            [value]=\"getValue(element)\"\n                            [ngModel]=\"isElementSelected(element)\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName('' + groupIndex + '_' + i)\"\n                            [attr.name]=\"\n                                buildChildName('' + groupIndex + '_' + i)\n                            \"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [disabled]=\"getDisabled(element)\"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(model())\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent", "draggable", "hideable"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (hasMissingModelValue()) {\n            @for (missingValue of missingModelValues(); track $index) {\n                <p\n                    class=\"alert alert-warning\"\n                    role=\"alert\"\n                    [attr.id]=\"buildId('MissingValue') + $index\"\n                >\n                    {{\n                        'foehn-checkable-group.missing-value.warning'\n                            | fromDictionary\n                                : { value: getMissingValueLabel(missingValue) }\n                    }}\n                </p>\n            }\n        }\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValue(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"checkbox\"\n                            [value]=\"getValue(element)\"\n                            [ngModel]=\"isElementSelected(element)\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName('' + groupIndex + '_' + i)\"\n                            [attr.name]=\"\n                                buildChildName('' + groupIndex + '_' + i)\n                            \"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [disabled]=\"getDisabled(element)\"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(model())\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent", "draggable", "hideable"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FoehnCheckboxComponent, decorators: [{
             type: Component,
@@ -9027,7 +9095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                         FoehnValidationAlertsComponent,
                         FormsModule,
                         SdkDictionaryPipe,
-                    ], template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValue(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"checkbox\"\n                            [value]=\"getValue(element)\"\n                            [ngModel]=\"isElementSelected(element)\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName('' + groupIndex + '_' + i)\"\n                            [attr.name]=\"\n                                buildChildName('' + groupIndex + '_' + i)\n                            \"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [disabled]=\"getDisabled(element)\"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(model())\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n" }]
+                    ], template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (hasMissingModelValue()) {\n            @for (missingValue of missingModelValues(); track $index) {\n                <p\n                    class=\"alert alert-warning\"\n                    role=\"alert\"\n                    [attr.id]=\"buildId('MissingValue') + $index\"\n                >\n                    {{\n                        'foehn-checkable-group.missing-value.warning'\n                            | fromDictionary\n                                : { value: getMissingValueLabel(missingValue) }\n                    }}\n                </p>\n            }\n        }\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValue(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"checkbox\"\n                            [value]=\"getValue(element)\"\n                            [ngModel]=\"isElementSelected(element)\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName('' + groupIndex + '_' + i)\"\n                            [attr.name]=\"\n                                buildChildName('' + groupIndex + '_' + i)\n                            \"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [disabled]=\"getDisabled(element)\"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(model())\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n" }]
         }] });
 
 class FoehnRadioComponent extends FoehnCheckableGroupComponent {
@@ -9097,7 +9165,7 @@ class FoehnRadioComponent extends FoehnCheckableGroupComponent {
                 provide: FoehnInputComponent,
                 useExisting: forwardRef(() => FoehnRadioComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValueOrObject(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"radio\"\n                            [value]=\"getValueOrObject(element)\"\n                            [ngModel]=\"inputValue\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName()\"\n                            [attr.name]=\"buildChildName()\"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [attr.disabled]=\"\n                                getDisabled(element) ? 'disabled' : null\n                            \"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(getValue(element))\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent", "draggable", "hideable"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (hasMissingModelValue()) {\n            @for (missingValue of missingModelValues(); track $index) {\n                <p\n                    class=\"alert alert-warning\"\n                    role=\"alert\"\n                    [attr.id]=\"buildId('MissingValue') + $index\"\n                >\n                    {{\n                        'foehn-checkable-group.missing-value.warning'\n                            | fromDictionary\n                                : { value: getMissingValueLabel(missingValue) }\n                    }}\n                </p>\n            }\n        }\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValueOrObject(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"radio\"\n                            [value]=\"getValueOrObject(element)\"\n                            [ngModel]=\"inputValue\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName()\"\n                            [attr.name]=\"buildChildName()\"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [attr.disabled]=\"\n                                getDisabled(element) ? 'disabled' : null\n                            \"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(getValue(element))\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n", dependencies: [{ kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent", "draggable", "hideable"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FoehnRadioComponent, decorators: [{
             type: Component,
@@ -9111,7 +9179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                         FoehnValidationAlertsComponent,
                         FormsModule,
                         SdkDictionaryPipe,
-                    ], template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValueOrObject(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"radio\"\n                            [value]=\"getValueOrObject(element)\"\n                            [ngModel]=\"inputValue\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName()\"\n                            [attr.name]=\"buildChildName()\"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [attr.disabled]=\"\n                                getDisabled(element) ? 'disabled' : null\n                            \"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(getValue(element))\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n" }]
+                    ], template: "<div\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n        <div class=\"d-flex justify-content-between\">\n            @if (!!label()) {\n                <legend\n                    [class.visually-hidden]=\"isLabelSrOnly()\"\n                    [class.vd-p]=\"!isLabelSrOnly()\"\n                >\n                    <span [innerHTML]=\"label()\"></span>\n                    @if (!required() && !hideNotRequiredExtraLabel()) {\n                        <span aria-hidden=\"true\">\n                            {{ 'foehn-input.optional' | fromDictionary }}\n                        </span>\n                    }\n                </legend>\n            }\n            @if (!!helpModal()) {\n                <foehn-help-modal\n                    class=\"removePaddingButton\"\n                    [modalContent]=\"helpModal()\"\n                />\n            }\n        </div>\n\n        <foehn-validation-alerts [component]=\"this\" />\n\n        @if (hasMissingModelValue()) {\n            @for (missingValue of missingModelValues(); track $index) {\n                <p\n                    class=\"alert alert-warning\"\n                    role=\"alert\"\n                    [attr.id]=\"buildId('MissingValue') + $index\"\n                >\n                    {{\n                        'foehn-checkable-group.missing-value.warning'\n                            | fromDictionary\n                                : { value: getMissingValueLabel(missingValue) }\n                    }}\n                </p>\n            }\n        }\n\n        @if (!elements()) {\n            <div>Chargement...</div>\n        }\n\n        @if (helpText()) {\n            <small\n                [attr.id]=\"buildChildId() + 'Help'\"\n                class=\"form-text text-secondary\"\n                [innerHTML]=\"helpText()\"\n            ></small>\n        }\n\n        <ng-content />\n        @for (\n            elementsGroup of groupedElements;\n            track $index;\n            let groupIndex = $index\n        ) {\n            <div>\n                <!-- TODO remove aria-hidden and make this accessible -->\n                @if (!!elementsGroup.groupTitle) {\n                    <div\n                        class=\"pt-2 fw-bold\"\n                        [attr.id]=\"'checkGroup_' + groupIndex\"\n                        aria-hidden=\"true\"\n                    >\n                        {{ elementsGroup.groupTitle | fromDictionary }}\n                    </div>\n                }\n                @for (\n                    element of elementsGroup.elements;\n                    track getValueOrObject(element);\n                    let i = $index\n                ) {\n                    <div\n                        [class.disabled]=\"getDisabled(element)\"\n                        class=\"form-check\"\n                    >\n                        <input\n                            class=\"form-check-input\"\n                            type=\"radio\"\n                            [value]=\"getValueOrObject(element)\"\n                            [ngModel]=\"inputValue\"\n                            (ngModelChange)=\"onCheck(element, $event)\"\n                            [name]=\"buildChildName()\"\n                            [attr.name]=\"buildChildName()\"\n                            [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n                            [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n                            [attr.disabled]=\"\n                                getDisabled(element) ? 'disabled' : null\n                            \"\n                            [attr.autocomplete]=\"getAutoComplete()\"\n                            (change)=\"handleChange(getValue(element))\"\n                        />\n                        <label\n                            class=\"form-check-label mb-0\"\n                            [for]=\"buildChildId() + groupIndex + '_' + i\"\n                            [innerHTML]=\"getLabel(element)\"\n                        ></label>\n                    </div>\n                }\n            </div>\n        }\n    </fieldset>\n</div>\n" }]
         }] });
 
 class FormSelectOption {
@@ -9373,7 +9441,7 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
                 provide: FoehnAutocompleteComponent,
                 useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
             },
-        ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true, isSignal: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true, isSignal: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true, isSignal: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], descendants: true, isSignal: true }, { propertyName: "defaultDeleteFocusArea", first: true, predicate: ["defaultDeleteFocusArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group container-box\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n>\n    <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        [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        [caseSensitiveSearch]=\"caseSensitiveSearch()\"\n        [isLabelSrOnly]=\"isLabelSrOnly()\"\n        [isSuggestionListDynamic]=\"isSuggestionListDynamic()\"\n    >\n        @if (!showEmptyListMessage) {\n            <small\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\n        <ng-content />\n\n        <div\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            role=\"status\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"0\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </div>\n    </foehn-autocomplete>\n\n    <div class=\"selected-list-container pt-2\" tabindex=\"-1\">\n        @if (hasDefaultDeleteFocusArea()) {\n            <small\n                class=\"form-text text-secondary my-0\"\n                [tabindex]=\"0\"\n                [innerHTML]=\"noElementsSelectedLabel() | fromDictionary\"\n                #defaultDeleteFocusArea\n            ></small>\n        }\n\n        <p\n            [id]=\"buildChildId('srOnlyAnnouncements')\"\n            class=\"visually-hidden\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n        >\n            {{ srAnnouncements }}\n        </p>\n\n        @if (!!model()?.length) {\n            <fieldset\n                class=\"mb-0\"\n                [attr.aria-describedby]=\"buildChildId('Label')\"\n            >\n                <legend\n                    [id]=\"buildChildId('Legend')\"\n                    class=\"form-text text-secondary small mb-0\"\n                    [innerHTML]=\"selectedItemsListLegend() | fromDictionary\"\n                ></legend>\n                <div\n                    class=\"selected-list d-flex align-content-stretch flex-wrap\"\n                >\n                    @for (\n                        element of model();\n                        track trackByFn(index);\n                        let index = $index\n                    ) {\n                        @if (!canBeDeleted(index)) {\n                            <span\n                                class=\"badge rounded-pill bg-secondary me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"disabled() ? -1 : 0\"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                #defaultElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <span class=\"visually-hidden\">\n                                    {{\n                                        'foehn-multiselect-autocomplete.sr-default-selected-element'\n                                            | fromDictionary\n                                    }}\n                                </span>\n                            </span>\n                        }\n                        @if (canBeDeleted(index)) {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-primary badge rounded-pill me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"0\"\n                                [attr.aria-label]=\"\n                                    getDeleteButtonAriaLabel(element)\n                                \"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                [title]=\"getDeleteButtonAriaLabel(element)\"\n                                (click)=\"removeItem(element, index)\"\n                                #selectedElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <foehn-icon-times\n                                    aria-hidden=\"true\"\n                                    class=\"ms-2\"\n                                    [title]=\"getDeleteButtonAriaLabel(element)\"\n                                />\n                            </button>\n                        }\n                    }\n                </div>\n            </fieldset>\n        }\n    </div>\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 .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa,:host ::ng-deep .btn a{color:#fff!important}.selected-list-container span.rounded-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}.container-box{border:1px solid #ededed;background-color:#fbfbfb;padding:.5rem}.container-box.vd-form-group-danger{border-left:5px solid var(--vd-danger);padding-left:1rem}:host ::ng-deep foehn-autocomplete div.vd-form-group-danger{border-left:0;padding-left:0}\n"], dependencies: [{ kind: "component", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "isSuggestionListDynamic", "customValueModelGenerator", "itemHeightInSuggestionListInPx", "elementSuggestionLabel", "caseSensitiveSearch"], outputs: ["userSearchInput"] }, { kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
+        ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true, isSignal: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true, isSignal: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true, isSignal: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], descendants: true, isSignal: true }, { propertyName: "defaultDeleteFocusArea", first: true, predicate: ["defaultDeleteFocusArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group container-box\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n>\n    <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        [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        [caseSensitiveSearch]=\"caseSensitiveSearch()\"\n        [isLabelSrOnly]=\"isLabelSrOnly()\"\n        [isSuggestionListDynamic]=\"isSuggestionListDynamic()\"\n    >\n        @if (!showEmptyListMessage) {\n            <small\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\n        <ng-content />\n\n        <div\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            role=\"status\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"0\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </div>\n    </foehn-autocomplete>\n\n    <div class=\"selected-list-container pt-2\" tabindex=\"-1\">\n        @if (hasDefaultDeleteFocusArea()) {\n            <small\n                class=\"form-text text-secondary my-0\"\n                [tabindex]=\"0\"\n                [innerHTML]=\"noElementsSelectedLabel() | fromDictionary\"\n                #defaultDeleteFocusArea\n            ></small>\n        }\n\n        <p\n            [id]=\"buildChildId('srOnlyAnnouncements')\"\n            class=\"visually-hidden\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n        >\n            {{ srAnnouncements }}\n        </p>\n\n        @if (!!model()?.length) {\n            <fieldset\n                class=\"mb-0\"\n                [attr.aria-describedby]=\"buildChildId('Label')\"\n            >\n                <legend\n                    [id]=\"buildChildId('Legend')\"\n                    class=\"form-text text-secondary small mb-0\"\n                    [innerHTML]=\"selectedItemsListLegend() | fromDictionary\"\n                ></legend>\n                <div\n                    class=\"selected-list d-flex align-content-stretch flex-wrap\"\n                >\n                    @for (\n                        element of model();\n                        track trackByFn(index);\n                        let index = $index\n                    ) {\n                        @if (!canBeDeleted(index)) {\n                            <span\n                                class=\"badge rounded-pill bg-secondary me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"disabled() ? -1 : 0\"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                #defaultElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <span class=\"visually-hidden\">\n                                    {{\n                                        'foehn-multiselect-autocomplete.sr-default-selected-element'\n                                            | fromDictionary\n                                    }}\n                                </span>\n                            </span>\n                        }\n                        @if (canBeDeleted(index)) {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-primary badge rounded-pill me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"0\"\n                                [attr.aria-label]=\"\n                                    getDeleteButtonAriaLabel(element)\n                                \"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                [title]=\"getDeleteButtonAriaLabel(element)\"\n                                (click)=\"removeItem(element, index)\"\n                                #selectedElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <foehn-icon-times\n                                    aria-hidden=\"true\"\n                                    class=\"ms-2\"\n                                    [title]=\"getDeleteButtonAriaLabel(element)\"\n                                />\n                            </button>\n                        }\n                    }\n                </div>\n            </fieldset>\n        }\n    </div>\n\n    @if (hasMissingModelValue()) {\n        @for (missingValue of missingModelValues(); track $index) {\n            <p\n                class=\"alert alert-warning\"\n                role=\"alert\"\n                [attr.id]=\"buildId('MissingValue') + $index\"\n            >\n                {{\n                    'foehn-checkable-group.missing-value.warning'\n                        | fromDictionary\n                            : { value: getMissingValueLabel(missingValue) }\n                }}\n            </p>\n        }\n    }\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 .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa,:host ::ng-deep .btn a{color:#fff!important}.selected-list-container span.rounded-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}.container-box{border:1px solid #ededed;background-color:#fbfbfb;padding:.5rem}.container-box.vd-form-group-danger{border-left:5px solid var(--vd-danger);padding-left:1rem}:host ::ng-deep foehn-autocomplete div.vd-form-group-danger{border-left:0;padding-left:0}\n"], dependencies: [{ kind: "component", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "isSuggestionListDynamic", "customValueModelGenerator", "itemHeightInSuggestionListInPx", "elementSuggestionLabel", "caseSensitiveSearch"], outputs: ["userSearchInput"] }, { kind: "component", type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, decorators: [{
             type: Component,
@@ -9392,7 +9460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
                         SdkDictionaryPipe,
                     ], host: {
                         '[attr.name]': 'hostName',
-                    }, template: "<div\n    class=\"form-group container-box\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n>\n    <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        [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        [caseSensitiveSearch]=\"caseSensitiveSearch()\"\n        [isLabelSrOnly]=\"isLabelSrOnly()\"\n        [isSuggestionListDynamic]=\"isSuggestionListDynamic()\"\n    >\n        @if (!showEmptyListMessage) {\n            <small\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\n        <ng-content />\n\n        <div\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            role=\"status\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"0\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </div>\n    </foehn-autocomplete>\n\n    <div class=\"selected-list-container pt-2\" tabindex=\"-1\">\n        @if (hasDefaultDeleteFocusArea()) {\n            <small\n                class=\"form-text text-secondary my-0\"\n                [tabindex]=\"0\"\n                [innerHTML]=\"noElementsSelectedLabel() | fromDictionary\"\n                #defaultDeleteFocusArea\n            ></small>\n        }\n\n        <p\n            [id]=\"buildChildId('srOnlyAnnouncements')\"\n            class=\"visually-hidden\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n        >\n            {{ srAnnouncements }}\n        </p>\n\n        @if (!!model()?.length) {\n            <fieldset\n                class=\"mb-0\"\n                [attr.aria-describedby]=\"buildChildId('Label')\"\n            >\n                <legend\n                    [id]=\"buildChildId('Legend')\"\n                    class=\"form-text text-secondary small mb-0\"\n                    [innerHTML]=\"selectedItemsListLegend() | fromDictionary\"\n                ></legend>\n                <div\n                    class=\"selected-list d-flex align-content-stretch flex-wrap\"\n                >\n                    @for (\n                        element of model();\n                        track trackByFn(index);\n                        let index = $index\n                    ) {\n                        @if (!canBeDeleted(index)) {\n                            <span\n                                class=\"badge rounded-pill bg-secondary me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"disabled() ? -1 : 0\"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                #defaultElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <span class=\"visually-hidden\">\n                                    {{\n                                        'foehn-multiselect-autocomplete.sr-default-selected-element'\n                                            | fromDictionary\n                                    }}\n                                </span>\n                            </span>\n                        }\n                        @if (canBeDeleted(index)) {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-primary badge rounded-pill me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"0\"\n                                [attr.aria-label]=\"\n                                    getDeleteButtonAriaLabel(element)\n                                \"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                [title]=\"getDeleteButtonAriaLabel(element)\"\n                                (click)=\"removeItem(element, index)\"\n                                #selectedElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <foehn-icon-times\n                                    aria-hidden=\"true\"\n                                    class=\"ms-2\"\n                                    [title]=\"getDeleteButtonAriaLabel(element)\"\n                                />\n                            </button>\n                        }\n                    }\n                </div>\n            </fieldset>\n        }\n    </div>\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 .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa,:host ::ng-deep .btn a{color:#fff!important}.selected-list-container span.rounded-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}.container-box{border:1px solid #ededed;background-color:#fbfbfb;padding:.5rem}.container-box.vd-form-group-danger{border-left:5px solid var(--vd-danger);padding-left:1rem}:host ::ng-deep foehn-autocomplete div.vd-form-group-danger{border-left:0;padding-left:0}\n"] }]
+                    }, template: "<div\n    class=\"form-group container-box\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n>\n    <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        [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        [caseSensitiveSearch]=\"caseSensitiveSearch()\"\n        [isLabelSrOnly]=\"isLabelSrOnly()\"\n        [isSuggestionListDynamic]=\"isSuggestionListDynamic()\"\n    >\n        @if (!showEmptyListMessage) {\n            <small\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\n        <ng-content />\n\n        <div\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            role=\"status\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"0\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </div>\n    </foehn-autocomplete>\n\n    <div class=\"selected-list-container pt-2\" tabindex=\"-1\">\n        @if (hasDefaultDeleteFocusArea()) {\n            <small\n                class=\"form-text text-secondary my-0\"\n                [tabindex]=\"0\"\n                [innerHTML]=\"noElementsSelectedLabel() | fromDictionary\"\n                #defaultDeleteFocusArea\n            ></small>\n        }\n\n        <p\n            [id]=\"buildChildId('srOnlyAnnouncements')\"\n            class=\"visually-hidden\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n        >\n            {{ srAnnouncements }}\n        </p>\n\n        @if (!!model()?.length) {\n            <fieldset\n                class=\"mb-0\"\n                [attr.aria-describedby]=\"buildChildId('Label')\"\n            >\n                <legend\n                    [id]=\"buildChildId('Legend')\"\n                    class=\"form-text text-secondary small mb-0\"\n                    [innerHTML]=\"selectedItemsListLegend() | fromDictionary\"\n                ></legend>\n                <div\n                    class=\"selected-list d-flex align-content-stretch flex-wrap\"\n                >\n                    @for (\n                        element of model();\n                        track trackByFn(index);\n                        let index = $index\n                    ) {\n                        @if (!canBeDeleted(index)) {\n                            <span\n                                class=\"badge rounded-pill bg-secondary me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"disabled() ? -1 : 0\"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                #defaultElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <span class=\"visually-hidden\">\n                                    {{\n                                        'foehn-multiselect-autocomplete.sr-default-selected-element'\n                                            | fromDictionary\n                                    }}\n                                </span>\n                            </span>\n                        }\n                        @if (canBeDeleted(index)) {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-primary badge rounded-pill me-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                                [tabindex]=\"0\"\n                                [attr.aria-label]=\"\n                                    getDeleteButtonAriaLabel(element)\n                                \"\n                                [attr.aria-describedby]=\"buildChildId('Legend')\"\n                                [title]=\"getDeleteButtonAriaLabel(element)\"\n                                (click)=\"removeItem(element, index)\"\n                                #selectedElemRef\n                            >\n                                <span\n                                    [innerHTML]=\"getBadgeLabel(element)\"\n                                ></span>\n                                <foehn-icon-times\n                                    aria-hidden=\"true\"\n                                    class=\"ms-2\"\n                                    [title]=\"getDeleteButtonAriaLabel(element)\"\n                                />\n                            </button>\n                        }\n                    }\n                </div>\n            </fieldset>\n        }\n    </div>\n\n    @if (hasMissingModelValue()) {\n        @for (missingValue of missingModelValues(); track $index) {\n            <p\n                class=\"alert alert-warning\"\n                role=\"alert\"\n                [attr.id]=\"buildId('MissingValue') + $index\"\n            >\n                {{\n                    'foehn-checkable-group.missing-value.warning'\n                        | fromDictionary\n                            : { value: getMissingValueLabel(missingValue) }\n                }}\n            </p>\n        }\n    }\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 .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa,:host ::ng-deep .btn a{color:#fff!important}.selected-list-container span.rounded-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}.container-box{border:1px solid #ededed;background-color:#fbfbfb;padding:.5rem}.container-box.vd-form-group-danger{border-left:5px solid var(--vd-danger);padding-left:1rem}:host ::ng-deep foehn-autocomplete div.vd-form-group-danger{border-left:0;padding-left:0}\n"] }]
         }], propDecorators: { elementBadgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementBadgeLabel", required: false }] }], selectedItemsListLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsListLegend", required: false }] }], noElementsSelectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noElementsSelectedLabel", required: false }] }], excludeFromErrorSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFromErrorSummary", required: false }] }], defaultElementValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultElementValues", required: false }] }], autocompleteComponent: [{ type: i0.ViewChild, args: ['autocompleteComponent', { isSignal: true }] }], alertMessageContainer: [{ type: i0.ViewChild, args: ['alertMessageContainer', { isSignal: true }] }], selectedElemRef: [{ type: i0.ViewChildren, args: ['selectedElemRef', { isSignal: true }] }], defaultElemRef: [{ type: i0.ViewChildren, args: ['defaultElemRef', { isSignal: true }] }], defaultDeleteFocusArea: [{ type: i0.ViewChild, args: ['defaultDeleteFocusArea', { isSignal: true }] }] } });
 
 class FoehnInputEmailComponent extends FoehnInputStringComponent {