@ecodev/natural 64.0.2 → 65.0.1

package/fesm2022/ecodev-natural.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, input, PLATFORM_ID, signal, computed, effect, output, Pipe, DOCUMENT, LOCALE_ID, provideAppInitializer, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, Inject, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
+import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, input, PLATFORM_ID, signal, computed, effect, output, Pipe, DOCUMENT, LOCALE_ID, provideAppInitializer, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, NgControl, FormControlDirective, FormControlName } from '@angular/forms';
 import { NavigationStart, NavigationEnd, ActivatedRoute, Router, RouteConfigLoadStart, RouteConfigLoadEnd, PRIMARY_OUTLET, RouterLink, NavigationError, DefaultUrlSerializer, UrlTree } from '@angular/router';
@@ -50,10 +50,10 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 class NaturalConfirmComponent {
     data = inject(MAT_DIALOG_DATA);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NaturalConfirmComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button mat-button [mat-dialog-close]=\"false\">{{ data.cancelText }}</button>\n    <button mat-stroked-button cdkFocusInitial [mat-dialog-close]=\"true\">{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalConfirmComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button mat-button [mat-dialog-close]=\"false\">{{ data.cancelText }}</button>\n    <button mat-stroked-button cdkFocusInitial [mat-dialog-close]=\"true\">{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalConfirmComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalConfirmComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatDialogModule, MatButton], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button mat-button [mat-dialog-close]=\"false\">{{ data.cancelText }}</button>\n    <button mat-stroked-button cdkFocusInitial [mat-dialog-close]=\"true\">{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"] }]
         }] });
