@dsivd/prestations-ng 19.2.0-beta.8 → 19.2.0-beta.9

package/CHANGELOG.md

@@ -10,6 +10,12 @@
 
 ### Added
 
+- [eslint/configs/spec-ts-recommended.mjs](projects/prestations-ng/src/eslint/configs/spec-ts-recommended.mjs)
+    - New `prestationsNg.configs.specTsRecommended` ESLint config for the Vitest specs, to use in the `extends` of a
+      `**/*.spec.ts` block: the `recommended` config of `@vitest/eslint-plugin`, which also counts the assertions of
+      the `HttpTestingController` and of the helpers of the specs. It needs `@vitest/eslint-plugin` in the
+      devDependencies of your project, only when you use it. See
+      [UPGRADING_V19.md](UPGRADING_V19.md#migrate-to-eslint-flat-configuration).
 - [foehn-bo-multi-upload.component.ts](projects/prestations-ng/src/foehn-upload/foehn-bo-multi-upload/foehn-bo-multi-upload.component.ts)
     - New `localUpload` input. When set to `true`, selected files are kept purely local
       (as `DocumentReferenceWithFile`, no `uploadUrl()` call) so they can be cancelled before
@@ -22,11 +28,9 @@
     - The default (direct upload) mode is unchanged.
     - New `maxFileSizeInMo` input: a client-side, per-file size limit that doesn't depend on
       the `fileMaxSizeInBytesByFormKey` server configuration (useful for consumers that don't
-      expose that config yet). Uses the new dictionary key
-      `foehn-uploader.file-too-big-error-message` (params: `filename`, `maxSizeInMo`), which
-      ships with a French default in
-      [default-dictionary.ts](projects/prestations-ng/src/sdk-dictionary/default-dictionary.ts)
-      like the rest of `foehn-uploader.*` — override it project-side only if you need to.
+      expose that config yet). When both are set, the smallest limit applies. A file too big gets
+      the usual `413` error, which can be customized with `customErrors` (`{fileName}`,
+      `{fileMaxSize}`).
     - New `chooseButtonStyleModifier` input, appended to the choose button's CSS classes
       (e.g. `btn-sm`), mirroring the same input already available on other uploaders.
 
@@ -63,7 +67,7 @@ Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information
       (_read-only_), `timeslotRemaining` (_read-only_), `canClose` (_read-only_)
     - `foehn-autocomplete`: `searchValue`, `inputHasFocus`, `hideSuggestions`, `displayedElements`,
       `notificationMessageUpdated`, `VIEW_PORT_HEIGHT` (_read-only_)
-    - `foehn-multiselect-autocomplete`: `autocompleteInputValue`, `showEmptyListMessage`, `srAnnouncements`
+    - `foehn-multiselect-autocomplete`: `autocompleteInputValue`, `showEmptyListMessage` (_read-only_), `srAnnouncements`
     - `foehn-select`, `foehn-radio`, `foehn-checkbox` and the autocompletes (`FoehnCheckableGroupComponent`):
       `groupedElements`
     - `foehn-radio`: `inputValue`
@@ -120,6 +124,11 @@ Please check the [UPGRADING_V19.md](UPGRADING_V19.md) guide for more information
 
 ### Fixed
 
+- `foehn-multiselect-autocomplete`: the suggestions and the message displayed once every element is selected follow a
+  model changed by the project, not only by the user. Once every element was selected, a model set back to some of
+  them kept the message and the hidden input; a model selecting every element did not display the message; the
+  suggestions still contained the elements selected by the project. An empty list of elements no longer displays
+  the message (every element of the list has already been added).
 - `providePrestationsNgCore()` registers again the HTTP interceptors lost with `FoehnPageModule` in 19.0.0: the
   `foehn-transmit-waiting-modal` is displayed again during a long transmission, the warning before the expiration of
   the session receives its date again, and a new version of the application deployed meanwhile is detected again.

package/UPGRADING_V19.md

