@ecodev/natural 66.0.6 → 66.0.8

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';
@@ -27,7 +27,7 @@ import { ApolloLink, NetworkStatus } from '@apollo/client/core';
 import extractFiles from 'extract-files/extractFiles.mjs';
 import isExtractableFile from 'extract-files/isExtractableFile.mjs';
 import { Kind, OperationTypeNode } from 'graphql/language';
-import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass, UpperCasePipe, DatePipe, NgStyle, CommonModule } from '@angular/common';
+import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass, UpperCasePipe, DatePipe, NgStyle } from '@angular/common';
 import { Apollo, gql } from 'apollo-angular';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { MatIconRegistry, MatIcon } from '@angular/material/icon';
@@ -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,34 +5352,44 @@ 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()));
     }, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
-    theme = signal(this.allThemes[0], ...(ngDevMode ? [{ debugName: "theme" }] : []));
-    colorScheme = signal(ColorScheme.Auto, ...(ngDevMode ? [{ debugName: "colorScheme" }] : []));
+    _theme = signal(this.allThemes[0], ...(ngDevMode ? [{ debugName: "_theme" }] : []));
+    /**
+     * Currently selected theme. Use `setTheme()` to select a different theme.
+     */
+    theme = this._theme.asReadonly();
+    _colorScheme = signal(ColorScheme.Auto, ...(ngDevMode ? [{ debugName: "_colorScheme" }] : []));
+    /**
+     * Currently selected color scheme. Use `setColorScheme()` to select a different scheme.
+     */
+    colorScheme = this._colorScheme.asReadonly();
     constructor() {
         effect(() => {
             this.document.documentElement.setAttribute('data-is-dark', this.isDark() ? 'true' : 'false');
         });
         const storedScheme = this.storage.getItem('color-scheme');
         const isValidScheme = storedScheme && Object.values(ColorScheme).includes(storedScheme);
-        this.colorScheme.set(isValidScheme ? storedScheme : ColorScheme.Auto);
+        this._colorScheme.set(isValidScheme ? storedScheme : ColorScheme.Auto);
     }
     /**
      * Set theme in memory, local storage and dom
      */
-    setTheme(name) {
-        this.theme.set(name);
-        this.storage.setItem('theme', name);
-        this.document.documentElement.setAttribute('data-theme', name);
+    setTheme(theme) {
+        if (!this.allThemes.includes(theme)) {
+            throw new Error(`Expecting one of the configured themes: ${this.allThemes.map(t => `'${t}'`).join(', ')}. But got invalid: '${theme}'`);
+        }
+        this._theme.set(theme);
+        this.document.documentElement.setAttribute('data-theme', theme);
     }
     /**
      * Set dark/light/auto
      */
     setColorScheme(scheme, persistInStorage = true) {
-        this.colorScheme.set(scheme); // memory
+        this._colorScheme.set(scheme); // memory
         this.document.documentElement.setAttribute('data-color-scheme', scheme); // dom
         if (persistInStorage) {
             this.storage.setItem('color-scheme', this.colorScheme()); // storage
@@ -6259,7 +6293,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 +6579,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 +6598,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 +6718,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 +6731,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 +6749,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 +7401,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 +7455,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 +7470,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 +8385,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));
     }
@@ -8712,13 +8762,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 +9331,7 @@ class NaturalFileComponent {
                 formCtrlValue.setValue(this.model);
             }
             this.modelChange.emit(this.model);