@@ -96,10 +96,10 @@ class NaturalAlertService {
         });
         return dialog.afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAlertService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAlertService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAlertService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -161,10 +161,10 @@ class NaturalAbstractPanel {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NaturalAbstractPanel, isStandalone: true, host: { listeners: { "click": "clickPanel()" }, properties: { "class.isFrontPanel": "this.isFrontPanel", "class.isPanel": "this.isPanel" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NaturalAbstractPanel, isStandalone: true, host: { listeners: { "click": "clickPanel()" }, properties: { "class.isFrontPanel": "this.isFrontPanel", "class.isPanel": "this.isPanel" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractPanel, decorators: [{
             type: Directive
         }], propDecorators: { isFrontPanel: [{
                 type: HostBinding,
@@ -193,12 +193,10 @@ function formatIsoDate(date) {
  * So something like: "2021-09-23T17:57:16+09:00"
  */
 function formatIsoDateTime(date) {
-    const timezoneOffsetInMinutes = date.getTimezoneOffset();
+    const timezoneOffsetInMinutes = Math.round(date.getTimezoneOffset());
     const timezoneOffsetInHours = -Math.trunc(timezoneOffsetInMinutes / 60); // UTC minus local time
     const sign = timezoneOffsetInHours >= 0 ? '+' : '-';
-    const hoursLeadingZero = Math.abs(timezoneOffsetInHours) < 10 ? '0' : '';
     const remainderMinutes = -(timezoneOffsetInMinutes % 60);
-    const minutesLeadingZero = Math.abs(remainderMinutes) < 10 ? '0' : '';
     // It's a bit unfortunate that we need to construct a new Date instance,
     // but we don't want the original Date instance to be modified
     const correctedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
@@ -207,13 +205,9 @@ function formatIsoDateTime(date) {
         .toISOString()
         .replace(/\.\d{3}Z/, '')
         .replace('Z', '');
-    return (iso +
-        sign +
-        hoursLeadingZero +
-        Math.abs(timezoneOffsetInHours).toString() +
-        ':' +
-        minutesLeadingZero +
-        remainderMinutes);
+    const hours = Math.abs(timezoneOffsetInHours).toString().padStart(2, '0');
+    const minutes = remainderMinutes.toString().padStart(2, '0');
+    return iso + sign + hours + ':' + minutes;
 }
 /**
  * Relations to full objects are converted to their IDs only.
@@ -2079,6 +2073,10 @@ const validTlds = [
     'zw',
 ];
 
+function isEmptyInputValue(value) {
+    // we don't check for string here so it also works with arrays
+    return value == null || value.length === 0;
+}
 /**
  * Returns an async validator function that checks that the form control value is unique
  */
@@ -2151,8 +2149,8 @@ function isValid(status) {
 /**
  * Emits exactly 0 or 1 time:
  *
- * - if the form is VALID, emits immediately
- * - if the form is PENDING emits if it changes from PENDING to VALID
+ * - if the form is `VALID`, emits immediately
+ * - if the form is `PENDING` emits if it changes from `PENDING` to `VALID`
  * - any other cases will **never** emit
  */
 function ifValid(control) {
@@ -2190,23 +2188,22 @@ function deliverableEmail(control) {
     }
     return null;
 }
+const urlRegexp = /^https?:\/\/(?:[^.\s]+\.)+[^.\s]+$/;
+const urlPattern = urlRegexp.toString();
 /**
  * Naive URL validator for "normal" web links, that is a bit too permissive
  *
- * It enforces:
- *
+ * - It enforces:
  *     - http/https protocol
  *     - one domain
  *     - one tld
- *
- * It allows:
- *
+ * - It allows:
  *     - any number of subdomains
  *     - any parameters
  *     - any fragments
  *     - any characters for any parts (does not conform to rfc1738)
  */
-const urlValidator = Validators.pattern(/^https?:\/\/(?:[^.\s]+\.)+[^.\s]+$/);
+const url = Validators.pattern(urlRegexp);
 /**
  * Validates that the value is an integer (non-float)
  */
@@ -2247,6 +2244,62 @@ const twoDecimals = decimal(2);
 function money(control) {
     return twoDecimals(control) ? { money: true } : null;
 }
+/**
+ * Validate that the number is strictly greater than given one.
+ *
+ * `Validators.min()` is "greater than or equal", but this one is strictly
+ * "greater than".
+ *
+ * **SHOULD NOT USE IT**, instead consider using Angular's native `Validators.min()`.
+ * Because you should also apply `[attr.min]="123"` in the template to have the browser
+ * help the user. And that attribute spec defines that it is "greater or equal", which
+ * contradicts this validator. So we cannot use this validator and have the best UX.
+ */
+function greaterThan(min) {
+    return (control) => {
+        if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
+            return null; // don't validate empty values to allow optional controls
+        }
+        const value = parseFloat(control.value);
+        // Controls with NaN values after parsing should be treated as not having a
+        // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
+        return !isNaN(value) && value <= min ? { greaterThan: { greaterThan: min, actualValue: control.value } } : null;
+    };
+}
+/**
+ * Validate a 32 bits MiFare hexadecimal CSN
+ */
+function nfcCardHex(control) {
+    const value = control.value || '';
+    if (value && !value.match(/^[0-9A-F]{2}:?[0-9A-F]{2}:?[0-9A-F]{2}:?[0-9A-F]{2}$/i)) {
+        return {
+            nfcCardHex: $localize `Doit être au format hexadécimal (A1:B2:C3:D4 ou A1B2C3D4)`,
+        };
+    }
+    return null;
+}
+const invalidTime = {
+    time: `L'heure doit être au format "14h35", "14:35" ou "14h".`,
+};
+// This pattern should be kept in sync with `\Ecodev\Felix\Api\Scalar\TimeType::parseValue()`
+const timePattern = /^(?<hour>\d{1,2})(([h:]$)|([h:](?<minute>\d{1,2}))?$)/;
+/**
+ * Validate a time similar to "14h35", "14:35" or "14h".
+ */
+function time(control) {
+    const value = control.value || '';
+    if (!value) {
+        return null;
+    }
+    else if (typeof value !== 'string') {
+        return invalidTime;
+    }
+    const match = timePattern.exec(value.trim());
+    if (match?.groups && parseFloat(match.groups.hour) <= 24 && parseFloat(match.groups.minute ?? '0') <= 60) {
+        return null;
+    }
+    return invalidTime;
+}
 
 /**
  * Cumulate all changes made to an object over time
@@ -2516,10 +2569,10 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
         this.form = this.service.getFormGroup(this.data.model);
         this.changes.initialize(this.form.getRawValue());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NaturalAbstractDetail, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NaturalAbstractDetail, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractDetail, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }, { type: undefined }] });
 
@@ -2609,10 +2662,10 @@ class NaturalAbstractEditableList {
     validateForm() {
         validateAllFormControls(this.form);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractEditableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NaturalAbstractEditableList, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractEditableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NaturalAbstractEditableList, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractEditableList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractEditableList, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }] });
 
@@ -2846,13 +2899,13 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
             this.focusTrap.destroy();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDropdownContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
             args: [{ imports: [CdkPortalOutlet, MatButton], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"] }]
-        }] });
+        }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
 
 class NaturalDropdownRef {
     dropdownContainer;
@@ -2943,10 +2996,10 @@ class NaturalDropdownService {
             },
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDropdownService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3164,10 +3217,10 @@ class TypeDateComponent {
             return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            matInput\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"value\" />\n        <mat-datepicker #value />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (valueCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-checkbox i18n [formControl]=\"todayCtrl\">Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            matInput\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"value\" />\n        <mat-datepicker #value />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (valueCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-checkbox i18n [formControl]=\"todayCtrl\">Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeDateComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         FormsModule,
@@ -3379,10 +3432,10 @@ class NaturalMemoryStorage {
     setItem(key, value) {
         this.data.set(key, value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3553,10 +3606,10 @@ class NaturalPersistenceService {
         }
         return this.isValid(key, storageKey, result) ? result : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPersistenceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4054,10 +4107,10 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             this.persistenceService.persist('col', value, this.route, this.getStorageKey());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NaturalAbstractList, isStandalone: true, inputs: { persistSearch: "persistSearch", availableColumns: "availableColumns", selectedColumns: "selectedColumns", forcedVariables: "forcedVariables" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NaturalAbstractList, isStandalone: true, inputs: { persistSearch: "persistSearch", availableColumns: "availableColumns", selectedColumns: "selectedColumns", forcedVariables: "forcedVariables" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractList, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { persistSearch: [{
                 type: Input
@@ -4186,12 +4239,12 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
         }
         return [item];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractNavigableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalAbstractNavigableList, isStandalone: true, inputs: { ancestorRelationName: { classPropertyName: "ancestorRelationName", publicName: "ancestorRelationName", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractNavigableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalAbstractNavigableList, isStandalone: true, inputs: { ancestorRelationName: { classPropertyName: "ancestorRelationName", publicName: "ancestorRelationName", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractNavigableList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractNavigableList, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined }] });
+        }], ctorParameters: () => [{ type: undefined }], propDecorators: { ancestorRelationName: [{ type: i0.Input, args: [{ isSignal: true, alias: "ancestorRelationName", required: false }] }] } });
 
 /**
  * Detect if the given variables have a file to be uploaded or not, and
@@ -4367,10 +4420,10 @@ class NetworkActivityService {
     clearErrors() {
         this.writableErrors.set([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NetworkActivityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NetworkActivityService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NetworkActivityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NetworkActivityService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NetworkActivityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NetworkActivityService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4513,10 +4566,10 @@ class NaturalDebounceService {
             this.allDebouncedUpdateCache.delete(modelService);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDebounceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDebounceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5088,10 +5141,10 @@ class NaturalEnumService {
             return '';
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEnumService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEnumService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEnumService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEnumService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5235,10 +5288,10 @@ class NaturalLinkMutationService {
             }
         }`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalLinkMutationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalLinkMutationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalLinkMutationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalLinkMutationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5295,10 +5348,10 @@ class NaturalSwissParsingDateAdapter extends NativeDateAdapter {
         // Also see https://github.com/tc39/ecma402/issues/6
         return 1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSwissParsingDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSwissParsingDateAdapter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSwissParsingDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSwissParsingDateAdapter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSwissParsingDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSwissParsingDateAdapter, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5371,10 +5424,10 @@ class NaturalIconDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalIconDirective, isStandalone: true, selector: "mat-icon[naturalIcon]", inputs: { naturalIcon: { classPropertyName: "naturalIcon", publicName: "naturalIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.font-size.px": "size()", "style.min-height.px": "size()", "style.min-width.px": "size()", "class": "icon().class" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalIconDirective, isStandalone: true, selector: "mat-icon[naturalIcon]", inputs: { naturalIcon: { classPropertyName: "naturalIcon", publicName: "naturalIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.font-size.px": "size()", "style.min-height.px": "size()", "style.min-width.px": "size()", "class": "icon().class" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-icon[naturalIcon]',
@@ -5385,7 +5438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[class]': 'icon().class',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { naturalIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalIcon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class NaturalColumnsPickerComponent {
     destroyRef = inject(DestroyRef);
@@ -5487,10 +5540,10 @@ class NaturalColumnsPickerComponent {
             this.updateColumns();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: false, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: false, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-columns-picker', imports: [
                         AsyncPipe,
@@ -5505,11 +5558,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatTooltip,
                         NaturalIconDirective,
                     ], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
-        }], propDecorators: { availableColumns: [{
+        }], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], availableColumns: [{
                 type: Input
             }], selections: [{
                 type: Input
-            }] } });
+            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 /*
  * Public API Surface of natural
@@ -5589,15 +5642,15 @@ class NaturalLinkableTabDirective {
     getTabIndex(fragment) {
         return this.component._tabs.toArray().findIndex(tab => fragment === getTabId(tab));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalLinkableTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: { classPropertyName: "naturalLinkableTab", publicName: "naturalLinkableTab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalLinkableTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: { classPropertyName: "naturalLinkableTab", publicName: "naturalLinkableTab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-tab-group[naturalLinkableTab]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { naturalLinkableTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalLinkableTab", required: false }] }] } });
 
 /**
  * Returns the string with the first letter as capital
@@ -5609,10 +5662,10 @@ class NaturalCapitalizePipe {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalCapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalCapitalizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'capitalize',
@@ -5623,10 +5676,10 @@ class NaturalEllipsisPipe {
     transform(value, limit) {
         return value.substring(0, limit - 1) + (value.length > limit ? '…' : '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEllipsisPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEllipsisPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ellipsis',
@@ -5643,16 +5696,139 @@ class NaturalEnumPipe {
     transform(value, enumName) {
         return this.enumService.getValueName(value, enumName);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalEnumPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalEnumPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'enum',
                 }]
         }] });
 
+/**
+ * Return a single error message for the first found error, if any.
+ *
+ * Typical usage is without `@if`:
+ *
+ * ```html
+ * <mat-form-field>
+ *     <input matInput formControlName="name" />
+ *     <mat-label i18n>Nom</mat-label>
+ *     <mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error>
+ * </mat-form-field>
+ * ```
+ *
+ * If you need custom error messages, you can override, or defined new ones like that:
+ *
+ * ```html
+ * <mat-form-field>
+ *     <input matInput formControlName="name" />
+ *     <mat-label i18n>Nom</mat-label>
+ *     @if (form.get('name')?.hasError('required')) {
+ *         <mat-error>Ce champ est requis parce qu'il est vraiment très important</mat-error>
+ *     } @else {
+ *         <mat-error>{{ form.get('name')?.errors | errorMessage }}</mat-error>
+ *     }
+ * </mat-form-field>
+ * ```
+ *
+ * Supported validators are:
+ *
+ * - Angular
+ *     - `Validators.max`
+ *     - `Validators.maxlength`
+ *     - `Validators.min`
+ *     - `Validators.minlength`
+ *     - `Validators.required`
+ * - Natural
+ *     - `available`
+ *     - `decimal`
+ *     - `deliverableEmail`
+ *     - `greaterThan`
+ *     - `integer`
+ *     - `money`
+ *     - `nfcCardHex`
+ *     - `time`
+ *     - `unique`
+ *     - `url`
+ * - Others, that live in individual projects, but we exceptionally support here
+ *     - `iban`
+ *     - `validateCity`
+ *
+ * @param unit is used to build the message for the following validators: `min`, `max`, `greaterThan`
+ */
+class NaturalErrorMessagePipe {
+    transform(errors, unit = '') {
+        if (!errors) {
+            return '';
+        }
+        if (unit) {
+            unit = ` ${unit}`;
+        }
+        if (errors.required) {
+            return $localize `Requis`;
+        }
+        else if (errors.minlength) {
+            return $localize `Minimum ${errors.minlength.requiredLength} caractères`;
+        }
+        else if (errors.maxlength) {
+            return $localize `Maximum ${errors.maxlength.requiredLength} caractères`;
+        }
+        else if (errors.integer) {
+            return $localize `Doit être un nombre entier`;
+        }
+        else if (errors.money) {
+            return $localize `Le montant doit être un nombre avec un maximum de deux décimales`;
+        }
+        else if (errors.email) {
+            return $localize `Adresse email invalide`;
+        }
+        else if (errors.iban) {
+            return $localize `IBAN invalide`;
+        }
+        else if (errors.min) {
+            return $localize `Doit être plus grand ou égal à ${errors.min.min}${unit}`;
+        }
+        else if (errors.max) {
+            return $localize `Doit être plus petit ou égal à ${errors.max.max}${unit}`;
+        }
+        else if (errors.greaterThan) {
+            return $localize `Doit être plus grand que ${errors.greaterThan.greaterThan}${unit}`;
+        }
+        else if (errors.notCity) {
+            return $localize `Veuillez choisir une ville de la liste`;
+        }
+        else if (errors.decimal) {
+            return $localize `Maximum de ${errors.decimal} décimales`;
+        }
+        else if (errors.duplicateValue) {
+            return $localize `N'est pas unique`;
+        }
+        else if (errors.available) {
+            return $localize `N'est pas disponible`;
+        }
+        else if (errors.time) {
+            return errors.time;
+        }
+        else if (errors.nfcCardHex) {
+            return errors.nfcCardHex;
+        }
+        else if (errors.pattern && errors.pattern.requiredPattern === urlPattern) {
+            return $localize `URL invalide`;
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: NaturalErrorMessagePipe, isStandalone: true, name: "errorMessage" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalErrorMessagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'errorMessage',
+                }]
+        }] });
+
 function isDate(value) {
     return value instanceof Date && !isNaN(value.valueOf());
 }
@@ -5772,10 +5948,10 @@ class NaturalTimeAgoPipe {
             throw new Error('Time travelling just happened');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.7", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeAgo',
@@ -5842,15 +6018,15 @@ class NaturalSrcDensityDirective {
             this.elementRef.nativeElement.srcset = densities(src, false);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSrcDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: { classPropertyName: "naturalSrcDensity", publicName: "naturalSrcDensity", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSrcDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: { classPropertyName: "naturalSrcDensity", publicName: "naturalSrcDensity", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[naturalSrcDensity]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { naturalSrcDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalSrcDensity", required: true }] }] } });
 
 class NaturalBackgroundDensityDirective {
     elementRef = inject(ElementRef);
@@ -5902,15 +6078,15 @@ class NaturalBackgroundDensityDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalBackgroundDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalBackgroundDensityDirective, isStandalone: true, selector: "[naturalBackgroundDensity]", inputs: { naturalBackgroundDensity: { classPropertyName: "naturalBackgroundDensity", publicName: "naturalBackgroundDensity", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalBackgroundDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalBackgroundDensityDirective, isStandalone: true, selector: "[naturalBackgroundDensity]", inputs: { naturalBackgroundDensity: { classPropertyName: "naturalBackgroundDensity", publicName: "naturalBackgroundDensity", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalBackgroundDensityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalBackgroundDensityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[naturalBackgroundDensity]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { naturalBackgroundDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalBackgroundDensity", required: true }] }] } });
 
 class NaturalDialogTriggerComponent {
     dialog = inject(MatDialog);
@@ -5969,10 +6145,10 @@ class NaturalDialogTriggerComponent {
             this.router.navigate(['.'], { relativeTo: this.route.parent });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -6196,10 +6372,10 @@ class NaturalSeoService {
         }
         return of(seo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSeoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSeoService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -6272,22 +6448,22 @@ class NaturalDetailHeaderComponent {
         }
         return this.getRootLink().concat([id]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: { classPropertyName: "currentBaseUrl", publicName: "currentBaseUrl", isSignal: true, isRequired: false, transformFunction: null }, isPanel: { classPropertyName: "isPanel", publicName: "isPanel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: false, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: true, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, listRoute: { classPropertyName: "listRoute", publicName: "listRoute", isSignal: true, isRequired: false, transformFunction: null }, listFragment: { classPropertyName: "listFragment", publicName: "listFragment", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: { classPropertyName: "currentBaseUrl", publicName: "currentBaseUrl", isSignal: true, isRequired: false, transformFunction: null }, isPanel: { classPropertyName: "isPanel", publicName: "isPanel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: false, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: true, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, listRoute: { classPropertyName: "listRoute", publicName: "listRoute", isSignal: true, isRequired: false, transformFunction: null }, listFragment: { classPropertyName: "listFragment", publicName: "listFragment", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-detail-header', imports: [MatButton, RouterLink, MatIcon, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
-        }], propDecorators: { icon: [{
+        }], propDecorators: { currentBaseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentBaseUrl", required: false }] }], isPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPanel", required: false }] }], icon: [{
                 type: Input
             }], label: [{
                 type: Input
             }], rootLabel: [{
                 type: Input
-            }], model: [{
+            }], newLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "newLabel", required: false }] }], model: [{
                 type: Input,
                 args: [{ required: true }]
-            }] } });
+            }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], listRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "listRoute", required: false }] }], listFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "listFragment", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }] } });
 
 /*
  * Public API Surface of natural
@@ -6441,10 +6617,10 @@ class TypeSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option togglePosition=\"before\" [value]=\"getId(item)\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option togglePosition=\"before\" [value]=\"getId(item)\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeSelectComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         FormsModule,
@@ -6456,7 +6632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatSelectionList,
                         MatListOption,
                     ], template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option togglePosition=\"before\" [value]=\"getId(item)\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { list: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSelectionList), { isSignal: true }] }] } });
 
 class AbstractAssociationSelectComponent {
     configuration;
@@ -6541,10 +6717,10 @@ class AbstractAssociationSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AbstractAssociationSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractAssociationSelectComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -6745,18 +6921,18 @@ class AbstractSelect {
         }
         this.internalCtrl.updateValueAndValidity();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: AbstractSelect, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, navigateTo: { classPropertyName: "navigateTo", publicName: "navigateTo", isSignal: false, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: AbstractSelect, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, navigateTo: { classPropertyName: "navigateTo", publicName: "navigateTo", isSignal: false, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AbstractSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AbstractSelect, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { error: [{
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{
                 type: Input
             }], required: [{
                 type: Input
             }], navigateTo: [{
                 type: Input
-            }], disabled: [{
+            }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], blur: [{ type: i0.Output, args: ["blur"] }], disabled: [{
                 type: Input
             }] } });
 
@@ -7003,10 +7179,10 @@ class NaturalSelectComponent extends AbstractSelect {
     getVariablesForDebug() {
         return this.variablesManager.variables.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null }, optionRequired: { classPropertyName: "optionRequired", publicName: "optionRequired", isSignal: true, isRequired: false, transformFunction: null }, searchField: { classPropertyName: "searchField", publicName: "searchField", isSignal: false, isRequired: false, transformFunction: null }, searchOperator: { classPropertyName: "searchOperator", publicName: "searchOperator", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null }, optionRequired: { classPropertyName: "optionRequired", publicName: "optionRequired", isSignal: true, isRequired: false, transformFunction: null }, searchField: { classPropertyName: "searchField", publicName: "searchField", isSignal: false, isRequired: false, transformFunction: null }, searchOperator: { classPropertyName: "searchOperator", publicName: "searchOperator", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-select', imports: [
                         MatAutocomplete,
@@ -7031,13 +7207,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         RouterLink,
                         MatAutocompleteTrigger,
                     ], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
-        }], propDecorators: { searchField: [{
+        }], propDecorators: { autoTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }], optionRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionRequired", required: false }] }], searchField: [{
                 type: Input
             }], searchOperator: [{
                 type: Input
             }], filter: [{
                 type: Input
-            }], disabled: [{
+            }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], disabled: [{
                 type: Input
             }] } });
 
@@ -7061,10 +7237,10 @@ class TypeNaturalSelectComponent extends AbstractAssociationSelectComponent {
         const selectedName = selected?.fullName || selected?.name || '';
         return selectedName;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeNaturalSelectComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n            [pageSize]=\"configuration.pageSize || 10\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeNaturalSelectComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n            [pageSize]=\"configuration.pageSize || 10\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
             type: Component,
             args: [{ imports: [FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatSelect, MatOption, NaturalSelectComponent], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n            [pageSize]=\"configuration.pageSize || 10\"\n        />\n    }\n</form>\n" }]
         }] });
@@ -7112,10 +7288,10 @@ class TypeTextComponent {
             this.dropdownRef.close(); // undefined value, discard changes / prevent to add a condition (on new fields
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        (keydown.enter)=\"close()\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        (keydown.enter)=\"close()\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeTextComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatFormField, MatLabel, MatError, MatInput, FormsModule, ReactiveFormsModule], template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        (keydown.enter)=\"close()\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [] });
@@ -7204,10 +7380,10 @@ class TypeNumberComponent {
             return operator.label + ' ' + this.valueCtrl.value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeNumberComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            matInput\n            type=\"number\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            (keydown.enter)=\"close()\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeNumberComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            matInput\n            type=\"number\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            (keydown.enter)=\"close()\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeNumberComponent, decorators: [{
             type: Component,
             args: [{ imports: [FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatError, MatSelect, MatOption, MatInput], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            matInput\n            type=\"number\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            (keydown.enter)=\"close()\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [] });
@@ -7242,10 +7418,10 @@ class FacetSelectorComponent {
     isDirty() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: FacetSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacetSelectorComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatNavList, MatListItem], template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
         }] });
@@ -7557,10 +7733,10 @@ class NaturalInputComponent {
         }
         return selection;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldName: { classPropertyName: "searchFieldName", publicName: "searchFieldName", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: true, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldName: { classPropertyName: "searchFieldName", publicName: "searchFieldName", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: true, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-input', imports: [
                         MatFormField,
@@ -7575,11 +7751,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         NaturalIconDirective,
                         MatIconButton,
                     ], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"] }]
-        }], propDecorators: { placeholder: [{
+        }], propDecorators: { ripple: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatRipple), { isSignal: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], placeholder: [{
                 type: Input
-            }], selection: [{
+            }], searchFieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFieldName", required: false }] }], selection: [{
                 type: Input
-            }], focus: [{
+            }], facets: [{ type: i0.Input, args: [{ isSignal: true, alias: "facets", required: true }] }], dropdownTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownTitle", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], focus: [{
                 type: HostListener,
                 args: ['focus']
             }] } });
@@ -7610,13 +7786,13 @@ class NaturalGroupComponent {
         this.innerSelections.splice(index, 1);
         this.selectionChange.emit(this.innerSelections);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: true, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        [facets]=\"facets()\"\n        [selection]=\"selection\"\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [facets]=\"facets()\"\n    [placeholder]=\"placeholder()\"\n    [dropdownTitle]=\"dropdownTitle()\"\n    (selectionChange)=\"addInput($event)\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: true, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        [facets]=\"facets()\"\n        [selection]=\"selection\"\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [facets]=\"facets()\"\n    [placeholder]=\"placeholder()\"\n    [dropdownTitle]=\"dropdownTitle()\"\n    (selectionChange)=\"addInput($event)\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-group', imports: [NaturalInputComponent], template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        [facets]=\"facets()\"\n        [selection]=\"selection\"\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [facets]=\"facets()\"\n    [placeholder]=\"placeholder()\"\n    [dropdownTitle]=\"dropdownTitle()\"\n    (selectionChange)=\"addInput($event)\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
-        }], propDecorators: { selections: [{
+        }], propDecorators: { newValueInput: [{ type: i0.ViewChild, args: ['newValueInput', { isSignal: true }] }], dropdownTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownTitle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], facets: [{ type: i0.Input, args: [{ isSignal: true, alias: "facets", required: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selections: [{
                 type: Input
             }] } });
 
@@ -7687,10 +7863,10 @@ class NaturalSearchComponent {
         this.#innerSelections.set(selections);
         this.selectionChange.emit(selections);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: false, isRequired: false, transformFunction: null }, multipleGroups: { classPropertyName: "multipleGroups", publicName: "multipleGroups", isSignal: true, isRequired: false, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: false, isRequired: false, transformFunction: null }, multipleGroups: { classPropertyName: "multipleGroups", publicName: "multipleGroups", isSignal: true, isRequired: false, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-search', imports: [
                         NgClass,
@@ -7702,9 +7878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         NaturalIconDirective,
                         MatDivider,
                     ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
-        }], propDecorators: { facets: [{
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], facets: [{
                 type: Input
-            }], selections: [{
+            }], multipleGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleGroups", required: false }] }], dropdownTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownTitle", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selections: [{
                 type: Input
             }] } });
 
@@ -7940,10 +8116,10 @@ class NaturalHierarchicSelectorService {
     getAllFetchedNodes() {
         return Array.from(this.nodeCache.values());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8118,10 +8294,10 @@ class NaturalHierarchicSelectorComponent {
         replaceObjectKeepingReference(this.selected(), organizedFlatNodesSelection);
         this.selectionChange.emit(organizedFlatNodesSelection);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: true, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:48px}.selection,.selection .mat-icon{margin-right:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: true, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:48px}.selection,.selection .mat-icon{margin-right:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-hierarchic-selector', imports: [
                         NaturalSearchComponent,
@@ -8145,7 +8321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatRadioButton,
                         NgTemplateOutlet,
                     ], providers: [NaturalHierarchicSelectorService], template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:48px}.selection,.selection .mat-icon{margin-right:10px}\n"] }]
-        }] });
+        }], propDecorators: { displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], searchFacets: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFacets", required: false }] }], searchSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSelections", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], searchSelectionChange: [{ type: i0.Output, args: ["searchSelectionChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent {
     getCondition() {
@@ -8197,10 +8373,10 @@ class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent
     noEmptySelection(selection) {
         return selection[this.configuration.key].length ? selection : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            style=\"margin-right: 20px\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            (selectionChange)=\"selectionChange($event)\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            style=\"margin-right: 20px\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            (selectionChange)=\"selectionChange($event)\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         FormsModule,
@@ -8325,10 +8501,10 @@ class TypeDateRangeComponent {
             return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeDateRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"De\"\n            i18n-placeholder\n            [matDatepicker]=\"from\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [matDatepicker]=\"to\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeDateRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"De\"\n            i18n-placeholder\n            [matDatepicker]=\"from\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [matDatepicker]=\"to\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         FormsModule,
@@ -8344,7 +8520,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }], ctorParameters: () => [] });
 
 class TypeOptionsComponent {
-    data;
     renderedValue = new BehaviorSubject('');
     formControl = new FormControl({}, { nonNullable: true });
     configuration;
@@ -8352,10 +8527,8 @@ class TypeOptionsComponent {
         options: [],
     };
     dropdownRef = inject(NaturalDropdownRef);
-    constructor(
-    // eslint-disable-next-line @angular-eslint/prefer-inject
-    data) {
-        this.data = data;
+    constructor() {
+        const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
         if (!this.configuration.options.length) {
             throw new Error('TypeOptions need options, empty array or null given');
@@ -8388,46 +8561,72 @@ class TypeOptionsComponent {
     isDirty() {
         return this.formControl.dirty;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeOptionsComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeOptionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeOptionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeOptionsComponent, decorators: [{
             type: Component,
             args: [{ imports: [FormsModule, ReactiveFormsModule, MatButtonToggleGroup, MatButtonToggle], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NATURAL_DROPDOWN_DATA]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class TypeBooleanComponent extends TypeOptionsComponent {
-    constructor() {
-        const data = inject(NATURAL_DROPDOWN_DATA);
-        // Set up options from hardcoded conditions with custom labels from config
-        const configuration = {
-            options: [
-                {
-                    display: data.configuration.displayWhenActive,
-                    condition: { equal: { value: true } },
-                },
-                {
-                    display: data.configuration.displayWhenInactive,
-                    condition: { equal: { value: false } },
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeBooleanComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", providers: [
+            {
+                provide: NATURAL_DROPDOWN_DATA,
+                useFactory: () => {
+                    const data = inject(NATURAL_DROPDOWN_DATA, {
+                        skipSelf: true,
+                    });
+                    // Set up options from hardcoded conditions with custom labels from config
+                    return {
+                        ...data,
+                        configuration: {
+                            options: [
+                                {
+                                    display: data.configuration.displayWhenActive,
+                                    condition: { equal: { value: true } },
+                                },
+                                {
+                                    display: data.configuration.displayWhenInactive,
+                                    condition: { equal: { value: false } },
+                                },
+                            ],
+                        },
+                    };
                 },
-            ],
-        };
-        const typeOptionsData = {
-            ...data,
-            ...{ configuration: configuration },
-        };
-        super(typeOptionsData);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TypeBooleanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TypeBooleanComponent, decorators: [{
             type: Component,
-            args: [{ imports: [FormsModule, ReactiveFormsModule, MatButtonToggleGroup, MatButtonToggle], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ imports: [FormsModule, ReactiveFormsModule, MatButtonToggleGroup, MatButtonToggle], providers: [
+                        {
+                            provide: NATURAL_DROPDOWN_DATA,
+                            useFactory: () => {
+                                const data = inject(NATURAL_DROPDOWN_DATA, {
+                                    skipSelf: true,
+                                });
+                                // Set up options from hardcoded conditions with custom labels from config
+                                return {
+                                    ...data,
+                                    configuration: {
+                                        options: [
+                                            {
+                                                display: data.configuration.displayWhenActive,
+                                                condition: { equal: { value: true } },
+                                            },
+                                            {
+                                                display: data.configuration.displayWhenInactive,
+                                                condition: { equal: { value: false } },
+                                            },
+                                        ],
+                                    },
+                                };
+                            },
+                        },
+                    ], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
+        }] });
 
 /*
  * Public API Surface of natural-search dropdown components
@@ -8440,13 +8639,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 const commonImageMimeTypes = 'image/avif,image/bmp,image/x-ms-bmp,image/gif,image/heic,image/heif,image/jpeg,image/pjpeg,image/png,image/svg+xml,image/svg,image/webp';
 function acceptType(accept, type, filename) {
-    if (!accept.trim()) {
+    const mimeAndExtensions = accept
+        .trim()
+        .toLowerCase()
+        .split(',')
+        .map(s => s.trim())
+        .filter(s => s);
+    if (!mimeAndExtensions.length) {
         return true;
     }
     type = type.toLowerCase();
     filename = filename.toLowerCase();
-    return accept.split(',').some(mimeOrExtension => {
-        mimeOrExtension = mimeOrExtension.trim().toLowerCase();
+    const mimeAsExtensions = mimeAndExtensions
+        .map(s => /^[^/]+\/(.*)$/.exec(s)?.[1])
+        .filter(s => s)
+        .map(s => '.' + s);
+    return [...mimeAndExtensions, ...mimeAsExtensions].some(mimeOrExtension => {
         if (mimeOrExtension.startsWith('.')) {
             return filename.endsWith(mimeOrExtension);
         }
@@ -8597,10 +8805,10 @@ class NaturalFileService {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -8804,14 +9012,14 @@ class NaturalAbstractFile {
             this.filesChange$.observed ||
             (this.broadcast && this.naturalFileService.filesChanged.observed));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractFile, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, fileSelectionDisabled: { classPropertyName: "fileSelectionDisabled", publicName: "fileSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, broadcast: { classPropertyName: "broadcast", publicName: "broadcast", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractFile, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, fileSelectionDisabled: { classPropertyName: "fileSelectionDisabled", publicName: "fileSelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, broadcast: { classPropertyName: "broadcast", publicName: "broadcast", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAbstractFile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAbstractFile, decorators: [{
             type: Directive
-        }], propDecorators: { broadcast: [{
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], fileSelectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSelectionDisabled", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], broadcast: [{
                 type: Input
-            }], onChange: [{
+            }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], onChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
             }] } });
@@ -8890,10 +9098,10 @@ class NaturalFileDropDirective extends NaturalAbstractFile {
         stopEvent(event);
         this.closeDrags();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NaturalFileDropDirective, isStandalone: true, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: { fileOver: "fileOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" }, properties: { "class.natural-file-over": "this.fileOverClass" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NaturalFileDropDirective, isStandalone: true, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: { fileOver: "fileOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" }, properties: { "class.natural-file-over": "this.fileOverClass" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not([naturalFileSelect])[naturalFileDrop]',
@@ -8901,7 +9109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         }], propDecorators: { fileOverClass: [{
                 type: HostBinding,
                 args: ['class.natural-file-over']
-            }], onDrop: [{
+            }], fileOver: [{ type: i0.Output, args: ["fileOver"] }], onDrop: [{
                 type: HostListener,
                 args: ['drop', ['$event']]
             }], onDragOver: [{
@@ -8922,15 +9130,15 @@ class NaturalFileSelectDirective extends NaturalAbstractFile {
      * Override parent to enable it by default
      */
     selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not([naturalFileDrop])[naturalFileSelect]',
                 }]
