@ecodev/natural 66.0.5 → 66.0.7

package/fesm2022/ecodev-natural.mjs

@@ -8,9 +8,9 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatButton, MatIconButton, MatFabButton } from '@angular/material/button';
-import { Observable, switchMap, take, BehaviorSubject, of, timer, tap, endWith, last, EMPTY, finalize, Subject, merge as merge$1, first as first$1, takeUntil as takeUntil$1, map as map$1, ReplaySubject, debounceTime, raceWith, mergeMap, shareReplay, catchError, forkJoin, combineLatest, from, fromEvent, filter as filter$1, startWith as startWith$1, asyncScheduler, throwError } from 'rxjs';
+import { Observable, switchMap, take, BehaviorSubject, of, timer, tap, endWith, last, EMPTY, finalize, Subject, merge as merge$1, startWith, first as first$1, takeUntil as takeUntil$1, map as map$1, ReplaySubject, debounceTime, raceWith, mergeMap, shareReplay, catchError, forkJoin, combineLatest, from, fromEvent, filter as filter$1, asyncScheduler, throwError } from 'rxjs';
 import { takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import { filter, switchMap as switchMap$1, first, map, takeUntil, takeWhile, debounceTime as debounceTime$1, tap as tap$1, shareReplay as shareReplay$1, startWith, distinctUntilChanged, finalize as finalize$1, throttleTime } from 'rxjs/operators';
+import { filter, switchMap as switchMap$1, first, map, takeUntil, takeWhile, debounceTime as debounceTime$1, tap as tap$1, shareReplay as shareReplay$1, startWith as startWith$1, distinctUntilChanged, finalize as finalize$1, throttleTime } from 'rxjs/operators';
 import { mergeWith, defaultsDeep, pick, defaults, isEmpty, isEqual as isEqual$1 } from 'es-toolkit/compat';
 import { MatTableDataSource, MatTable, MatHeaderCellDef, MatHeaderRowDef, MatColumnDef, MatCellDef, MatRowDef, MatHeaderCell, MatCell, MatHeaderRow, MatRow } from '@angular/material/table';
 import { DataSource, SelectionModel } from '@angular/cdk/collections';
@@ -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.
@@ -3012,6 +3006,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 }]
         }] });
 