+            this.updateImage();
         });
     }
     getDownloadLink() {
@@ -11316,11 +11376,11 @@ class NaturalColorSchemerComponent {
     themeService = inject(NaturalThemeService);
     ColorScheme = ColorScheme;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColorSchemerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalColorSchemerComponent, isStandalone: true, selector: "natural-color-schemer", ngImport: i0, template: "<div class=\"nat-horizontal wrapper\">\n    <button\n        matIconButton\n        matTooltip=\"Switch to auto mode\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n    >\n        <mat-icon naturalIcon=\"routine\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Switch to light mode\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n    >\n        <mat-icon naturalIcon=\"light_mode\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Switch to dark mode\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n    >\n        <mat-icon naturalIcon=\"dark_mode\" />\n    </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalColorSchemerComponent, isStandalone: true, selector: "natural-color-schemer", ngImport: i0, template: "<div class=\"nat-horizontal wrapper\">\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me de l'appareil\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n    >\n        <mat-icon naturalIcon=\"routine\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me clair\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n    >\n        <mat-icon naturalIcon=\"light_mode\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me sombre\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n    >\n        <mat-icon naturalIcon=\"dark_mode\" />\n    </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColorSchemerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-color-schemer', imports: [MatIconButton, MatTooltip, NaturalIconDirective, FormsModule, MatIcon], template: "<div class=\"nat-horizontal wrapper\">\n    <button\n        matIconButton\n        matTooltip=\"Switch to auto mode\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n    >\n        <mat-icon naturalIcon=\"routine\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Switch to light mode\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n    >\n        <mat-icon naturalIcon=\"light_mode\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Switch to dark mode\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n    >\n        <mat-icon naturalIcon=\"dark_mode\" />\n    </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
+            args: [{ selector: 'natural-color-schemer', imports: [MatIconButton, MatTooltip, NaturalIconDirective, FormsModule, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nat-horizontal wrapper\">\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me de l'appareil\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Auto)\"\n    >\n        <mat-icon naturalIcon=\"routine\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me clair\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Light)\"\n    >\n        <mat-icon naturalIcon=\"light_mode\" />\n    </button>\n    <button\n        matIconButton\n        matTooltip=\"Th\u00E8me sombre\"\n        i18n-matTooltip\n        matTooltipPosition=\"below\"\n        (click)=\"themeService.setColorScheme(ColorScheme.Dark)\"\n    >\n        <mat-icon naturalIcon=\"dark_mode\" />\n    </button>\n</div>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
         }] });
 
 /*
@@ -11331,20 +11391,11 @@ class NaturalThemeChangerComponent {
     themeService = inject(NaturalThemeService);
     allThemes = inject(NATURAL_THEMES_CONFIG);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalThemeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalThemeChangerComponent, isStandalone: true, selector: "natural-theme-changer", ngImport: i0, template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n    ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n    @for (theme of allThemes; track $index) {\n        <button mat-menu-item (click)=\"themeService.setTheme(theme)\">{{ theme }}</button>\n    }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalThemeChangerComponent, isStandalone: true, selector: "natural-theme-changer", ngImport: i0, template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n    ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n    @for (theme of allThemes; track $index) {\n        <button mat-menu-item (click)=\"themeService.setTheme(theme)\">\n            <mat-icon [fontIcon]=\"themeService.theme() === theme ? 'check' : ''\" />\n            {{ theme }}</button\n        >\n    }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalThemeChangerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-theme-changer', imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatButton,
-                        MatMenuTrigger,
-                        MatMenu,
-                        MatMenuItem,
-                        MatIcon,
-                        NaturalIconDirective,
-                    ], template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n    ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n    @for (theme of allThemes; track $index) {\n        <button mat-menu-item (click)=\"themeService.setTheme(theme)\">{{ theme }}</button>\n    }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
+            args: [{ selector: 'natural-theme-changer', imports: [MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatIcon, NaturalIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button matButton=\"filled\" [matMenuTriggerFor]=\"menu\"\n    ><mat-icon naturalIcon=\"colors\" /> {{ themeService.theme() }}</button\n>\n<mat-menu #menu=\"matMenu\">\n    @for (theme of allThemes; track $index) {\n        <button mat-menu-item (click)=\"themeService.setTheme(theme)\">\n            <mat-icon [fontIcon]=\"themeService.theme() === theme ? 'check' : ''\" />\n            {{ theme }}</button\n        >\n    }\n</mat-menu>\n", styles: [":host{display:block;width:fit-content}.wrapper{border-radius:var(--mat-sys-corner-full);background:var(--mat-sys-surface-bright);padding:5px}\n"] }]
         }] });
 
 /*
@@ -11454,5 +11505,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