-        }] });
+        }], propDecorators: { selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }] } });
 
 // @dynamic
 class NaturalFileComponent {
@@ -9060,10 +9268,10 @@ class NaturalFileComponent {
         reader.readAsBinaryString(file);
         return subject.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, formCtrl: { classPropertyName: "formCtrl", publicName: "formCtrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "height()" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, formCtrl: { classPropertyName: "formCtrl", publicName: "formCtrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "height()" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-file', imports: [
                         NaturalFileDropDirective,
@@ -9076,9 +9284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     ], host: {
                         '[style.height.px]': 'height()',
                     }, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept()\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action()\"\n    [class.suggest-upload]=\"!model && action() === 'upload'\"\n    [fileSelectionDisabled]=\"action() !== 'upload'\"\n    [matRippleDisabled]=\"!action()\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize()\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action() === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action() === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action() | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"] }]
-        }], propDecorators: { model: [{
+        }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], backgroundSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundSize", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], uploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploader", required: false }] }], model: [{
                 type: Input
-            }] } });
+            }], formCtrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formCtrl", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
 
 /*
  * Public API Surface of natural
@@ -9089,13 +9297,13 @@ class NaturalFixedButtonComponent {
     link = input(null, ...(ngDevMode ? [{ debugName: "link" }] : []));
     color = input('accent', ...(ngDevMode ? [{ debugName: "color" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button mat-fab [color]=\"color()\" [disabled]=\"disabled()\" [routerLink]=\"link()\">\n    <mat-icon [naturalIcon]=\"icon()\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button mat-fab [color]=\"color()\" [disabled]=\"disabled()\" [routerLink]=\"link()\">\n    <mat-icon [naturalIcon]=\"icon()\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-fixed-button', imports: [MatFabButton, RouterLink, MatIcon, NaturalIconDirective], template: "<button mat-fab [color]=\"color()\" [disabled]=\"disabled()\" [routerLink]=\"link()\">\n    <mat-icon [naturalIcon]=\"icon()\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"] }]
-        }] });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /*
  * Public API Surface of natural
@@ -9132,10 +9340,10 @@ class NaturalFixedButtonDetailComponent {
             this.delete.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-fixed-button-detail', imports: [NaturalFixedButtonComponent, MatTooltip], template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { model: [{
@@ -9144,7 +9352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], form: [{
                 type: Input,
                 args: [{ required: true }]
-            }] } });
+            }], create: [{ type: i0.Output, args: ["create"] }], delete: [{ type: i0.Output, args: ["delete"] }] } });
 
 /*
  * Public API Surface of natural
@@ -9172,10 +9380,10 @@ class NaturalHierarchicSelectorDialogComponent {
         };
         this.dialogRef.close(result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowSelectAll]=\"config.allowSelectAll ?? false\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowSelectAll]=\"config.allowSelectAll ?? false\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButton], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowSelectAll]=\"config.allowSelectAll ?? false\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n" }]
         }], ctorParameters: () => [] });
@@ -9189,10 +9397,10 @@ class NaturalHierarchicSelectorDialogService {
         };
         return this.dialog.open(NaturalHierarchicSelectorDialogComponent, defaults(dialogConfig, defaultDialogConfig));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -9633,10 +9841,10 @@ class NaturalPanelsService {
             dialog.updatePosition(position);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPanelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPanelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPanelsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPanelsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -9654,10 +9862,10 @@ class NaturalPanelsComponent {
     ngOnDestroy() {
         this.panelsService.stop();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalPanelsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalPanelsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'natural-panels',
@@ -9874,10 +10082,10 @@ class NaturalRelationsComponent {
         }
         return hierarchicSelectorConfig.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocompleteSelectorFilter: { classPropertyName: "autocompleteSelectorFilter", publicName: "autocompleteSelectorFilter", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, main: { classPropertyName: "main", publicName: "main", isSignal: false, isRequired: true, transformFunction: null }, hierarchicSelectorFilters: { classPropertyName: "hierarchicSelectorFilters", publicName: "hierarchicSelectorFilters", isSignal: true, isRequired: false, transformFunction: null }, hierarchicSelectorConfig: { classPropertyName: "hierarchicSelectorConfig", publicName: "hierarchicSelectorConfig", isSignal: true, isRequired: false, transformFunction: null }, otherName: { classPropertyName: "otherName", publicName: "otherName", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocompleteSelectorFilter: { classPropertyName: "autocompleteSelectorFilter", publicName: "autocompleteSelectorFilter", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, main: { classPropertyName: "main", publicName: "main", isSignal: false, isRequired: true, transformFunction: null }, hierarchicSelectorFilters: { classPropertyName: "hierarchicSelectorFilters", publicName: "hierarchicSelectorFilters", isSignal: true, isRequired: false, transformFunction: null }, hierarchicSelectorConfig: { classPropertyName: "hierarchicSelectorConfig", publicName: "hierarchicSelectorConfig", isSignal: true, isRequired: false, transformFunction: null }, otherName: { classPropertyName: "otherName", publicName: "otherName", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-relations', imports: [
                         NgTemplateOutlet,
@@ -9900,15 +10108,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatProgressSpinner,
                         NaturalSelectComponent,
                     ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
-        }], propDecorators: { service: [{
+        }], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NaturalSelectComponent), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], service: [{
                 type: Input,
                 args: [{ required: true }]
-            }], disabled: [{
+            }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocompleteSelectorFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteSelectorFilter", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], disabled: [{
                 type: Input
             }], main: [{
                 type: Input,
                 args: [{ required: true }]
-            }], otherName: [{
+            }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], hierarchicSelectorFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "hierarchicSelectorFilters", required: false }] }], hierarchicSelectorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "hierarchicSelectorConfig", required: false }] }], otherName: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -9946,10 +10154,10 @@ class NaturalSelectEnumComponent extends AbstractSelect {
     getDisplayFn() {
         throw new Error('This should never be called');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSelectEnumComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: { classPropertyName: "enumName", publicName: "enumName", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n    <mat-select\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple()\"\n        (selectionChange)=\"propagateValue($event.value)\"\n        (blur)=\"onBlur()\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectEnumComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: { classPropertyName: "enumName", publicName: "enumName", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: false, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n    <mat-select\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple()\"\n        (selectionChange)=\"propagateValue($event.value)\"\n        (blur)=\"onBlur()\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-select-enum', imports: [
                         MatFormField,
@@ -9962,11 +10170,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         AsyncPipe,
                         MatOption,
                     ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n    <mat-select\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple()\"\n        (selectionChange)=\"propagateValue($event.value)\"\n        (blur)=\"onBlur()\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
-        }], propDecorators: { nullLabel: [{
+        }], propDecorators: { enumName: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumName", required: true }] }], nullLabel: [{
                 type: Input
             }], optionDisabled: [{
                 type: Input
-            }] } });
+            }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }] } });
 
 function defaultDisplayFn(item) {
     if (!item) {
@@ -10082,10 +10290,10 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
     getSelectKey() {
         return this.config?.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-select-hierarchic', imports: [
                         MatFormField,
@@ -10108,7 +10316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Input
             }], config: [{
                 type: Input
-            }] } });
+            }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }] } });
 
 /*
  * Public API Surface of natural
@@ -10153,10 +10361,10 @@ class NaturalSidenavStackService {
     next() {
         this.currentSidenav.next(this.sidenavs[this.sidenavs.length - 1]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavStackService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavStackService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavStackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -10341,19 +10549,19 @@ class NaturalSidenavService {
             this.sessionStorage.setItem(this.openedStorageKeyWithName, this.opened ? 'true' : 'false');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class NaturalSidenavComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'natural-sidenav',
@@ -10419,24 +10627,24 @@ class NaturalSidenavContainerComponent {
     toggleMinimized() {
         this.sidenavService.toggleMinimized();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.0", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mobileAutoClose: { classPropertyName: "mobileAutoClose", publicName: "mobileAutoClose", isSignal: true, isRequired: false, transformFunction: null }, minimizedWidth: { classPropertyName: "minimizedWidth", publicName: "minimizedWidth", isSignal: true, isRequired: false, transformFunction: null }, noScroll: { classPropertyName: "noScroll", publicName: "noScroll", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [class.menuMinimized]=\"sidenavService.isMinimized\"\n        [class.modeSide]=\"sidenavService.activeMode === 'side'\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth() ? minimizedWidth() : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth() ? minimizedWidth() : null\"\n        [position]=\"position()\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.7", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mobileAutoClose: { classPropertyName: "mobileAutoClose", publicName: "mobileAutoClose", isSignal: true, isRequired: false, transformFunction: null }, minimizedWidth: { classPropertyName: "minimizedWidth", publicName: "minimizedWidth", isSignal: true, isRequired: false, transformFunction: null }, noScroll: { classPropertyName: "noScroll", publicName: "noScroll", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [class.menuMinimized]=\"sidenavService.isMinimized\"\n        [class.modeSide]=\"sidenavService.activeMode === 'side'\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth() ? minimizedWidth() : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth() ? minimizedWidth() : null\"\n        [position]=\"position()\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-sidenav-container', imports: [MatSidenav, MatSidenavContainer, MatSidenavContent], providers: [NaturalSidenavService], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [class.menuMinimized]=\"sidenavService.isMinimized\"\n        [class.modeSide]=\"sidenavService.activeMode === 'side'\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth() ? minimizedWidth() : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth() ? minimizedWidth() : null\"\n        [position]=\"position()\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
-        }], propDecorators: { noScroll: [{
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mobileAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileAutoClose", required: false }] }], minimizedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizedWidth", required: false }] }], noScroll: [{
                 type: HostBinding,
                 args: ['attr.no-scroll']
             }, {
                 type: Input
-            }] } });
+            }], menuSidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenav), { isSignal: true }] }] } });
 
 class NaturalSidenavContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-sidenav-content', template: '<ng-content />', styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }]
         }] });
@@ -10452,13 +10660,13 @@ class NaturalStampComponent {
         const same = item.updater?.id === item.creator?.id && item.updateDate && item.updateDate === item.creationDate;
         return !same && (!!item.updateDate || !!item.updater);
     }, ...(ngDevMode ? [{ debugName: "showUpdate" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let theItem = item();\n@if (theItem.creationDate || theItem.creator) {\n    <div>\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        @if (theItem.creator) {\n            <span>{{ theItem.creator.fullName || theItem.creator.name }}</span>\n        }\n        @if (theItem.creator && theItem.creationDate) {\n            <span>,&nbsp;</span>\n        }\n        @if (theItem.creationDate) {\n            <span>{{ theItem.creationDate | date }} ({{ theItem.creationDate | timeAgo }})</span>\n        }\n    </div>\n}\n\n@if (showUpdate()) {\n    <div>\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        @if (theItem.updater) {\n            <span>{{ theItem.updater.fullName || theItem.updater.name }}</span>\n        }\n        @if (theItem.updater && theItem.updateDate) {\n            <span>,&nbsp;</span>\n        }\n        @if (theItem.updateDate) {\n            <span>{{ theItem.updateDate | date }} ({{ theItem.updateDate | timeAgo }})</span>\n        }\n    </div>\n}\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let theItem = item();\n@if (theItem.creationDate || theItem.creator) {\n    <div>\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        @if (theItem.creator) {\n            <span>{{ theItem.creator.fullName || theItem.creator.name }}</span>\n        }\n        @if (theItem.creator && theItem.creationDate) {\n            <span>,&nbsp;</span>\n        }\n        @if (theItem.creationDate) {\n            <span>{{ theItem.creationDate | date }} ({{ theItem.creationDate | timeAgo }})</span>\n        }\n    </div>\n}\n\n@if (showUpdate()) {\n    <div>\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        @if (theItem.updater) {\n            <span>{{ theItem.updater.fullName || theItem.updater.name }}</span>\n        }\n        @if (theItem.updater && theItem.updateDate) {\n            <span>,&nbsp;</span>\n        }\n        @if (theItem.updateDate) {\n            <span>{{ theItem.updateDate | date }} ({{ theItem.updateDate | timeAgo }})</span>\n        }\n    </div>\n}\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalStampComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalStampComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-stamp', imports: [DatePipe, NaturalTimeAgoPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let theItem = item();\n@if (theItem.creationDate || theItem.creator) {\n    <div>\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        @if (theItem.creator) {\n            <span>{{ theItem.creator.fullName || theItem.creator.name }}</span>\n        }\n        @if (theItem.creator && theItem.creationDate) {\n            <span>,&nbsp;</span>\n        }\n        @if (theItem.creationDate) {\n            <span>{{ theItem.creationDate | date }} ({{ theItem.creationDate | timeAgo }})</span>\n        }\n    </div>\n}\n\n@if (showUpdate()) {\n    <div>\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        @if (theItem.updater) {\n            <span>{{ theItem.updater.fullName || theItem.updater.name }}</span>\n        }\n        @if (theItem.updater && theItem.updateDate) {\n            <span>,&nbsp;</span>\n        }\n        @if (theItem.updateDate) {\n            <span>{{ theItem.updateDate | date }} ({{ theItem.updateDate | timeAgo }})</span>\n        }\n    </div>\n}\n" }]
-        }] });
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
 
 /*
  * Public API Surface of natural
@@ -10505,13 +10713,13 @@ class NaturalTableButtonComponent {
             return 'none';
         }
     }, ...(ngDevMode ? [{ debugName: "type" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [class]=\"iconClass()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    target=\"_blank\"\n                    [class]=\"iconClass()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [class]=\"iconClass()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    target=\"_blank\"\n                    [class]=\"iconClass()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-table-button', imports: [MatIcon, NaturalIconDirective, MatButton, MatIconButton, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [class]=\"iconClass()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    target=\"_blank\"\n                    [class]=\"iconClass()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
-        }] });
+        }], propDecorators: { queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], preserveFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveFragment", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
 /*
  * Public API Surface of natural
@@ -10685,10 +10893,10 @@ class AvatarService {
             .map(letter => letter.charCodeAt(0))
             .reduce((previous, current) => previous + current);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AvatarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AvatarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AvatarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AvatarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -10722,7 +10930,7 @@ class NaturalAvatarComponent {
             currentIndex: this.findNextNonFailingIndex(-1, sources),
             sources,
         };
-    });
+    }, ...(ngDevMode ? [{ debugName: "sources" }] : []));
     currentSource = computed(() => {
         const sources = this.sources();
         return sources.sources[sources.currentIndex];
@@ -10783,8 +10991,8 @@ class NaturalAvatarComponent {
             height: this.size() + 'px',
         };
     }, ...(ngDevMode ? [{ debugName: "imageStyle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, gravatar: { classPropertyName: "gravatar", publicName: "gravatar", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, decorated: { classPropertyName: "decorated", publicName: "decorated", isSignal: true, isRequired: false, transformFunction: null }, textSizeRatio: { classPropertyName: "textSizeRatio", publicName: "textSizeRatio", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, fgColor: { classPropertyName: "fgColor", publicName: "fgColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, textMaximumLength: { classPropertyName: "textMaximumLength", publicName: "textMaximumLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "size()", "style.width.px": "size()", "class.decorated": "decorated()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, gravatar: { classPropertyName: "gravatar", publicName: "gravatar", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, decorated: { classPropertyName: "decorated", publicName: "decorated", isSignal: true, isRequired: false, transformFunction: null }, textSizeRatio: { classPropertyName: "textSizeRatio", publicName: "textSizeRatio", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, fgColor: { classPropertyName: "fgColor", publicName: "fgColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, textMaximumLength: { classPropertyName: "textMaximumLength", publicName: "textMaximumLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "size()", "style.width.px": "size()", "class.decorated": "decorated()" } }, ngImport: i0, template: `
         @let source = currentSource();
         <div class="avatar-container" [style.height.px]="size()" [style.width.px]="size()">
             @if (source && source?.isTextual()) {
@@ -10807,7 +11015,7 @@ class NaturalAvatarComponent {
         </div>
     `, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-avatar', imports: [NgStyle, AsyncPipe], template: `
         @let source = currentSource();
@@ -10835,7 +11043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         '[style.width.px]': 'size()',
                         '[class.decorated]': 'decorated()',
                     }, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
-        }] });
+        }], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], gravatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "gravatar", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], decorated: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorated", required: false }] }], textSizeRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeRatio", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], fgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fgColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], textMaximumLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "textMaximumLength", required: false }] }] } });
 
 /*
  * Public API Surface of ngx-avatar
@@ -10922,10 +11130,10 @@ class NaturalMatomoService {
             this.referrerUrl = currentUrl;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalMatomoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalMatomoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalMatomoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalMatomoService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -11008,10 +11216,10 @@ class NaturalErrorHandler extends ErrorHandler {
                 .subscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalErrorHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalErrorHandler, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -11072,15 +11280,15 @@ class NaturalHttpPrefixDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: { classPropertyName: "naturalHttpPrefix", publicName: "naturalHttpPrefix", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "ngModelChange": "httpize($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.7", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: { classPropertyName: "naturalHttpPrefix", publicName: "naturalHttpPrefix", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "ngModelChange": "httpize($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[naturalHttpPrefix]',
                 }]
-        }], propDecorators: { httpize: [{
+        }], propDecorators: { naturalHttpPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalHttpPrefix", required: false }] }], httpize: [{
                 type: HostListener,
                 args: ['ngModelChange', ['$event']]
             }] } });
@@ -11144,5 +11352,5 @@ function graphqlQuerySigner(key) {
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarService, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, cloneDeepButSkipFile, collectErrors, commonImageMimeTypes, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, hasFilesAndProcessDate, ifValid, integer, isFile, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, onHistoryEvent, possibleComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
+export { AvatarService, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorMessagePipe, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, cloneDeepButSkipFile, collectErrors, commonImageMimeTypes, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, greaterThan, hasFilesAndProcessDate, ifValid, integer, isFile, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, nfcCardHex, onHistoryEvent, possibleComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, time, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, url, urlPattern, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
 //# sourceMappingURL=ecodev-natural.mjs.map