@@ -1064,6 +1064,8 @@ npm install --save-dev eslint-plugin-simple-import-sort@13
 npm install --save-dev eslint-config-prettier@10
 npm install --save-dev eslint-plugin-import-x@4
 npm install --save-dev prettier
+# only if your project has Vitest specs (see "Migrate to vitest")
+npm install --save-dev @vitest/eslint-plugin@1
 ```
 
 In your `front` folder, add a `.prettierrc` file with the following content:
@@ -1140,6 +1142,12 @@ export default tseslint.config(
         extends: [...prestationsNg.configs.templateRecommended],
     },
 
+    // ─── Vitest specs (only if your project has Vitest specs) ─────────────────
+    {
+        files: ['**/*.spec.ts'],
+        extends: [...prestationsNg.configs.specTsRecommended],
+    },
+
     // ─── Prettier (must be last — disables formatting rules) ───────────────────
     prettier,
 );
@@ -1150,6 +1158,11 @@ everything: the `eslint`, `typescript-eslint` and `angular-eslint` baselines, th
 accessibility set, the naming and import conventions, and the rules written by the library
 itself. You declare no `plugins` and list no rule.
 
+`specTsRecommended` is the `recommended` config of `@vitest/eslint-plugin`, which also counts the assertions
+made by the `HttpTestingController` (`expectOne`, `expectNone`, `verify`) and by helpers named `expect*`,
+`assert*` or `test*`. The `**/*.spec.ts` pattern does not reach the Cypress `*.spec.cy.ts` files. It needs
+`@vitest/eslint-plugin` only when you use it: the other configs work without it.
+
 The packages installed above are still required — the library's config imports them from your
 `node_modules` rather than shipping its own copies. For the same reason, do **not** spread
 `angular.configs.tsRecommended` or `angular.configs.templateRecommended` yourself: they are

package/eslint/configs/spec-ts-recommended.mjs

@@ -0,0 +1,34 @@
+/**
+ * The house preset of the Vitest specs: the recommended rules of `@vitest/eslint-plugin`, with the
+ * assertions also made by the helpers of the specs and by the `HttpTestingController`.
+ *
+ * Meant for the `extends` of a `**\/*.spec.ts` block (the Cypress `*.spec.cy.ts` files are not
+ * Vitest specs).
+ *
+ * @param {import('@vitest/eslint-plugin').default} vitest the `@vitest/eslint-plugin` module
+ * @returns {import('typescript-eslint').ConfigArray}
+ */
+const specTsRecommended = (vitest) => [
+    vitest.configs.recommended,
+    {
+        name: 'prestations-ng/spec-ts-recommended',
+        rules: {
+            'vitest/expect-expect': [
+                'error',
+                {
+                    assertFunctionNames: [
+                        'expect',
+                        'expect*',
+                        'assert*',
+                        'test*',
+                        '*.expectOne',
+                        '*.expectNone',
+                        '*.verify',
+                    ],
+                },
+            ],
+        },
+    },
+];
+
+export default specTsRecommended;

package/eslint/index.mjs

@@ -1,9 +1,17 @@
+import specTsRecommended from './configs/spec-ts-recommended.mjs';
 import templateRecommended from './configs/template-recommended.mjs';
 import templateRules from './configs/template-rules.mjs';
 import tsRecommended from './configs/ts-recommended.mjs';
 import tsRules from './configs/ts-rules.mjs';
 import rules from './rules/index.mjs';
 