+const possibleNullableOperators = [
+    {
+        key: 'any',
+        label: $localize `avec`,
+    },
+    {
+        key: 'none',
+        label: $localize `sans`,
+    },
+];
 const possibleComparableOperators = [
     {
         key: 'less',
@@ -3034,6 +3038,10 @@ const possibleComparableOperators = [
         label: '>',
     },
 ];
+const possibleNullComparableOperators = [
+    ...possibleComparableOperators,
+    ...possibleNullableOperators,
+];
 const possibleDiscreteOperators = [
     {
         key: 'is',
@@ -3043,14 +3051,7 @@ const possibleDiscreteOperators = [
         key: 'isnot',
         label: $localize `n'est pas`,
     },
-    {
-        key: 'any',
-        label: $localize `avec`,
-    },
-    {
-        key: 'none',
-        label: $localize `sans`,
-    },
+    ...possibleNullableOperators,
 ];
 
 /**
@@ -3096,7 +3097,8 @@ class TypeDateComponent {
     operatorCtrl = new FormControl('equal', { nonNullable: true });
     valueCtrl = new FormControl(null);
     todayCtrl = new FormControl(false);
-    operators = possibleComparableOperators;
+    requireValueCtrl = false;
+    operators;
     form = new FormGroup({
         operator: this.operatorCtrl,
         value: this.valueCtrl,
@@ -3105,10 +3107,12 @@ class TypeDateComponent {
     defaults = {
         min: null,
         max: null,
+        nullable: false,
     };
     constructor() {
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
+        this.operators = this.configuration.nullable ? possibleNullComparableOperators : possibleComparableOperators;
         this.todayCtrl.valueChanges.pipe(takeUntilDestroyed()).subscribe(isToday => {
             if (isToday) {
                 this.valueCtrl.setValue(this.dateAdapter.today());
@@ -3121,15 +3125,21 @@ class TypeDateComponent {
         merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges, this.todayCtrl.valueChanges)
             .pipe(takeUntilDestroyed())
             .subscribe(() => this.renderedValue.next(this.getRenderedValue()));
-        this.initValidators();
+        // Immediately initValidators and everytime the operator change later
+        this.operatorCtrl.valueChanges.pipe(startWith(null)).subscribe(() => this.initValidators());
         this.reloadCondition(data.condition);
     }
     getCondition() {
-        if (!this.valueCtrl.value) {
+        let operator = this.operatorCtrl.value;
+        if (operator === 'any') {
+            return { null: { not: true } };
+        }
+        else if (operator === 'none') {
+            return { null: { not: false } };
+        }
+        else if (!this.valueCtrl.value) {
             return {};
         }
-        const condition = {};
-        let operator = this.operatorCtrl.value;
         let date;
         let dayAfter;
         if (this.todayCtrl.value) {
@@ -3141,8 +3151,10 @@ class TypeDateComponent {
             dayAfter = serialize(this.dateAdapter, this.getDayAfter(this.valueCtrl.value));
         }
         if (operator === 'equal') {
-            condition.greaterOrEqual = { value: date };
-            condition.less = { value: dayAfter };
+            return {
+                greaterOrEqual: { value: date },
+                less: { value: dayAfter },
+            };
         }
         else {
             // Transparently adapt exclusive/inclusive ranges
@@ -3156,9 +3168,8 @@ class TypeDateComponent {
                     date = dayAfter;
                 }
             }
-            condition[operator] = { value: date };
+            return { [operator]: { value: date } };
         }
-        return condition;
     }
     isValid() {
         return this.form.valid;
@@ -3176,12 +3187,19 @@ class TypeDateComponent {
             this.setTodayOrDate(condition.greaterOrEqual.value);
             return;
         }
-        for (const operator of this.operators) {
-            const reloadedOperator = condition[operator.key];
-            if (reloadedOperator) {
-                this.operatorCtrl.setValue(operator.key);
-                this.setTodayOrDate(reloadedOperator.value);
-            }
+        const operatorKey = this.conditionToOperatorKey(condition);
+        this.operatorCtrl.setValue(operatorKey);
+        this.setTodayOrDate(condition[operatorKey]?.value);
+    }
+    conditionToOperatorKey(condition) {
+        if (condition.null?.not) {
+            return 'any';
+        }
+        else if (condition.null && !condition.null.not) {
+            return 'none';
+        }
+        else {
+            return this.operators.find(operator => condition[operator.key])?.key ?? 'equal';
         }
     }
     setTodayOrDate(value) {
@@ -3195,7 +3213,9 @@ class TypeDateComponent {
         }
     }
     initValidators() {
-        const validators = [Validators.required];
+        const blacklist = ['any', 'none'];
+        this.requireValueCtrl = !blacklist.includes(this.operatorCtrl.value);
+        const validators = this.requireValueCtrl ? [Validators.required] : [];
         if (this.configuration.min) {
             validators.push(dateMin(this.dateAdapter, this.configuration.min));
         }
@@ -3203,6 +3223,7 @@ class TypeDateComponent {
             validators.push(dateMax(this.dateAdapter, this.configuration.max));
         }
         this.valueCtrl.setValidators(validators);
+        this.valueCtrl.updateValueAndValidity();
     }
     getDayAfter(date) {
         return this.dateAdapter.addCalendarDays(this.dateAdapter.clone(date), 1);
@@ -3216,7 +3237,10 @@ class TypeDateComponent {
         else if (this.valueCtrl.value) {
             value = this.dateAdapter.format(this.valueCtrl.value, this.dateFormats.display.dateInput);
         }
-        if (operator && value) {
+        if (operator && ['any', 'none'].includes(operator.key)) {
+            return operator.label;
+        }
+        else if (operator && value) {
             return operator.label + ' ' + value;
         }
         else {
@@ -3224,7 +3248,7 @@ class TypeDateComponent {
         }
     }
     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 subscriptSizing=\"dynamic\">\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 subscriptSizing=\"dynamic\">\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\" [class.nullable]=\"configuration.nullable\">\n    <mat-form-field subscriptSizing=\"dynamic\">\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        <mat-form-field subscriptSizing=\"dynamic\">\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            />\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    }\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form.nullable{grid:auto auto/6em auto}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.7", ngImport: i0, type: TypeDateComponent, decorators: [{
             type: Component,
@@ -3242,7 +3266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatDatepickerInput,
                         MatDatepickerToggle,
                         MatCheckbox,
-                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field subscriptSizing=\"dynamic\">\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 subscriptSizing=\"dynamic\">\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"] }]
+                    ], template: "<form [formGroup]=\"form\" [class.nullable]=\"configuration.nullable\">\n    <mat-form-field subscriptSizing=\"dynamic\">\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        <mat-form-field subscriptSizing=\"dynamic\">\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            />\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    }\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form.nullable{grid:auto auto/6em auto}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"] }]
         }], ctorParameters: () => [] });
 
 function toGraphQLDoctrineFilter(facets, selections) {
@@ -4931,7 +4955,7 @@ class NaturalAbstractModelService {
             // available. To fix that, we can rely on RxJS, which is able to emit synchronously the value we just
             // got from server. Once Apollo Client moves to RxJS (https://github.com/apollographql/apollo-feature-requests/issues/375),
             // we could try to remove `startWith()`.
-            return onlyNetwork.pipe(map(firstValue => onlyCache.pipe(startWith(firstValue))));
+            return onlyNetwork.pipe(map(firstValue => onlyCache.pipe(startWith$1(firstValue))));
         }
         else {
             return of(of(this.getDefaultForServer()));
@@ -5328,7 +5352,7 @@ class NaturalThemeService {
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
     isDarkSystem = toSignal(isPlatformBrowser(this.platformId)
-        ? fromEvent(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')), map$1(e => e.matches))
+        ? fromEvent(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(startWith$1(this.document.defaultView.matchMedia('(prefers-color-scheme: dark)')), map$1(e => e.matches))
         : of(false), { initialValue: false });
     isDark = computed(() => {
         return (this.colorScheme() === ColorScheme.Dark || (this.colorScheme() === ColorScheme.Auto && this.isDarkSystem()));
@@ -6259,7 +6283,7 @@ class NaturalSeoService {
     constructor() {
         const configToken = inject(NATURAL_SEO_CONFIG);
         combineLatest({
-            config: configToken instanceof Observable ? configToken.pipe(startWith$1(this.config)) : of(configToken),
+            config: configToken instanceof Observable ? configToken.pipe(startWith(this.config)) : of(configToken),
             navigationEnd: this.router.events.pipe(filter$1(event => event instanceof NavigationEnd)),
         })
             .pipe(takeUntilDestroyed(), switchMap(({ config }) => {
@@ -6545,7 +6569,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
 class TypeSelectComponent {
     destroyRef = inject(DestroyRef);
     renderedValue = new BehaviorSubject('');
-    list = viewChild(MatSelectionList, ...(ngDevMode ? [{ debugName: "list" }] : []));
     requireValueCtrl = false;
     operators = possibleDiscreteOperators;
     operatorCtrl = new FormControl('is', { nonNullable: true });
@@ -6565,19 +6588,13 @@ class TypeSelectComponent {
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
         // Immediately initValidators and everytime the operator change later
-        this.operatorCtrl.valueChanges.pipe(startWith(null)).subscribe(() => this.initValidators());
+        this.operatorCtrl.valueChanges.pipe(startWith$1(null)).subscribe(() => this.initValidators());
         merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges).subscribe(() => {
             const rendered = this.getRenderedValue();
             this.renderedValue.next(rendered);
         });
         this.reloadCondition(data.condition);
     }
-    ngAfterViewInit() {
-        const list = this.list();
-        if (!this.isMultiple() && list) {
-            list.selectedOptions._multiple = false;
-        }
-    }
     getId(item) {
         if (typeof item === 'object' && item) {
             return item.id || item.value;
@@ -6691,7 +6708,7 @@ class TypeSelectComponent {
         }
     }
     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\" subscriptSizing=\"dynamic\">\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\" subscriptSizing=\"dynamic\">\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\" [multiple]=\"configuration.multiple\">\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.7", ngImport: i0, type: TypeSelectComponent, decorators: [{
             type: Component,
@@ -6704,8 +6721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatOption,
                         MatSelectionList,
                         MatListOption,
-                    ], template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\" subscriptSizing=\"dynamic\">\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: () => [], propDecorators: { list: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSelectionList), { isSignal: true }] }] } });
+                    ], template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\" subscriptSizing=\"dynamic\">\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\" [multiple]=\"configuration.multiple\">\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: () => [] });
 
 class AbstractAssociationSelectComponent {
     configuration;
@@ -6722,7 +6739,7 @@ class AbstractAssociationSelectComponent {
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = data.configuration;
         // Immediately initValidators and everytime the operator change later
-        this.operatorCtrl.valueChanges.pipe(startWith(null)).subscribe(() => this.initValidators());
+        this.operatorCtrl.valueChanges.pipe(startWith$1(null)).subscribe(() => this.initValidators());
         merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges).subscribe(() => {
             const rendered = this.getRenderedValue();
             this.renderedValue.next(rendered);
@@ -7374,34 +7391,44 @@ class TypeNumberComponent {
     renderedValue = new BehaviorSubject('');
     configuration;
     operatorCtrl = new FormControl('equal', { nonNullable: true });
-    valueCtrl = new FormControl();
+    valueCtrl = new FormControl(null);
     matcher = new InvalidWithValueStateMatcher$1();
     form = new FormGroup({
         operator: this.operatorCtrl,
         value: this.valueCtrl,
     });
-    operators = possibleComparableOperators;
+    requireValueCtrl = false;
+    operators;
     defaults = {
         min: null,
         max: null,
         step: null,
+        nullable: false,
     };
     constructor() {
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
+        this.operators = this.configuration.nullable ? possibleNullComparableOperators : possibleComparableOperators;
         merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges).subscribe(() => {
             const rendered = this.getRenderedValue();
             this.renderedValue.next(rendered);
         });
-        this.initValidators();
+        // Immediately initValidators and everytime the operator change later
+        this.operatorCtrl.valueChanges.pipe(startWith$1(null)).subscribe(() => this.initValidators());
         this.reloadCondition(data.condition);
     }
     getCondition() {
-        const condition = {};
-        condition[this.operatorCtrl.value] = {
-            value: this.valueCtrl.value,
-        };
-        return condition;
+        const key = this.operatorCtrl.value;
+        const value = this.valueCtrl.value;
+        switch (key) {
+            case 'any':
+                return { null: { not: true } };
+            case 'none':
+                return { null: { not: false } };
+            default: {
+                return { [key]: { value: value } };
+            }
+        }
     }
     isValid() {
         return this.form.valid;
@@ -7418,7 +7445,9 @@ class TypeNumberComponent {
         }
     }
     initValidators() {
-        const validators = [Validators.required];
+        const blacklist = ['any', 'none'];
+        this.requireValueCtrl = !blacklist.includes(this.operatorCtrl.value);
+        const validators = this.requireValueCtrl ? [Validators.required] : [];
         if (typeof this.configuration.min === 'number') {
             validators.push(Validators.min(this.configuration.min));
         }
@@ -7431,34 +7460,45 @@ class TypeNumberComponent {
             validators.push(decimal(decimalCount));
         }
         this.valueCtrl.setValidators(validators);
+        this.valueCtrl.updateValueAndValidity();
     }
     reloadCondition(condition) {
         if (!condition) {
             return;
         }
-        for (const operator of this.operators) {
-            const reloadedCondition = condition[operator.key];
-            if (reloadedCondition) {
-                this.operatorCtrl.setValue(operator.key);
-                this.valueCtrl.setValue(reloadedCondition.value);
-            }
-        }
+        const operatorKey = this.conditionToOperatorKey(condition);
+        this.operatorCtrl.setValue(operatorKey);
+        this.valueCtrl.setValue(condition[operatorKey]?.value);
     }
     getRenderedValue() {
         const operator = this.operators.find(v => v.key === this.operatorCtrl.value);
-        if (this.valueCtrl.value === null || !operator) {
+        if (operator && ['any', 'none'].includes(operator.key)) {
+            return operator.label;
+        }
+        else if (operator && this.valueCtrl.value !== null) {
+            return operator.label + ' ' + this.valueCtrl.value;
+        }
+        else {
             return '';
         }
+    }
+    conditionToOperatorKey(condition) {
+        if (condition.null?.not) {
+            return 'any';
+        }
+        else if (condition.null && !condition.null.not) {
+            return 'none';
+        }
         else {
-            return operator.label + ' ' + this.valueCtrl.value;
+            return this.operators.find(operator => condition[operator.key])?.key ?? 'equal';
         }
     }
     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\" subscriptSizing=\"dynamic\">\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 subscriptSizing=\"dynamic\">\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 ɵ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\n        style=\"margin-right: 1em\"\n        subscriptSizing=\"dynamic\"\n        [style.max-width]=\"configuration.nullable ? '6em' : '4em'\"\n    >\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        <mat-form-field subscriptSizing=\"dynamic\">\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    }\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.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\" subscriptSizing=\"dynamic\">\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 subscriptSizing=\"dynamic\">\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"] }]
+            args: [{ imports: [FormsModule, ReactiveFormsModule, MatFormField, MatLabel, MatError, MatSelect, MatOption, MatInput], template: "<form [formGroup]=\"form\">\n    <mat-form-field\n        style=\"margin-right: 1em\"\n        subscriptSizing=\"dynamic\"\n        [style.max-width]=\"configuration.nullable ? '6em' : '4em'\"\n    >\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        <mat-form-field subscriptSizing=\"dynamic\">\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    }\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class FacetSelectorComponent {
@@ -8335,13 +8375,13 @@ class NaturalHierarchicSelectorComponent {
      * Get list of children, considering given FlatNode id as a parent.
      * Mark loading status individually on nodes.
      */
-    loadChildren(node, contextFilter = null) {
+    loadChildren(node) {
         if (node.hasChildren) {
             return;
         }
         node.isLoading = true;
         this.hierarchicSelectorService
-            .getList(node, contextFilter, null, this.config())
+            .getList(node, this.filters(), null, this.config())
             .pipe(finalize$1(() => (node.isLoading = false)))
             .subscribe(items => node.childrenChange.next(items));
     }
@@ -8368,7 +8408,7 @@ class NaturalHierarchicSelectorComponent {
         this.selectionChange.emit(organizedFlatNodesSelection);
     }
     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 matIconButton 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:40px}.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 ɵ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 matIconButton 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-tree-container-background-color: transparent}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:40px}.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.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8393,7 +8433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatTooltip,
                         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 matIconButton 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:40px}.selection,.selection .mat-icon{margin-right:10px}\n"] }]
+                    ], 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 matIconButton 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-tree-container-background-color: transparent}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:40px}.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 {
@@ -8712,13 +8752,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", 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);
         }
@@ -9272,6 +9321,7 @@ class NaturalFileComponent {
                 formCtrlValue.setValue(this.model);
             }
             this.modelChange.emit(this.model);
+            this.updateImage();
         });
     }
     getDownloadLink() {
@@ -11454,5 +11504,5 @@ function graphqlQuerySigner(key) {
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarService, ColorScheme, 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, NaturalColorSchemerComponent, 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, NaturalThemeChangerComponent, NaturalThemeService, 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, provideThemes, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, time, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, url, urlPattern, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
+export { AvatarService, ColorScheme, 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, NaturalColorSchemerComponent, 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, NaturalThemeChangerComponent, NaturalThemeService, 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, possibleNullComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, provideThemes, 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