+// Only needed by the projects linting Vitest specs: the other configs can be used without it.
+const vitest = await import('@vitest/eslint-plugin').then(
+    (module) => module.default,
+    () => null,
+);
+const specTsRecommendedConfig = vitest ? specTsRecommended(vitest) : null;
+
 const plugin = {
     meta: { name: '@dsivd/prestations-ng' },
     rules,
@@ -16,6 +24,15 @@ const configs = {
     // Only this library's own rules, for a project that supplies its own style.
     tsRules: tsRules(plugin),
     templateRules: templateRules(plugin),
+    // The preset of the Vitest specs (needs @vitest/eslint-plugin)
+    get specTsRecommended() {
+        if (!specTsRecommendedConfig) {
+            throw new Error(
+                'prestationsNg.configs.specTsRecommended needs @vitest/eslint-plugin: npm install --save-dev @vitest/eslint-plugin@1',
+            );
+        }
+        return specTsRecommendedConfig;
+    },
 };
 
 export { configs, plugin, rules };

package/fesm2022/dsivd-prestations-ng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, InjectionToken, model, input, viewChildren, viewChild, forwardRef, output, computed, linkedSignal, DestroyRef, signal, effect, untracked, PendingTasks, Directive, ChangeDetectorRef, Pipe, Component, contentChildren, EnvironmentInjector, runInInjectionContext, afterNextRender, ElementRef, Injector, makeEnvironmentProviders, ErrorHandler, provideBrowserGlobalErrorListeners, provideAppInitializer, importProvidersFrom, NgZone, contentChild, TemplateRef } from '@angular/core';
+import { Injectable, inject, InjectionToken, model, input, viewChildren, viewChild, forwardRef, output, computed, linkedSignal, DestroyRef, signal, effect, untracked, PendingTasks, Directive, ChangeDetectorRef, Pipe, Component, contentChildren, EnvironmentInjector, runInInjectionContext, afterNextRender, ElementRef, Injector, makeEnvironmentProviders, ErrorHandler, provideBrowserGlobalErrorListeners, provideAppInitializer, importProvidersFrom, NgZone, afterRenderEffect, contentChild, TemplateRef } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import { Router, ActivatedRoute, RouterLink, NavigationStart, NavigationEnd } from '@angular/router';
 import { Subject, BehaviorSubject, combineLatest, of, filter as filter$1, tap as tap$1, throwError, switchMap as switchMap$1, forkJoin, from, concatMap, toArray, EMPTY, startWith, merge, noop, interval, withLatestFrom, map as map$1, concat } from 'rxjs';
@@ -1341,7 +1341,6 @@ const DEFAULT_DICTIONARY = {
     'foehn-uploader.delete-readonly-error-message': 'Un document en lecture seule ne peut pas être supprimé',
     'foehn-uploader.unknown-error-message': 'Impossible de transmettre le fichier',
     'foehn-uploader.pending-label': "en attente d'envoi",
-    'foehn-uploader.file-too-big-error-message': 'Votre pièce jointe {filename} a une taille supérieure ou égale à la limite autorisée : {maxSizeInMo} Mo',
     'foehn-picture-upload.choose-button-label': 'Choisissez une photo',
     'foehn-picture-upload.loading-label': 'Chargement...',
     'foehn-picture-upload.invalid-file-type': 'Le type de votre pièce jointe {filename} ne figure pas parmi ceux qui sont autorisés : "{acceptFormats}"',
@@ -9718,12 +9717,35 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         return [...defaultValues, defaultValue];
     }, ...(ngDevMode ? [{ debugName: "defaultElementValuesComputed" }] : /* istanbul ignore next */ []));
     autocompleteInputValue = signal(null, ...(ngDevMode ? [{ debugName: "autocompleteInputValue" }] : /* istanbul ignore next */ []));
-    showEmptyListMessage = signal(false, ...(ngDevMode ? [{ debugName: "showEmptyListMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Every element is selected: a message replaces the autocomplete (not for an empty list of elements).
+     */
+    showEmptyListMessage = computed(() => !this.disabled() &&
+        !!this.elements()?.length &&
+        !this.suggestions().length, ...(ngDevMode ? [{ debugName: "showEmptyListMessage" }] : /* istanbul ignore next */ []));
     srAnnouncements = signal('', ...(ngDevMode ? [{ debugName: "srAnnouncements" }] : /* istanbul ignore next */ []));
+    // The elements which are not selected, proposed by the autocomplete
+    suggestions = computed(() => this.filterAutocompleteElements(this.elements() ?? []), ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
     dictionaryService = inject(SdkDictionaryService);
     srAnnouncementClearTimer = null;
     SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS = 2000;
     pendingRemovedIndexForFocus = null;
+    // The suggestions follow the elements and the model, whoever changes them (the user or the project)
+    suggestionsEffect = effect(() => {
+        this.suggestions();
+        this.autocompleteComponent();
+        untracked(() => this.applySuggestionsToAutocomplete());
+    }, ...(ngDevMode ? [{ debugName: "suggestionsEffect" }] : /* istanbul ignore next */ []));
+    // The input is hidden while the message replaces the autocomplete
+    autocompleteInputVisibilityEffect = afterRenderEffect({
+        write: () => {
+            const isHidden = this.showEmptyListMessage();
+            const inputElement = this.autocompleteComponent()?.inputElement()?.nativeElement;
+            if (inputElement) {
+                inputElement.hidden = isHidden;
+            }
+        },
+    });
     selectedElemRefEffect = effect(() => {
         this.selectedElemRef();
         if (this.pendingRemovedIndexForFocus !== null) {
@@ -9738,12 +9760,6 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         this.hostId.set(this.buildId('ParentContainer'));
         this.hostName = this.hostId();
     }
-    onModelChange(value) {
-        super.onModelChange(value);
-        if (!value || ObjectHelper.isEmpty(value)) {
-            this.manageSuggestionListAndFocusAfterRemovingAnItem(null);
-        }
-    }
     hasErrorsToDisplay() {
         return this.autocompleteComponent()?.hasErrorsToDisplay() ?? false;
     }
@@ -9770,7 +9786,7 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
                 current.push(item);
                 this.updateMultiselectAutocomplete(current);
                 this.handleUserInput(current);
-                this.manageSuggestionListAndFocusAfterAddingAnItem();
+                this.focusAfterAddingAnItem();
                 this.manageScreenReaderAnnouncement(item, false);
             }
         }
@@ -9779,7 +9795,8 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         const current = (this.model() ?? []).filter((_item, itemIndex) => itemIndex !== index);
         this.updateMultiselectAutocomplete(current);
         this.handleUserInput(current);
-        this.manageSuggestionListAndFocusAfterRemovingAnItem(index);
+        // When deleting a selected item, check were to set focus back when no more items to delete
+        this.pendingRemovedIndexForFocus = index;
         this.manageScreenReaderAnnouncement(item, true);
         this.autocompleteComponent()?.markAsDirty();
     }
@@ -9790,14 +9807,14 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         return (!this.disabled() &&
             !this.defaultElementValuesComputed()?.includes(this.model()?.[index]));
     }
-    onAutocompleteElementsLoaded(elements) {
-        this.manageListWhenElementsAreLoaded(elements);
+    onAutocompleteElementsLoaded() {
+        // The autocomplete has (re)loaded its elements: it proposes the elements which are not selected
+        this.applySuggestionsToAutocomplete();
         if (!this.model()?.length &&
             this.defaultElementValuesComputed()?.length) {
             // The default values are selected once the current rendering is done.
             afterNextRender(() => {
                 this.updateMultiselectAutocomplete(this.defaultElementValuesComputed());
-                this.manageListWhenElementsAreLoaded(elements);
             }, { injector: this.componentInjector });
         }
     }
@@ -9818,15 +9835,6 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         }
         return elementBadgeLabel(element);
     }
-    manageListWhenElementsAreLoaded(elements) {
-        const autocompleteComponent = this.autocompleteComponent();
-        if (autocompleteComponent) {
-            autocompleteComponent.elements.set(this.filterAutocompleteElements(elements));
-            if (!this.disabled() && !autocompleteComponent.elements().length) {
-                this.showAlertMessageAndHideAutocomplete();
-            }
-        }
-    }
     findElementByModelItem(item) {
         const elements = this.elements();
         if (elements?.length) {
@@ -9881,24 +9889,14 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         }
         return filteredElements;
     }
-    manageSuggestionListAndFocusAfterAddingAnItem() {
+    focusAfterAddingAnItem() {
         // Empty autocomplete input
         if (!this.isEmpty(this.autocompleteInputValue())) {
             this.autocompleteInputValue.set(null);
         }
-        const autocompleteComponent = this.autocompleteComponent();
-        if (!autocompleteComponent) {
-            return;
-        }
         // Reset autocomplete input value signal to ensure the input is empty
-        autocompleteComponent.inputValue.set(null);
-        // Remove selected item from autocomplete suggestion list
-        autocompleteComponent.elements.set(this.filterAutocompleteElements(this.elements()));
-        // Force autocomplete to filter elements again because the input value is empty and the list of elements has changed
-        autocompleteComponent.filterElements(true);
-        // Check if we still have suggestions to display
-        if (!autocompleteComponent.elements().length) {
-            this.showAlertMessageAndHideAutocomplete();
+        this.autocompleteComponent()?.inputValue.set(null);
+        if (this.showEmptyListMessage()) {
             // The alert message can be focused once it is rendered
             afterNextRender(() => {
                 const alertMessage = this.alertMessageContainer()?.nativeElement.querySelector('p');
@@ -9908,37 +9906,18 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
             }, { injector: this.componentInjector });
         }
     }
-    manageSuggestionListAndFocusAfterRemovingAnItem(removedIndex) {
-        // Hide message saying no more suggestions to display
-        this.showEmptyListMessage.set(false);
+    applySuggestionsToAutocomplete() {
         const autocompleteComponent = this.autocompleteComponent();
-        if (autocompleteComponent) {
-            // Manually show autocomplete because there is at least one suggestions to display
-            const inputElement = autocompleteComponent.inputElement();
-            if (inputElement?.nativeElement) {
-                inputElement.nativeElement.hidden = false;
-            }
-            // Add back selected item to autocomplete suggestion list
-            autocompleteComponent.elements.set(this.filterAutocompleteElements(this.elements()));
-            // Force autocomplete to filter elements again because the input value is empty and the list of elements has changed
-            autocompleteComponent.filterElements(true);
-        }
-        if (removedIndex !== null) {
-            // When deleting a selected item, check were to set focus back when no more items to delete
-            this.pendingRemovedIndexForFocus = removedIndex;
-        }
-    }
-    showAlertMessageAndHideAutocomplete() {
-        // Show a message to user indicating there is no more suggestions to display
-        this.showEmptyListMessage.set(true);
-        // Manually reset and hide autocomplete because there is no more suggestions to display
-        if (!this.isEmpty(this.autocompleteInputValue())) {
-            this.autocompleteInputValue.set(null);
+        // Before the rendering or the loading of the elements
+        if (!autocompleteComponent || !this.elements()) {
+            return;
         }
-        const autocompleteComponent = this.autocompleteComponent();
-        const inputElement = autocompleteComponent?.inputElement();
-        if (inputElement?.nativeElement) {
-            inputElement.nativeElement.hidden = true;
+        autocompleteComponent.elements.set(this.suggestions());
+        // Force autocomplete to filter elements again because the list of elements has changed
+        autocompleteComponent.filterElements(true);
+        if (this.showEmptyListMessage() &&
+            !this.isEmpty(this.autocompleteInputValue())) {
+            this.autocompleteInputValue.set(null);
         }
     }
     manageScreenReaderAnnouncement(element, isDelete) {
@@ -9963,7 +9942,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        <output\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage()) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"-1\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </output>\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" }] });
+        ], 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()\"\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        <output\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage()) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"-1\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </output>\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.23", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, decorators: [{
             type: Component,
@@ -9982,7 +9961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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        <output\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage()) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"-1\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </output>\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"] }]
+                    }, 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()\"\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        <output\n            [id]=\"buildChildId('AlertMessageContainer')\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            #alertMessageContainer\n        >\n            @if (showEmptyListMessage()) {\n                <p class=\"alert alert-info mb-0\" tabindex=\"-1\">\n                    {{\n                        'foehn-multiselect-autocomplete.autocomplete.empty-message'\n                            | fromDictionary\n                    }}\n                </p>\n            }\n        </output>\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 {
@@ -13122,12 +13101,23 @@ class UploaderHelper {
             ? this._fileMaxSizeInBytesByFormKey[keyAsRegex]
             : null;
     }
-    isFileTooBig(formKey, fileSizeInBytes) {
-        const maxFileSizeInBytesForFormKey = this.getMaxFileSizeInBytesForFormKey(formKey);
-        if (!maxFileSizeInBytesForFormKey) {
+    /**
+     * The maximum size of a file: the one of its form key (application info) and `maxFileSizeInMo` (a limit of the
+     * component), the smallest of both.
+     */
+    getMaxFileSizeInBytes(formKey, maxFileSizeInMo) {
+        const limits = [
+            this.getMaxFileSizeInBytesForFormKey(formKey),
+            maxFileSizeInMo ? maxFileSizeInMo * 1024 * 1024 : null,
+        ].filter((limit) => !!limit);
+        return limits.length ? Math.min(...limits) : null;
+    }
+    isFileTooBig(formKey, fileSizeInBytes, maxFileSizeInMo) {
+        const maxFileSizeInBytes = this.getMaxFileSizeInBytes(formKey, maxFileSizeInMo);
+        if (!maxFileSizeInBytes) {
             return false;
         }
-        return this.isTooBig(fileSizeInBytes, maxFileSizeInBytesForFormKey);
+        return this.isTooBig(fileSizeInBytes, maxFileSizeInBytes);
     }
     isFileTooSmall(fileSizeInBytes) {
         if (!this.fileMinSizeInBytes) {
@@ -13164,12 +13154,12 @@ class UploaderHelper {
                 .split(',')
                 .includes(fileExtension.toUpperCase()));
     }
-    getUniqueErrorByCode(name, errorCode, fileName, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters) {
+    getUniqueErrorByCode(name, errorCode, fileName, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters, maxFileSizeInMo) {
         const uniqSuffix = Date.now();
         return {
             name,
             code: `${errorCode}_${uniqSuffix}`,
-            message: this.replaceErrorMessageKeys(name, customErrors[errorCode], fileName, errorCode, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters),
+            message: this.replaceErrorMessageKeys(name, customErrors[errorCode], fileName, errorCode, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters, maxFileSizeInMo),
         };
     }
     addCustomErrorOrDefault(name, destinationErrors, errorCode, fileName, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters) {
@@ -13231,7 +13221,7 @@ class UploaderHelper {
     createDefaultCustomErrors(customErrors) {
         Object.assign(customErrors, this.getDefaultCustomErrors());
     }
-    getLocalErrors(name, files, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters) {
+    getLocalErrors(name, files, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters, maxFileSizeInMo) {
         const errors = [];
         files.forEach((file) => {
             // File bad extension
@@ -13248,10 +13238,10 @@ class UploaderHelper {
                 errors.push(this.getUniqueErrorByCode(name, 'FILENAME_SHOULD_NOT_CONTAIN', file.name, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters));
             }
             // Files too big
-            if (this.isFileTooBig(name, file.size)) {
-                // Default custom error 413 exist (see function 'createDefaultCustomErrors')
+            if (this.isFileTooBig(name, file.size, maxFileSizeInMo)) {
+                // Default custom error 413 exist (see function 'getDefaultCustomErrors')
                 // Need to create unique error to ensure ability to display multiple error messages
-                errors.push(this.getUniqueErrorByCode(name, '413', file.name, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters));
+                errors.push(this.getUniqueErrorByCode(name, '413', file.name, customErrors, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters, maxFileSizeInMo));
             }
             if (this.isFileTooSmall(file.size)) {
                 // Default custom error FILE_TOO_SMALL exist (see function 'createDefaultCustomErrors')
@@ -13367,7 +13357,7 @@ class UploaderHelper {
     isTooBig(fileSizeInBytes, limitInBytes) {
         return fileSizeInBytes > limitInBytes;
     }
-    replaceErrorMessageKeys(name, errorMsg, fileName, errorCode, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters) {
+    replaceErrorMessageKeys(name, errorMsg, fileName, errorCode, overrideAcceptedExtensions, overrideMaxFileNameLength, overrideIllegalCharacters, maxFileSizeInMo) {
         const safeFileName = fileName?.length
             ? getSafeFileNameForErrorMessage(fileName)
             : '';
@@ -13381,7 +13371,7 @@ class UploaderHelper {
         // getDefaultCustomErrors function: customErrors['0'] = customErrors['413'];
         if (errorCode.startsWith('413') || errorCode.startsWith('0')) {
             // REQUEST_ENTITY_TOO_LARGE_ERROR_MSG
-            const fileMaxSize = ((this.getMaxFileSizeInBytesForFormKey(name) ?? 0) /
+            const fileMaxSize = ((this.getMaxFileSizeInBytes(name, maxFileSizeInMo) ?? 0) /
                 (1024 * 1024)).toString();
             return withValue('fileMaxSize', fileMaxSize);
         }
@@ -13540,8 +13530,14 @@ class AbstractFoehnUploaderComponent extends FoehnInputComponent {
     removeFileOnConfirmation(document) {
         this.deleteDocumentSubject.next(document);
     }
+    /**
+     * A maximum size of each file, in addition to the one of its form key in the application info.
+     */
+    getMaxFileSizeInMo() {
+        return undefined;
+    }
     displayLocalErrors(files) {
-        const errors = this.uploaderHelper.getLocalErrors(this.name(), files, this.uploaderCustomErrors(), this.overrideAcceptedExtensions(), this.overrideMaxFileNameLength(), this.overrideIllegalCharacters());
+        const errors = this.uploaderHelper.getLocalErrors(this.name(), files, this.uploaderCustomErrors(), this.overrideAcceptedExtensions(), this.overrideMaxFileNameLength(), this.overrideIllegalCharacters(), this.getMaxFileSizeInMo());
         this.refreshErrors([errors, true]);
         return errors;
     }
@@ -14301,7 +14297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const BYTES_IN_MO = 1024 * 1024;
 class FoehnBoMultiUploadComponent extends AbstractFoehnUploaderComponent {
     uploadUrl = input(...(ngDevMode ? [undefined, { debugName: "uploadUrl" }] : /* istanbul ignore next */ []));
     deleteUrl = input(...(ngDevMode ? [undefined, { debugName: "deleteUrl" }] : /* istanbul ignore next */ []));
@@ -14419,6 +14414,9 @@ class FoehnBoMultiUploadComponent extends AbstractFoehnUploaderComponent {
             }
         }
     }
+    getMaxFileSizeInMo() {
+        return this.maxFileSizeInMo();
+    }
     removeFileOnConfirmation(document) {
         if (this.localUpload()) {
             this.removeDocumentLocally(document);
@@ -14442,11 +14440,6 @@ class FoehnBoMultiUploadComponent extends AbstractFoehnUploaderComponent {
         if (filesErrors.length) {
             return;
         }
-        const tooBigErrors = this.tooBigErrors(files);
-        if (tooBigErrors.length) {
-            this.refreshErrors([tooBigErrors, true]);
-            return;
-        }
         // Initialize model if empty
         if (!this.model()?.length) {
             this.model.set([]);
@@ -14460,22 +14453,6 @@ class FoehnBoMultiUploadComponent extends AbstractFoehnUploaderComponent {
         // we send files to server
         this.uploadFilesSubject.next(files);
     }
-    tooBigErrors(files) {
-        const maxFileSizeInMo = this.maxFileSizeInMo();
-        if (!maxFileSizeInMo) {
-            return [];
-        }
-        return files
-            .filter((file) => file.size > maxFileSizeInMo * BYTES_IN_MO)
-            .map((file, index) => ({
-            name: this.name(),
-            code: `FILE_TOO_BIG_${index}`,
-            message: this.dictionaryService.getKeySync('foehn-uploader.file-too-big-error-message', {
-                filename: getSafeFileNameForErrorMessage(file.name),
-                maxSizeInMo: `${maxFileSizeInMo}`,
-            }),
-        }));
-    }
     addFilesLocally(files) {
         const pendingDocuments = files.map((file) => this.toPendingDocument(file));
         this.model.update((current) => [