@ecodev/natural 62.1.2 → 62.3.0

package/fesm2022/ecodev-natural.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, DestroyRef, Directive, HostBinding, HostListener, InjectionToken, ElementRef, TemplateRef, ViewEncapsulation, ViewChild, Injector, Input, EventEmitter, Output, Pipe, Optional, Inject, LOCALE_ID, APP_INITIALIZER, input, computed, ContentChild, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, PLATFORM_ID, ErrorHandler, importProvidersFrom } from '@angular/core';
+import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, PLATFORM_ID, signal, output, Pipe, Optional, Inject, LOCALE_ID, provideAppInitializer, input, computed, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, NgControl, FormControlDirective, FormControlName } from '@angular/forms';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, PRIMARY_OUTLET, RouterLink, NavigationError, DefaultUrlSerializer, UrlTree } from '@angular/router';
@@ -9,24 +9,24 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angu
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { Observable, BehaviorSubject, of, timer, switchMap as switchMap$1, tap, endWith, last, EMPTY, finalize, Subject, merge as merge$1, first as first$1, take, takeUntil as takeUntil$1, map as map$1, ReplaySubject, debounceTime, raceWith, mergeMap, shareReplay, catchError, forkJoin, combineLatest, from, startWith as startWith$1, filter as filter$1, asyncScheduler } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Observable, BehaviorSubject, of, timer, switchMap as switchMap$1, tap, endWith, last, EMPTY, finalize, Subject, merge as merge$1, first as first$1, take, takeUntil as takeUntil$1, map as map$1, ReplaySubject, debounceTime, raceWith, mergeMap, shareReplay, catchError, forkJoin, combineLatest, from, filter as filter$1, startWith as startWith$1, asyncScheduler, throwError } from 'rxjs';
+import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import { switchMap, first, map, filter, 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 * as i2$2 from '@angular/material/table';
+import * as i2$3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { DataSource, SelectionModel } from '@angular/cdk/collections';
-import * as i4 from '@angular/material/core';
+import * as i2$1 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_FORMATS, MatOptionModule, NativeDateAdapter, ErrorStateMatcher, MatRipple, MatRippleModule } from '@angular/material/core';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
-import { trigger, state, style, transition, sequence, query, animate, group } from '@angular/animations';
-import * as i7 from '@angular/material/checkbox';
+import { trigger, state, transition, style, animate, sequence, query, group } from '@angular/animations';
+import * as i6 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i6 from '@angular/material/datepicker';
+import * as i5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -36,6 +36,8 @@ 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 * as i1$4 from '@angular/common';
+import { isPlatformBrowser, CommonModule, DOCUMENT, DatePipe } from '@angular/common';
 import { Apollo, gql } from 'apollo-angular';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import * as i6$1 from '@angular/material/tooltip';
@@ -45,10 +47,8 @@ import { MatIconRegistry, MatIcon, MatIconModule } from '@angular/material/icon'
 import { DomSanitizer, Title, Meta } from '@angular/platform-browser';
 import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$4 from '@angular/common';
-import { CommonModule, DOCUMENT, DatePipe, isPlatformBrowser } from '@angular/common';
 import { MatTabGroup } from '@angular/material/tabs';
-import * as i5$2 from '@angular/material/list';
+import * as i4$1 from '@angular/material/list';
 import { MatSelectionList, MatListModule } from '@angular/material/list';
 import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -58,11 +58,10 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import * as i3$2 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
-import * as i7$1 from '@angular/material/chips';
+import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i5$3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i2$1 from '@angular/material/button-toggle';
+import * as i2$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i6$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -72,12 +71,12 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 class NaturalConfirmComponent {
     data = inject(MAT_DIALOG_DATA);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalConfirmComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button [mat-dialog-close]=\"false\" mat-button>{{ data.cancelText }}</button>\n    <button [mat-dialog-close]=\"true\" mat-stroked-button cdkFocusInitial>{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalConfirmComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button mat-button [mat-dialog-close]=\"false\">{{ data.cancelText }}</button>\n    <button mat-stroked-button cdkFocusInitial [mat-dialog-close]=\"true\">{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalConfirmComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalConfirmComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatDialogModule, MatButtonModule], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button [mat-dialog-close]=\"false\" mat-button>{{ data.cancelText }}</button>\n    <button [mat-dialog-close]=\"true\" mat-stroked-button cdkFocusInitial>{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"] }]
+            args: [{ imports: [MatDialogModule, MatButtonModule], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button mat-button [mat-dialog-close]=\"false\">{{ data.cancelText }}</button>\n    <button mat-stroked-button cdkFocusInitial [mat-dialog-close]=\"true\">{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"] }]
         }] });
 
 class NaturalAlertService {
@@ -118,10 +117,10 @@ class NaturalAlertService {
         });
         return dialog.afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAlertService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAlertService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -183,10 +182,10 @@ class NaturalAbstractPanel {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractPanel, isStandalone: true, host: { listeners: { "click": "clickPanel()" }, properties: { "class.isFrontPanel": "this.isFrontPanel", "class.isPanel": "this.isPanel" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractPanel, isStandalone: true, host: { listeners: { "click": "clickPanel()" }, properties: { "class.isFrontPanel": "this.isFrontPanel", "class.isPanel": "this.isPanel" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractPanel, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], propDecorators: { isFrontPanel: [{
@@ -362,6 +361,7 @@ function copyToClipboard(document, text) {
     document.body.append(input);
     input.value = text;
     input.select();
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     document.execCommand('copy');
     document.body.removeChild(input);
 }
@@ -2534,10 +2534,10 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
         this.form = this.service.getFormGroup(this.data.model);
         this.changes.initialize(this.form.getRawValue());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractDetail, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractDetail, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractDetail, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractDetail, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [{ type: undefined }, { type: undefined }] });
@@ -2549,8 +2549,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  *
  * To access data of this component from a parent component, use:
  *
- * ```
- * @ViewChildren(ComponentType) cmp: ComponentType;
+ * ```ts
+ * private readonly cmp = viewChildren(ComponentType);
+ *
  * this.cmp.getItems();
  * ```
  *
@@ -2626,10 +2627,10 @@ class NaturalAbstractEditableList {
     validateForm() {
         validateAllFormControls(this.form);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractEditableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractEditableList, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractEditableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractEditableList, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractEditableList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractEditableList, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [{ type: undefined }] });
@@ -2851,8 +2852,7 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
     elementRef = inject(ElementRef);
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
     data = inject(NATURAL_DROPDOWN_CONTAINER_DATA);
-    portalOutlet;
-    templateRef;
+    portalOutlet = viewChild.required(CdkPortalOutlet);
     closed = new Subject();
     /** Current state of the panel animation. */
     panelAnimationState = 'void';
@@ -2870,13 +2870,14 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
         this.closed.next();
     }
     attachTemplatePortal(portal) {
-        return this.portalOutlet.attachTemplatePortal(portal);
+        return this.portalOutlet().attachTemplatePortal(portal);
     }
     attachComponentPortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
+        const portalOutlet = this.portalOutlet();
+        if (portalOutlet.hasAttached()) {
             throwMatDialogContentAlreadyAttachedError();
         }
-        return this.portalOutlet.attachComponentPortal(portal);
+        return portalOutlet.attachComponentPortal(portal);
     }
     startAnimation() {
         this.panelAnimationState = 'enter';
@@ -2907,19 +2908,13 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
             this.focusTrap.destroy();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [@transformMenu]=\"panelAnimationState\"\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], standalone: true, imports: [PortalModule, MatButtonModule], template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
-            }], templateRef: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
+            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], imports: [PortalModule, MatButtonModule], template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [@transformMenu]=\"panelAnimationState\"\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
+        }], ctorParameters: () => [] });
 
 class NaturalDropdownRef {
     dropdownContainer;
@@ -3015,10 +3010,10 @@ class NaturalDropdownService {
             },
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3236,12 +3231,12 @@ class TypeDateComponent {
             return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matIconSuffix />\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 [formControl]=\"todayCtrl\" i18n>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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            matInput\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"value\" />\n        <mat-datepicker #value />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (valueCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-checkbox i18n [formControl]=\"todayCtrl\">Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "18.2.3", ngImport: i0, type: TypeDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeDateComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
+            args: [{ imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
@@ -3250,7 +3245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatInputModule,
                         MatDatepickerModule,
                         MatCheckboxModule,
-                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matIconSuffix />\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 [formControl]=\"todayCtrl\" i18n>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\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            matInput\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"value\" />\n        <mat-datepicker #value />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (valueCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-checkbox i18n [formControl]=\"todayCtrl\">Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"] }]
         }], ctorParameters: () => [] });
 
 function toGraphQLDoctrineFilter(facets, selections) {
@@ -3446,10 +3441,10 @@ class NaturalMemoryStorage {
     setItem(key, value) {
         this.data.set(key, value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3620,10 +3615,10 @@ class NaturalPersistenceService {
         }
         return this.isValid(key, storageKey, result) ? result : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPersistenceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4127,10 +4122,10 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             this.persistenceService.persist('col', value, this.route, this.getStorageKey());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractList, isStandalone: true, inputs: { persistSearch: "persistSearch", availableColumns: "availableColumns", selectedColumns: "selectedColumns", forcedVariables: "forcedVariables" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractList, isStandalone: true, inputs: { persistSearch: "persistSearch", availableColumns: "availableColumns", selectedColumns: "selectedColumns", forcedVariables: "forcedVariables" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractList, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { persistSearch: [{
@@ -4259,10 +4254,10 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
         }
         return [item];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractNavigableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractNavigableList, isStandalone: true, inputs: { ancestorRelationName: "ancestorRelationName" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractNavigableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractNavigableList, isStandalone: true, inputs: { ancestorRelationName: "ancestorRelationName" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractNavigableList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractNavigableList, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { ancestorRelationName: [{
@@ -4369,6 +4364,95 @@ function debug(debugName) {
     });
 }
 
+/**
+ * Intercept HTTP request from Angular to show them as activity
+ */
+const activityInterceptor = (req, next) => {
+    const networkActivityService = inject(NetworkActivityService);
+    networkActivityService.increase();
+    return next(req).pipe(finalize(() => networkActivityService.decrease()));
+};
+/**
+ * Singleton to track pending XHR and XHR errors in the whole application.
+ *
+ * You must:
+ *
+ * - start the tracking by calling `setProgressRef()`
+ * - provide the HTTP interceptor `activityInterceptor`
+ *
+ * The tracking will be entirely disabled for SSR.
+ */
+class NetworkActivityService {
+    progress = null;
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /**
+     * Count pending requests
+     */
+    pending = 0;
+    writableErrors = signal([]);
+    /**
+     * GraphQL errors that happened recently
+     */
+    errors = this.writableErrors.asReadonly();
+    setProgressRef(progressBar) {
+        this.progress = progressBar;
+    }
+    /**
+     * Notify an XHR started
+     */
+    increase() {
+        if (!this.isBrowser) {
+            return;
+        }
+        if (this.pending === 0) {
+            this.progress?.start();
+        }
+        this.pending++;
+    }
+    /**
+     * Notify an XHR ended (even if unsuccessful)
+     */
+    decrease() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.pending--;
+        if (this.pending < 0) {
+            this.pending = 0;
+        }
+        // Mark progress a completed, after waiting 20ms in case a refetchQueries would be used
+        if (this.pending === 0) {
+            setTimeout(() => {
+                if (this.pending === 0) {
+                    this.progress?.complete();
+                }
+            }, 20);
+        }
+    }
+    /**
+     * Add new GraphQL errors
+     */
+    addErrors(errors) {
+        if (errors.length) {
+            this.writableErrors.update(previous => [...previous, ...errors]);
+        }
+    }
+    /**
+     * Clear all GraphQL errors
+     */
+    clearErrors() {
+        this.writableErrors.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NetworkActivityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NetworkActivityService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NetworkActivityService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * Debounce subscriptions to update mutations, with the possibility to cancel one, flush one, or flush all of them.
  *
@@ -4505,10 +4589,10 @@ class NaturalDebounceService {
             this.allDebouncedUpdateCache.delete(modelService);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDebounceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5080,10 +5164,10 @@ class NaturalEnumService {
             return '';
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEnumService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEnumService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5227,10 +5311,10 @@ class NaturalLinkMutationService {
             }
         }`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalLinkMutationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalLinkMutationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5287,10 +5371,10 @@ class NaturalSwissParsingDateAdapter extends NativeDateAdapter {
         // Also see https://github.com/tc39/ecma402/issues/6
         return 1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSwissParsingDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSwissParsingDateAdapter, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSwissParsingDateAdapter, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -5365,10 +5449,10 @@ class NaturalIconDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalIconDirective, isStandalone: true, selector: "mat-icon[naturalIcon]", inputs: { naturalIcon: "naturalIcon", size: "size" }, host: { properties: { "style.font-size.px": "this._size", "style.min-height.px": "this._size", "style.min-width.px": "this._size", "class": "this.classes" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalIconDirective, isStandalone: true, selector: "mat-icon[naturalIcon]", inputs: { naturalIcon: "naturalIcon", size: "size" }, host: { properties: { "style.font-size.px": "this._size", "style.min-height.px": "this._size", "style.min-width.px": "this._size", "class": "this.classes" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-icon[naturalIcon]',
@@ -5432,7 +5516,7 @@ class NaturalColumnsPickerComponent {
     /**
      * Emit a list of valid and selected column keys whenever the selection changes
      */
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     /**
      * Displayed options in the dropdown menu
      */
@@ -5493,12 +5577,12 @@ class NaturalColumnsPickerComponent {
             this.updateColumns();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons; track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                (click)=\"button.click?.(button, $event)\"\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                (click)=\"button.click?.(button, $event)\"\n                                [ngClass]=\"needMargin(button)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                (click)=\"button.click?.(button, $event)\"\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button [matMenuTriggerFor]=\"columnMenu\" mat-menu-item [ngClass]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons; track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                [matMenuTriggerFor]=\"columnMenu\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div (click)=\"menuItemClicked($event, column)\" mat-menu-item>\n                <mat-checkbox\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    [(ngModel)]=\"column.checked\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons; track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [ngClass]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [ngClass]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons; track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.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: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-columns-picker', standalone: true, imports: [
+            args: [{ selector: 'natural-columns-picker', imports: [
                         CommonModule,
                         MatButtonModule,
                         MatMenuModule,
@@ -5507,15 +5591,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatCheckboxModule,
                         MatTooltipModule,
                         FormsModule,
-                    ], template: "<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons; track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                (click)=\"button.click?.(button, $event)\"\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                (click)=\"button.click?.(button, $event)\"\n                                [ngClass]=\"needMargin(button)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                (click)=\"button.click?.(button, $event)\"\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button [matMenuTriggerFor]=\"columnMenu\" mat-menu-item [ngClass]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons; track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                [matMenuTriggerFor]=\"columnMenu\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div (click)=\"menuItemClicked($event, column)\" mat-menu-item>\n                <mat-checkbox\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    [(ngModel)]=\"column.checked\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
+                    ], template: "<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons; track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [ngClass]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [ngClass]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [ngClass]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons; track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
         }], propDecorators: { buttons: [{
                 type: Input
             }], availableColumns: [{
                 type: Input
             }], selections: [{
                 type: Input
-            }], selectionChange: [{
-                type: Output
             }] } });
 
 /*
@@ -5526,7 +5608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * Returns an identifier for the tab
  */
 function getTabId(tab) {
-    return tab.content?.viewContainerRef.element.nativeElement.id ?? '';
+    return tab.id ?? '';
 }
 /**
  * Usage :
@@ -5596,10 +5678,10 @@ class NaturalLinkableTabDirective {
     getTabIndex(fragment) {
         return this.component._tabs.toArray().findIndex(tab => fragment === getTabId(tab));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkableTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalLinkableTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-tab-group[naturalLinkableTab]',
@@ -5619,10 +5701,10 @@ class NaturalCapitalizePipe {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalCapitalizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'capitalize',
@@ -5632,12 +5714,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
 
 class NaturalEllipsisPipe {
     transform(value, limit) {
-        return value.substr(0, limit - 1) + (value.length > limit ? '…' : '');
+        return value.substring(0, limit - 1) + (value.length > limit ? '…' : '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEllipsisPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ellipsis',
@@ -5655,10 +5737,10 @@ class NaturalEnumPipe {
     transform(value, enumName) {
         return this.enumService.getValueName(value, enumName);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalEnumPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'enum',
@@ -5788,10 +5870,10 @@ class NaturalTimeAgoPipe {
             throw new Error('Time travelling just happened');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, deps: [{ token: 'SHOULD_NEVER_BE_INJECTED', optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, deps: [{ token: 'SHOULD_NEVER_BE_INJECTED', optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeAgo',
@@ -5860,10 +5942,10 @@ class NaturalSrcDensityDirective {
         this.elementRef.nativeElement.src = src;
         this.elementRef.nativeElement.srcset = densities(src, false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSrcDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: "naturalSrcDensity" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSrcDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: "naturalSrcDensity" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[naturalSrcDensity]',
@@ -5920,10 +6002,10 @@ class NaturalBackgroundDensityDirective {
             this.elementRef.nativeElement.style.backgroundImage = responsive;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalBackgroundDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalBackgroundDensityDirective, isStandalone: true, selector: "[naturalBackgroundDensity]", inputs: { naturalBackgroundDensity: "naturalBackgroundDensity" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalBackgroundDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalBackgroundDensityDirective, isStandalone: true, selector: "[naturalBackgroundDensity]", inputs: { naturalBackgroundDensity: "naturalBackgroundDensity" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalBackgroundDensityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalBackgroundDensityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[naturalBackgroundDensity]',
@@ -5991,10 +6073,10 @@ class NaturalDialogTriggerComponent {
             this.router.navigate(['.'], { relativeTo: this.route.parent });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -6219,10 +6301,10 @@ class NaturalSeoService {
         }
         return of(seo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSeoService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -6238,15 +6320,10 @@ function provideSeo(config) {
             provide: NATURAL_SEO_CONFIG,
             useValue: config,
         },
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: () => {
-                // injection required, but works without doing anything else
-                inject(NaturalSeoService);
-                return () => undefined;
-            },
-        },
+        provideAppInitializer(() => {
+            // injection required, but works without doing anything else
+            inject(NaturalSeoService);
+        }),
     ];
 }
 
@@ -6299,12 +6376,12 @@ class NaturalDetailHeaderComponent {
         }
         return this.getRootLink().concat([id]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent.id) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-detail-header', standalone: true, imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent.id) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
+            args: [{ selector: 'natural-detail-header', imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
         }], propDecorators: { currentBaseUrl: [{
                 type: Input
             }], isPanel: [{
@@ -6337,7 +6414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
 class TypeSelectComponent {
     destroyRef = inject(DestroyRef);
     renderedValue = new BehaviorSubject('');
-    list;
+    list = viewChild(MatSelectionList);
     requireValueCtrl = false;
     operators = possibleDiscreteOperators;
     operatorCtrl = new FormControl('is', { nonNullable: true });
@@ -6365,8 +6442,9 @@ class TypeSelectComponent {
         this.reloadCondition(data.condition);
     }
     ngAfterViewInit() {
-        if (!this.isMultiple() && this.list) {
-            this.list.selectedOptions._multiple = false;
+        const list = this.list();
+        if (!this.isMultiple() && list) {
+            list.selectedOptions._multiple = false;
         }
     }
     getId(item) {
@@ -6481,16 +6559,13 @@ class TypeSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\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 [value]=\"getId(item)\" togglePosition=\"before\">\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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option togglePosition=\"before\" [value]=\"getId(item)\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeSelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, MatListModule], template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\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 [value]=\"getId(item)\" togglePosition=\"before\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n" }]
-        }], ctorParameters: () => [], propDecorators: { list: [{
-                type: ViewChild,
-                args: [MatSelectionList, { static: false }]
-            }] } });
+            args: [{ imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, MatListModule], template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option togglePosition=\"before\" [value]=\"getId(item)\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n" }]
+        }], ctorParameters: () => [] });
 
 class AbstractAssociationSelectComponent {
     configuration;
@@ -6574,10 +6649,10 @@ class AbstractAssociationSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractAssociationSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractAssociationSelectComponent, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -6654,12 +6729,12 @@ class AbstractSelect {
     /**
      * Emit the selected value whenever it changes
      */
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     /**
      * Emits when internal input is blurred
      */
     // eslint-disable-next-line @angular-eslint/no-output-native
-    blur = new EventEmitter();
+    blur = output();
     /**
      * Contains internal representation for current selection AND searched text (for autocomplete)
      *
@@ -6782,10 +6857,10 @@ class AbstractSelect {
         }
         this.internalCtrl.updateValueAndValidity();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.3", type: AbstractSelect, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, navigateTo: { classPropertyName: "navigateTo", publicName: "navigateTo", isSignal: false, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: false, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.13", type: AbstractSelect, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, navigateTo: { classPropertyName: "navigateTo", publicName: "navigateTo", isSignal: false, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: false, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractSelect, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
@@ -6804,10 +6879,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }], displayWith: [{
                 type: Input
-            }], selectionChange: [{
-                type: Output
-            }], blur: [{
-                type: Output
             }], disabled: [{
                 type: Input
             }] } });
@@ -6846,8 +6917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 class NaturalSelectComponent extends AbstractSelect {
     destroyRef = inject(DestroyRef);
-    autoTrigger;
-    itemTemplate;
+    autoTrigger = viewChild.required(MatAutocompleteTrigger);
+    itemTemplate = contentChild(TemplateRef);
     /**
      * Service with watchAll function that accepts queryVariables.
      */
@@ -6943,7 +7014,7 @@ class NaturalSelectComponent extends AbstractSelect {
     onKeyEnter() {
         if (!this.internalCtrl.value) {
             this.clear();
-            this.autoTrigger.closePanel();
+            this.autoTrigger().closePanel();
         }
     }
     writeValue(value) {
@@ -7052,12 +7123,12 @@ class NaturalSelectComponent extends AbstractSelect {
     getVariablesForDebug() {
         return this.variablesManager.variables.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", pageSize: "pageSize", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select', standalone: true, imports: [
+            args: [{ selector: 'natural-select', imports: [
                         MatAutocompleteModule,
                         CommonModule,
                         MatOptionModule,
@@ -7071,14 +7142,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatButtonModule,
                         MatTooltipModule,
                         RouterLink,
-                    ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
-        }], propDecorators: { autoTrigger: [{
-                type: ViewChild,
-                args: [MatAutocompleteTrigger]
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], service: [{
+                    ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
+        }], propDecorators: { service: [{
                 type: Input,
                 args: [{ required: true }]
             }], optionRequired: [{
@@ -7089,6 +7154,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }], filter: [{
                 type: Input
+            }], pageSize: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }] } });
@@ -7113,19 +7180,19 @@ class TypeNaturalSelectComponent extends AbstractAssociationSelectComponent {
         const selectedName = selected?.fullName || selected?.name || '';
         return selectedName;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeNaturalSelectComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeNaturalSelectComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n            [pageSize]=\"configuration.pageSize || 10\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
+            args: [{ imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatSelectModule,
                         MatOptionModule,
                         NaturalSelectComponent,
-                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n        />\n    }\n</form>\n" }]
+                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n            [pageSize]=\"configuration.pageSize || 10\"\n        />\n    }\n</form>\n" }]
         }] });
 
 /**
@@ -7171,12 +7238,12 @@ class TypeTextComponent {
             this.dropdownRef.close(); // undefined value, discard changes / prevent to add a condition (on new fields
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        (keydown.enter)=\"close()\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeTextComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule], template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+            args: [{ imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule], template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        (keydown.enter)=\"close()\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class TypeNumberComponent {
@@ -7263,12 +7330,12 @@ class TypeNumberComponent {
             return operator.label + ' ' + this.valueCtrl.value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeNumberComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeNumberComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            matInput\n            type=\"number\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            (keydown.enter)=\"close()\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "18.2.3", ngImport: i0, type: TypeNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeNumberComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, MatInputModule], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\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, MatFormFieldModule, MatSelectModule, MatOptionModule, MatInputModule], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            matInput\n            type=\"number\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            (keydown.enter)=\"close()\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class HierarchicFlatNode {
@@ -7530,10 +7597,10 @@ class NaturalHierarchicSelectorService {
         const node = this.dataChange.value.find(n => n.model.id === item.id && n.model.__typename === item.__typename);
         return node || new HierarchicModelNode(item, configuration);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -7568,12 +7635,12 @@ class FacetSelectorComponent {
     isDirty() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FacetSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FacetSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatListModule], template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
+            args: [{ imports: [MatListModule], template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
         }] });
 
 // Required to check invalid fields when initializing natural-search
@@ -7597,11 +7664,11 @@ class NaturalInputComponent {
     /**
      * Controls the ripple effect, used when opening a dropdown
      */
-    ripple;
+    ripple = viewChild.required(MatRipple);
     /**
      * Native element ref for <input> related to this <natural-input> component
      */
-    input;
+    input = viewChild.required('input');
     /**
      * Label for this field
      */
@@ -7625,11 +7692,11 @@ class NaturalInputComponent {
     /**
      * Emits when user a added/updated/deleted a search (from global context or from facet)
      */
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     /**
      * Emits when user removes the search by pressing the cross icon
      */
-    cleared = new EventEmitter();
+    cleared = output();
     /**
      * Selected facet from the list of available facets
      */
@@ -7672,7 +7739,7 @@ class NaturalInputComponent {
      */
     focus() {
         this.neutralizeDropdownOpening = true;
-        this.input.nativeElement.focus();
+        this.input().nativeElement.focus();
         this.neutralizeDropdownOpening = false;
     }
     ngOnChanges() {
@@ -7704,10 +7771,10 @@ class NaturalInputComponent {
         }
     }
     ngOnInit() {
-        this.input.nativeElement.addEventListener('focus', () => {
+        this.input().nativeElement.addEventListener('focus', () => {
             this.openDropdown();
         });
-        this.input.nativeElement.addEventListener('keyup', () => {
+        this.input().nativeElement.addEventListener('keyup', () => {
             if (!this.dropdownRef) {
                 return;
             }
@@ -7802,7 +7869,7 @@ class NaturalInputComponent {
         ];
     }
     launchRipple() {
-        const rippleRef = this.ripple.launch({
+        const rippleRef = this.ripple().launch({
             persistent: true,
             centered: true,
         });
@@ -7863,7 +7930,7 @@ class NaturalInputComponent {
             });
         }
         else {
-            this.input.nativeElement.focus();
+            this.input().nativeElement.focus();
         }
     }
     setValue(result) {
@@ -7881,12 +7948,12 @@ class NaturalInputComponent {
         }
         return selection;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets", dropdownTitle: "dropdownTitle" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets", dropdownTitle: "dropdownTitle" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-input', standalone: true, imports: [
+            args: [{ selector: 'natural-input', imports: [
                         MatFormFieldModule,
                         MatRippleModule,
                         MatInputModule,
@@ -7895,14 +7962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatIconModule,
                         NaturalIconDirective,
                         MatButtonModule,
-                    ], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"] }]
-        }], propDecorators: { ripple: [{
-                type: ViewChild,
-                args: [MatRipple, { static: true }]
-            }], input: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }], placeholder: [{
+                    ], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"] }]
+        }], propDecorators: { placeholder: [{
                 type: Input
             }], searchFieldName: [{
                 type: Input
@@ -7913,24 +7974,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 args: [{ required: true }]
             }], dropdownTitle: [{
                 type: Input
-            }], selectionChange: [{
-                type: Output
-            }], cleared: [{
-                type: Output
             }], focus: [{
                 type: HostListener,
                 args: ['focus']
             }] } });
 
 class NaturalGroupComponent {
-    newValueInput;
+    newValueInput = viewChild.required('newValueInput');
     /**
      * Text display in the dropdown to select the facet
      */
     dropdownTitle = '';
     placeholder;
     facets;
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     innerSelections = [];
     set selections(selection) {
         this.innerSelections = deepClone(selection);
@@ -7940,7 +7997,7 @@ class NaturalGroupComponent {
         this.selectionChange.emit(this.innerSelections);
     }
     addInput(selection) {
-        this.newValueInput.clear();
+        this.newValueInput().clear();
         this.innerSelections.push(selection);
         this.selectionChange.emit(this.innerSelections);
     }
@@ -7948,16 +8005,13 @@ class NaturalGroupComponent {
         this.innerSelections.splice(index, 1);
         this.selectionChange.emit(this.innerSelections);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: "dropdownTitle", placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n        [facets]=\"facets\"\n        [selection]=\"selection\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: "dropdownTitle", placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        [facets]=\"facets\"\n        [selection]=\"selection\"\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    [dropdownTitle]=\"dropdownTitle\"\n    (selectionChange)=\"addInput($event)\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-group', standalone: true, imports: [NaturalInputComponent], template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n        [facets]=\"facets\"\n        [selection]=\"selection\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
-        }], propDecorators: { newValueInput: [{
-                type: ViewChild,
-                args: ['newValueInput']
-            }], dropdownTitle: [{
+            args: [{ selector: 'natural-group', imports: [NaturalInputComponent], template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        [facets]=\"facets\"\n        [selection]=\"selection\"\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    [dropdownTitle]=\"dropdownTitle\"\n    (selectionChange)=\"addInput($event)\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
+        }], propDecorators: { dropdownTitle: [{
                 type: Input
             }], placeholder: [{
                 type: Input,
@@ -7965,8 +8019,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }], facets: [{
                 type: Input,
                 args: [{ required: true }]
-            }], selectionChange: [{
-                type: Output
             }], selections: [{
                 type: Input
             }] } });
@@ -7992,16 +8044,20 @@ class NaturalSearchComponent {
     /**
      * Emits when some selection has been setted by the user
      */
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     /**
      * Cleaned inputted selections. Allow valid selections to be manipulated inside component
      */
-    innerSelections = [[]];
+    #innerSelections = signal([[]]);
+    /**
+     * Cleaned inputted selections. This public API is useful because `selectionChange` does not emit changes made via `[selections]`
+     */
+    innerSelections = this.#innerSelections.asReadonly();
     /**
      * Input to display at component initialisation
      */
     set selections(selections) {
-        this.innerSelections = selections?.[0] ? deepClone(selections) : [[]];
+        this.#innerSelections.set(selections?.[0] ? deepClone(selections) : [[]]);
     }
     isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map$1(result => result.matches));
     ngOnChanges() {
@@ -8010,30 +8066,36 @@ class NaturalSearchComponent {
         }
     }
     updateGroup(groupSelections, groupIndex) {
+        const selections = [...this.#innerSelections()];
         for (let i = 0; i < groupSelections.length; i++) {
-            this.innerSelections[groupIndex][i] = groupSelections[i];
+            selections[groupIndex][i] = groupSelections[i];
         }
-        this.innerSelections[groupIndex].length = groupSelections.length;
-        this.selectionChange.emit(this.innerSelections);
+        selections[groupIndex].length = groupSelections.length;
+        this.#notify(selections);
     }
     addGroup() {
-        this.innerSelections.push([]);
-        this.selectionChange.emit(this.innerSelections);
+        const selections = [...this.#innerSelections()];
+        selections.push([]);
+        this.#notify(selections);
     }
     removeGroup(index) {
-        this.innerSelections.splice(index, 1);
-        this.selectionChange.emit(this.innerSelections);
+        const selections = [...this.#innerSelections()];
+        selections.splice(index, 1);
+        this.#notify(selections);
     }
     clear() {
-        this.innerSelections = [[]];
-        this.selectionChange.emit([[]]);
+        this.#notify([[]]);
+    }
+    #notify(selections) {
+        this.#innerSelections.set(selections);
+        this.selectionChange.emit(selections);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections; track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if (innerSelections.length > 1) {\n                        <button\n                            (click)=\"removeGroup($index)\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            (click)=\"clear()\"\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-search', standalone: true, imports: [
+            args: [{ selector: 'natural-search', imports: [
                         CommonModule,
                         NaturalGroupComponent,
                         MatButtonModule,
@@ -8041,7 +8103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatIconModule,
                         NaturalIconDirective,
                         MatDividerModule,
-                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections; track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if (innerSelections.length > 1) {\n                        <button\n                            (click)=\"removeGroup($index)\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            (click)=\"clear()\"\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
+                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], facets: [{
@@ -8050,8 +8112,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }], dropdownTitle: [{
                 type: Input
-            }], selectionChange: [{
-                type: Output
             }], selections: [{
                 type: Input
             }] } });
@@ -8095,7 +8155,7 @@ class NaturalHierarchicSelectorComponent {
     /**
      * Emits when natural-search selections change
      */
-    searchSelectionChange = new EventEmitter();
+    searchSelectionChange = output();
     /**
      * Inner representation of selected @Input() to allow flat listing as mat-chip.
      */
@@ -8104,13 +8164,16 @@ class NaturalHierarchicSelectorComponent {
      * Emits selection change
      * Returns a Literal where selected models are organized by key
      */
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     /**
      * Controller for nodes selection
      */
     flatNodesSelection;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     treeControl;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     treeFlattener;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     dataSource;
     loading = false;
     /**
@@ -8135,10 +8198,13 @@ class NaturalHierarchicSelectorComponent {
         // Init tree checkbox selectors
         this.flatNodesSelection = new SelectionModel(this.multiple);
         // Tree controllers and manipulators
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.treeFlattener = new MatTreeFlattener(this.transformer(), this.getLevel(), this.isExpandable(), this.getChildren());
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.treeControl = new FlatTreeControl(this.getLevel(), this.isExpandable());
         // The dataSource contains a nested ModelNodes list. Each ModelNode has a child attribute that returns an observable.
         // The dataSource contains a flat representation of the nested ModelNodes that is generated by the treeFlattener related functions
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
         // Update dataSource when receiving new list -> we assign the whole tree
         // The treeControl and treeFlattener will generate the displayed tree
@@ -8389,12 +8455,12 @@ class NaturalHierarchicSelectorComponent {
     getMapKey(model) {
         return model.__typename + '-' + model.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-hierarchic-selector', providers: [NaturalHierarchicSelectorService], standalone: true, imports: [
+            args: [{ selector: 'natural-hierarchic-selector', providers: [NaturalHierarchicSelectorService], imports: [
                         NaturalSearchComponent,
                         CommonModule,
                         MatProgressSpinnerModule,
@@ -8404,7 +8470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         NaturalIconDirective,
                         MatCheckboxModule,
                         MatChipsModule,
-                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"] }]
+                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"] }]
         }], propDecorators: { displayWith: [{
                 type: Input
             }], config: [{
@@ -8422,10 +8488,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }], searchSelections: [{
                 type: Input
-            }], searchSelectionChange: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
             }] } });
 
 class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent {
@@ -8478,19 +8540,19 @@ class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent
     noEmptySelection(selection) {
         return selection[this.configuration.key].length ? selection : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            (selectionChange)=\"selectionChange($event)\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            style=\"margin-right: 20px\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            style=\"margin-right: 20px\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            (selectionChange)=\"selectionChange($event)\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
+            args: [{ imports: [
                         FormsModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatSelectModule,
                         MatOptionModule,
                         NaturalHierarchicSelectorComponent,
-                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            (selectionChange)=\"selectionChange($event)\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            style=\"margin-right: 20px\"\n        />\n    }\n</form>\n" }]
+                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select panelWidth=\"\" [formControl]=\"operatorCtrl\" [required]=\"true\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            style=\"margin-right: 20px\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            (selectionChange)=\"selectionChange($event)\"\n        />\n    }\n</form>\n" }]
         }] });
 
 class InvalidWithValueStateMatcher {
@@ -8605,12 +8667,12 @@ class TypeDateRangeComponent {
             return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeDateRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            i18n-placeholder\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeDateRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"De\"\n            i18n-placeholder\n            [matDatepicker]=\"from\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [matDatepicker]=\"to\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            i18n-placeholder\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n" }]
+            args: [{ imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"De\"\n            i18n-placeholder\n            [matDatepicker]=\"from\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [matDatepicker]=\"to\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n" }]
         }], ctorParameters: () => [] });
 
 class TypeOptionsComponent {
@@ -8656,12 +8718,12 @@ class TypeOptionsComponent {
     isDirty() {
         return this.formControl.dirty;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeOptionsComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeOptionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeOptionsComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeOptionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeOptionsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
+            args: [{ imports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -8689,12 +8751,12 @@ class TypeBooleanComponent extends TypeOptionsComponent {
         };
         super(typeOptionsData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeBooleanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TypeBooleanComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, CommonModule, MatButtonToggleModule], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
+            args: [{ imports: [FormsModule, ReactiveFormsModule, CommonModule, MatButtonToggleModule], template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n" }]
         }], ctorParameters: () => [] });
 
 /*
@@ -8859,10 +8921,10 @@ class NaturalFileService {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -8888,7 +8950,7 @@ class NaturalAbstractFile {
      */
     multiple = false;
     /**
-     * Comma-separated list of unique file type specifiers. Like the native element
+     * Comma-separated list of unique file type specifiers. Like the native element,
      * it can be a mix of mime-type and file extensions.
      *
      * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
@@ -8912,21 +8974,23 @@ class NaturalAbstractFile {
     /**
      * If true, the file selection will be broadcast through `NaturalFileService.filesChanged`.
      *
-     * It is useful to set this to false if there is two upload on a page with different purpose
+     * It is useful to set this to false if there are two uploads on a page with different purposes,
      * and the second upload should not be confused with the first one.
      */
     broadcast = true;
+    fileChange$ = new Subject();
     /**
      * The single valid file that has been selected.
      *
      * It is for convenience of use, and will only emit if there is at least one
      * valid file. See `filesChange` for a more complete output.
      */
-    fileChange = new EventEmitter();
+    fileChange = outputFromObservable(this.fileChange$);
+    filesChange$ = new Subject();
     /**
      * The list of files that have been selected.
      */
-    filesChange = new EventEmitter();
+    filesChange = outputFromObservable(this.filesChange$);
     constructor(element, naturalFileService, document) {
         this.element = element;
         this.naturalFileService = naturalFileService;
@@ -8994,10 +9058,10 @@ class NaturalAbstractFile {
             }
         })))).subscribe(() => {
             if (selection.valid.length) {
-                this.fileChange.emit(selection.valid[0]);
+                this.fileChange$.next(selection.valid[0]);
             }
             if (selection.valid.length || selection.invalid.length) {
-                this.filesChange.emit(selection);
+                this.filesChange$.next(selection);
                 if (this.broadcast) {
                     this.naturalFileService.filesChanged.next(selection);
                 }
@@ -9063,10 +9127,15 @@ class NaturalAbstractFile {
             return null;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractFile, deps: [{ token: i0.ElementRef }, { token: NaturalFileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: "multiple", accept: "accept", maxSize: "maxSize", fileSelectionDisabled: "fileSelectionDisabled", selectable: "selectable", broadcast: "broadcast" }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 });
+    hasObservers() {
+        return (this.fileChange$.observed ||
+            this.filesChange$.observed ||
+            (this.broadcast && this.naturalFileService.filesChanged.observed));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractFile, deps: [{ token: i0.ElementRef }, { token: NaturalFileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: "multiple", accept: "accept", maxSize: "maxSize", fileSelectionDisabled: "fileSelectionDisabled", selectable: "selectable", broadcast: "broadcast" }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractFile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractFile, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NaturalFileService }, { type: Document, decorators: [{
@@ -9084,10 +9153,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }], broadcast: [{
                 type: Input
-            }], fileChange: [{
-                type: Output
-            }], filesChange: [{
-                type: Output
             }], onChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
@@ -9112,7 +9177,7 @@ class NaturalFileDropDirective extends NaturalAbstractFile {
     /**
      * Emits whenever files are being dragged over
      */
-    fileOver = new EventEmitter();
+    fileOver = output();
     rawFileOver = new Subject();
     ngOnInit() {
         super.ngOnInit();
@@ -9167,15 +9232,10 @@ class NaturalFileDropDirective extends NaturalAbstractFile {
         stopEvent(event);
         this.closeDrags();
     }
-    hasObservers() {
-        return (this.fileChange.observed ||
-            this.filesChange.observed ||
-            (this.broadcast && this.naturalFileService.filesChanged.observed));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFileDropDirective, isStandalone: true, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: { fileOver: "fileOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" }, properties: { "class.natural-file-over": "this.fileOverClass" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalFileDropDirective, isStandalone: true, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: { fileOver: "fileOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" }, properties: { "class.natural-file-over": "this.fileOverClass" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not([naturalFileSelect])[naturalFileDrop]',
@@ -9184,8 +9244,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], propDecorators: { fileOverClass: [{
                 type: HostBinding,
                 args: ['class.natural-file-over']
-            }], fileOver: [{
-                type: Output
             }], onDrop: [{
                 type: HostListener,
                 args: ['drop', ['$event']]
@@ -9207,10 +9265,10 @@ class NaturalFileSelectDirective extends NaturalAbstractFile {
      * Override parent to enable it by default
      */
     selectable = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: "selectable" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: "selectable" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not([naturalFileDrop])[naturalFileSelect]',
@@ -9230,6 +9288,11 @@ class NaturalFileComponent {
     fontSize = computed(() => Math.min(this.height() * 0.3, 36));
     action = null;
     backgroundSize = 'contain';
+    /**
+     * Overrides the default download link by passing a function that received the
+     * file object and returns the download link
+     */
+    downloadLinkFn;
     /**
      * Comma-separated list of unique file type specifiers. Like the native element,
      * it can be a mix of mime-type and file extensions.
@@ -9262,7 +9325,7 @@ class NaturalFileComponent {
      * This **must not** be used to mutate the server, because it is very likely it will never be called if the
      * human navigates away from the page before the upload is finished. Instead, you should use `[uploader]`.
      */
-    modelChange = new EventEmitter();
+    modelChange = output();
     imagePreview = '';
     filePreview = null;
     ngOnChanges(changes) {
@@ -9292,7 +9355,9 @@ class NaturalFileComponent {
         if (this.action !== 'download') {
             return null;
         }
-        return this.naturalFileService.getDownloadLink(this.model);
+        return this.downloadLinkFn
+            ? this.downloadLinkFn(this.model)
+            : this.naturalFileService.getDownloadLink(this.model);
     }
     updateImage() {
         this.imagePreview = '';
@@ -9342,15 +9407,16 @@ class NaturalFileComponent {
             subject.next(btoa(ev.target.result));
             subject.complete();
         });
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         reader.readAsBinaryString(file);
         return subject.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: false, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: false, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, formCtrl: { classPropertyName: "formCtrl", publicName: "formCtrl", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "height()" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    (fileChange)=\"upload($event)\"\n    naturalFileDrop\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon [size]=\"iconHeight()\" naturalIcon=\"attachment\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action === 'upload') {\n            <mat-icon [size]=\"iconHeight()\" naturalIcon=\"cloud_upload\" />\n        }\n        @if (action === 'download') {\n            <mat-icon [size]=\"iconHeight()\" naturalIcon=\"get_app\" />\n        }\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: false, isRequired: false, transformFunction: null }, downloadLinkFn: { classPropertyName: "downloadLinkFn", publicName: "downloadLinkFn", isSignal: false, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: false, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, formCtrl: { classPropertyName: "formCtrl", publicName: "formCtrl", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "height()" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-file', standalone: true, imports: [
+            args: [{ selector: 'natural-file', imports: [
                         NaturalFileDropDirective,
                         MatRippleModule,
                         CommonModule,
@@ -9360,11 +9426,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         NaturalBackgroundDensityDirective,
                     ], host: {
                         '[style.height.px]': 'height()',
-                    }, template: "<a\n    (fileChange)=\"upload($event)\"\n    naturalFileDrop\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon [size]=\"iconHeight()\" naturalIcon=\"attachment\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action === 'upload') {\n            <mat-icon [size]=\"iconHeight()\" naturalIcon=\"cloud_upload\" />\n        }\n        @if (action === 'download') {\n            <mat-icon [size]=\"iconHeight()\" naturalIcon=\"get_app\" />\n        }\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"] }]
+                    }, template: "<a\n    naturalFileDrop\n    matRipple\n    target=\"_blank\"\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    (fileChange)=\"upload($event)\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\" [style.font-size.px]=\"fontSize()\">\n            <mat-icon naturalIcon=\"attachment\" [size]=\"iconHeight()\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\" [style.font-size.px]=\"fontSize()\">\n        @if (action === 'upload') {\n            <mat-icon naturalIcon=\"cloud_upload\" [size]=\"iconHeight()\" />\n        }\n        @if (action === 'download') {\n            <mat-icon naturalIcon=\"get_app\" [size]=\"iconHeight()\" />\n        }\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"] }]
         }], propDecorators: { action: [{
                 type: Input
             }], backgroundSize: [{
                 type: Input
+            }], downloadLinkFn: [{
+                type: Input
             }], accept: [{
                 type: Input
             }], uploader: [{
@@ -9373,8 +9441,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 type: Input
             }], formCtrl: [{
                 type: Input
-            }], modelChange: [{
-                type: Output
             }] } });
 
 /*
@@ -9386,12 +9452,12 @@ class NaturalFixedButtonComponent {
     link = null;
     color = 'accent';
     disabled = false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: "icon", link: "link", color: "color", disabled: "disabled" }, ngImport: i0, template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n    <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: "icon", link: "link", color: "color", disabled: "disabled" }, ngImport: i0, template: "<button mat-fab [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\">\n    <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-fixed-button', standalone: true, imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n    <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"] }]
+            args: [{ selector: 'natural-fixed-button', imports: [MatButtonModule, RouterLink, MatIconModule, NaturalIconDirective], template: "<button mat-fab [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\">\n    <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9422,8 +9488,8 @@ class NaturalFixedButtonDetailComponent {
     }
     _model;
     form;
-    create = new EventEmitter();
-    delete = new EventEmitter();
+    create = output();
+    delete = output();
     constructor() {
         const route = inject(ActivatedRoute);
         route.params.pipe(takeUntilDestroyed()).subscribe(() => (this.canChange = true));
@@ -9438,22 +9504,18 @@ class NaturalFixedButtonDetailComponent {
             this.delete.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        (click)=\"clickCreate()\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        (click)=\"clickDelete()\"\n        [disabled]=\"form.disabled\"\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-fixed-button-detail', standalone: true, imports: [NaturalFixedButtonComponent, MatTooltipModule], template: "@if (isCreation) {\n    <natural-fixed-button\n        (click)=\"clickCreate()\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        (click)=\"clickDelete()\"\n        [disabled]=\"form.disabled\"\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n    />\n}\n" }]
+            args: [{ selector: 'natural-fixed-button-detail', imports: [NaturalFixedButtonComponent, MatTooltipModule], template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { model: [{
                 type: Input,
                 args: [{ required: true }]
             }], form: [{
                 type: Input,
                 args: [{ required: true }]
-            }], create: [{
-                type: Output
-            }], delete: [{
-                type: Output
             }] } });
 
 /*
@@ -9482,12 +9544,12 @@ class NaturalHierarchicSelectorDialogComponent {
         };
         this.dialogRef.close(result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButtonModule], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n" }]
+            args: [{ imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButtonModule], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button color=\"primary\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n" }]
         }], ctorParameters: () => [] });
 
 class NaturalHierarchicSelectorDialogService {
@@ -9499,10 +9561,10 @@ class NaturalHierarchicSelectorDialogService {
         };
         return this.dialog.open(NaturalHierarchicSelectorDialogComponent, defaults(dialogConfig, defaultDialogConfig));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -9523,21 +9585,15 @@ function provideIcons(config) {
             provide: NATURAL_ICONS_CONFIG,
             useValue: config,
         },
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: () => {
-                const iconRegistry = inject(MatIconRegistry);
-                return () => {
-                    // Replace the old Material Icons by the new Material Symbols
-                    const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
-                    const outlinedFontSetClasses = defaultFontSetClasses
-                        .filter(fontSetClass => fontSetClass !== 'material-icons')
-                        .concat(['material-symbols-outlined']);
-                    iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
-                };
-            },
-        },
+        provideAppInitializer(() => {
+            const iconRegistry = inject(MatIconRegistry);
+            // Replace the old Material Icons by the new Material Symbols
+            const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
+            const outlinedFontSetClasses = defaultFontSetClasses
+                .filter(fontSetClass => fontSetClass !== 'material-icons')
+                .concat(['material-symbols-outlined']);
+            iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
+        }),
     ];
 }
 
@@ -9705,6 +9761,11 @@ class NaturalPanelsService {
             this.updateComponentsPosition();
         });
     }
+    /**
+     * Notify the service to start listening to route changes to open panels
+     *
+     * @internal
+     */
     start(route) {
         NaturalPanelsService._opened = true;
         this.routeSub = route.url.subscribe(segments => {
@@ -9742,22 +9803,18 @@ class NaturalPanelsService {
         });
     }
     /**
-     * Uses given configuration to add in the end of current url
-     * Neutralizes router error handling
+     * Uses given configuration to add at the end of current url
      */
     appendConfigToCurrentUrl(config) {
-        const originalErrorHandler = this.router.errorHandler;
-        // Nullify error handler (will be de-neutralized after route redirection)
-        if (config) {
-            this.router.errorHandler = () => undefined;
-        }
-        // Navigate to same url + /risk/new Result : /risk/risk/new
+        // Navigate to the same url + /risk/new Result : /risk/risk/new
         const newUrl = config.map(conf => segmentsToString(conf.route.segments)).join('/');
-        this.router.navigateByUrl(this.router.url + '/' + newUrl).then(() => {
-            // After navigation has ended, restore original error handler because he's not a bad guy
-            this.router.errorHandler = originalErrorHandler;
-        });
+        this.router.navigateByUrl(this.router.url + '/' + newUrl);
     }
+    /**
+     * Notify the service that all panels were closed
+     *
+     * @internal
+     */
     stop() {
         NaturalPanelsService._opened = false;
         this.routeSub?.unsubscribe();
@@ -9768,6 +9825,8 @@ class NaturalPanelsService {
     }
     /**
      * Go to panel matching given component. Causes an url change.
+     *
+     * @internal
      */
     goToPanelByComponent(component) {
         this.goToPanelByIndex(this.getPanelIndex(component));
@@ -9911,6 +9970,13 @@ class NaturalPanelsService {
         }
         return this.dialog.openDialogs.findIndex(dialog => dialog.componentInstance === component);
     }
+    /**
+     * Whether the given panel is currently the top, visible, panel. If there are no panels opened at all, then any panel given is considered top, visible, panel.
+     */
+    isTopPanel(component) {
+        const length = this.dialog.openDialogs.length;
+        return !length || this.dialog.openDialogs[length - 1]?.componentInstance === component;
+    }
     /**
      * Repositions panels from start until given index
      */
@@ -9939,10 +10005,10 @@ class NaturalPanelsService {
             dialog.updatePosition(position);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPanelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPanelsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -9960,10 +10026,10 @@ class NaturalPanelsComponent {
     ngOnDestroy() {
         this.panelsService.stop();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalPanelsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'natural-panels',
@@ -10002,8 +10068,8 @@ class NaturalRelationsComponent {
     destroyRef = inject(DestroyRef);
     linkMutationService = inject(NaturalLinkMutationService);
     hierarchicSelectorDialog = inject(NaturalHierarchicSelectorDialogService);
-    select;
-    itemTemplate;
+    select = viewChild(NaturalSelectComponent);
+    itemTemplate = contentChild(TemplateRef);
     _service;
     get service() {
         return this._service;
@@ -10041,7 +10107,7 @@ class NaturalRelationsComponent {
     /**
      * Emits after relations were successfully added on the server
      */
-    selectionChange = new EventEmitter();
+    selectionChange = output();
     /**
      * Filters for hierarchic selector
      */
@@ -10119,7 +10185,7 @@ class NaturalRelationsComponent {
             .map(relation => this.linkMutationService.link(this.main, relation, this.otherName));
         forkJoin(observables).subscribe(() => {
             this.selectionChange.emit();
-            this.select?.clear();
+            this.select()?.clear();
         });
     }
     pagination(event) {
@@ -10169,12 +10235,12 @@ class NaturalRelationsComponent {
         }
         return this.hierarchicSelectorConfig.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-relations', standalone: true, imports: [
+            args: [{ selector: 'natural-relations', imports: [
                         CommonModule,
                         MatTableModule,
                         MatButtonModule,
@@ -10184,14 +10250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatPaginatorModule,
                         MatProgressSpinnerModule,
                         NaturalSelectComponent,
-                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
-        }], propDecorators: { select: [{
-                type: ViewChild,
-                args: [NaturalSelectComponent]
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], service: [{
+                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
+        }], propDecorators: { service: [{
                 type: Input,
                 args: [{ required: true }]
             }], placeholder: [{
@@ -10205,8 +10265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }], main: [{
                 type: Input,
                 args: [{ required: true }]
-            }], selectionChange: [{
-                type: Output
             }], hierarchicSelectorFilters: [{
                 type: Input
             }], hierarchicSelectorConfig: [{
@@ -10247,12 +10305,12 @@ class NaturalSelectEnumComponent extends AbstractSelect {
     getDisplayFn() {
         throw new Error('This should never be called');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectEnumComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n        (selectionChange)=\"propagateValue($event.value)\"\n        (blur)=\"onBlur()\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select-enum', standalone: true, imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, CommonModule, MatOptionModule], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'natural-select-enum', imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, CommonModule, MatOptionModule], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n        (selectionChange)=\"propagateValue($event.value)\"\n        (blur)=\"onBlur()\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { enumName: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10377,12 +10435,12 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
     getSelectKey() {
         return this.config?.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select-hierarchic', standalone: true, imports: [
+            args: [{ selector: 'natural-select-hierarchic', imports: [
                         MatFormFieldModule,
                         MatInputModule,
                         FormsModule,
@@ -10392,7 +10450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                         MatButtonModule,
                         MatTooltipModule,
                         RouterLink,
-                    ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
+                    ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
         }], propDecorators: { selectLabel: [{
                 type: Input
             }], config: [{
@@ -10444,10 +10502,10 @@ class NaturalSidenavStackService {
     next() {
         this.currentSidenav.next(this.sidenavs[this.sidenavs.length - 1]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavStackService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavStackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -10632,19 +10690,19 @@ class NaturalSidenavService {
             this.sessionStorage.setItem(this.openedStorageKeyWithName, this.opened ? 'true' : 'false');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class NaturalSidenavComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'natural-sidenav',
@@ -10680,7 +10738,7 @@ class NaturalSidenavContainerComponent {
     /**
      * Inner "native" material sidenav
      */
-    menuSidenav;
+    menuSidenav = viewChild.required(MatSidenav);
     get isMinimized() {
         return this.sidenavService.isMinimized;
     }
@@ -10711,12 +10769,12 @@ class NaturalSidenavContainerComponent {
     toggleMinimized() {
         this.sidenavService.toggleMinimized();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], standalone: true, imports: [MatSidenavModule, CommonModule], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], imports: [MatSidenavModule, CommonModule], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }], propDecorators: { name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10731,16 +10789,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
                 args: ['attr.no-scroll']
             }, {
                 type: Input
-            }], menuSidenav: [{
-                type: ViewChild,
-                args: [MatSidenav, { static: true }]
             }] } });
 
 class NaturalSidenavContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-sidenav-content', template: '<ng-content />', standalone: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }]
         }] });
@@ -10757,12 +10812,12 @@ class NaturalStampComponent {
             this.item.updateDate === this.item.creationDate;
         return !same && (!!this.item.updateDate || !!this.item.updater);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n    @if (item.creationDate || item.creator) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n            :\n            @if (item.creator) {\n                <span>{{ item.creator.fullName || item.creator.name }}</span>\n            }\n            @if (item.creator && item.creationDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.creationDate) {\n                <span>{{ item.creationDate | date }} ({{ item.creationDate | timeAgo }})</span>\n            }\n        </div>\n    }\n    @if (showUpdate()) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Modification</span>\n            :\n            @if (item.updater) {\n                <span>{{ item.updater.fullName || item.updater.name }}</span>\n            }\n            @if (item.updater && item.updateDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.updateDate) {\n                <span>{{ item.updateDate | date }} ({{ item.updateDate | timeAgo }})</span>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n    @if (item.creationDate || item.creator) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n            :\n            @if (item.creator) {\n                <span>{{ item.creator.fullName || item.creator.name }}</span>\n            }\n            @if (item.creator && item.creationDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.creationDate) {\n                <span>{{ item.creationDate | date }} ({{ item.creationDate | timeAgo }})</span>\n            }\n        </div>\n    }\n    @if (showUpdate()) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Modification</span>\n            :\n            @if (item.updater) {\n                <span>{{ item.updater.fullName || item.updater.name }}</span>\n            }\n            @if (item.updater && item.updateDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.updateDate) {\n                <span>{{ item.updateDate | date }} ({{ item.updateDate | timeAgo }})</span>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalStampComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalStampComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-stamp', standalone: true, imports: [DatePipe, NaturalTimeAgoPipe], template: "@if (item) {\n    @if (item.creationDate || item.creator) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n            :\n            @if (item.creator) {\n                <span>{{ item.creator.fullName || item.creator.name }}</span>\n            }\n            @if (item.creator && item.creationDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.creationDate) {\n                <span>{{ item.creationDate | date }} ({{ item.creationDate | timeAgo }})</span>\n            }\n        </div>\n    }\n    @if (showUpdate()) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Modification</span>\n            :\n            @if (item.updater) {\n                <span>{{ item.updater.fullName || item.updater.name }}</span>\n            }\n            @if (item.updater && item.updateDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.updateDate) {\n                <span>{{ item.updateDate | date }} ({{ item.updateDate | timeAgo }})</span>\n            }\n        </div>\n    }\n}\n" }]
+            args: [{ selector: 'natural-stamp', imports: [DatePipe, NaturalTimeAgoPipe], template: "@if (item) {\n    @if (item.creationDate || item.creator) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n            :\n            @if (item.creator) {\n                <span>{{ item.creator.fullName || item.creator.name }}</span>\n            }\n            @if (item.creator && item.creationDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.creationDate) {\n                <span>{{ item.creationDate | date }} ({{ item.creationDate | timeAgo }})</span>\n            }\n        </div>\n    }\n    @if (showUpdate()) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Modification</span>\n            :\n            @if (item.updater) {\n                <span>{{ item.updater.fullName || item.updater.name }}</span>\n            }\n            @if (item.updater && item.updateDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.updateDate) {\n                <span>{{ item.updateDate | date }} ({{ item.updateDate | timeAgo }})</span>\n            }\n        </div>\n    }\n}\n" }]
         }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10783,64 +10838,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * External URL will always be opened in new tab.
  */
 class NaturalTableButtonComponent {
-    queryParams = {};
-    queryParamsHandling = '';
-    label;
-    icon;
-    href;
-    navigate = [];
-    fragment;
-    preserveFragment = false;
-    disabled = false;
-    raised = false;
-    color;
-    buttonClick = new EventEmitter();
-    type = 'none';
-    ngOnChanges() {
-        if (this.navigate instanceof UrlTree || this.navigate?.length || Object.keys(this.queryParams).length) {
-            this.type = 'routerLink';
-        }
-        else if (this.href) {
-            this.type = 'href';
-        }
-        else if (this.buttonClick.observed) {
-            this.type = 'click';
+    queryParams = input({});
+    queryParamsHandling = input('');
+    label = input();
+    icon = input();
+    href = input();
+    navigate = input([]);
+    fragment = input();
+    preserveFragment = input(false);
+    disabled = input(false);
+    raised = input(false);
+    color = input();
+    buttonClick$ = new Subject();
+    buttonClick = outputFromObservable(this.buttonClick$);
+    type = computed(() => {
+        const navigate = this.navigate();
+        if (navigate instanceof UrlTree || navigate?.length || Object.keys(this.queryParams()).length) {
+            return 'routerLink';
+        }
+        else if (this.href()) {
+            return 'href';
+        }
+        else if (this.buttonClick$.observed) {
+            return 'click';
         }
         else {
-            this.type = 'none';
+            return 'none';
         }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", disabled: "disabled", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n    <span>\n        @if (icon) {\n            <mat-icon [naturalIcon]=\"icon\" />\n        }\n        @if (label) {\n            <span>{{ label }}</span>\n        }\n    </span>\n}\n\n@if (!raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n\n@if (raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-raised-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            (click)=\"buttonClick.emit($event)\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a\n            [attr.href]=\"href\"\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n            target=\"_blank\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else if (!raised()) {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n} @else {\n    <!-- App routed link -->\n    @switch (type()) {\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-raised-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click  -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-raised-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-raised-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    target=\"_blank\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, standalone: true, imports: [MatIconModule, NaturalIconDirective, MatButtonModule, RouterLink], template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n    <span>\n        @if (icon) {\n            <mat-icon [naturalIcon]=\"icon\" />\n        }\n        @if (label) {\n            <span>{{ label }}</span>\n        }\n    </span>\n}\n\n@if (!raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n\n@if (raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-raised-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            (click)=\"buttonClick.emit($event)\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a\n            [attr.href]=\"href\"\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n            target=\"_blank\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
-        }], propDecorators: { queryParams: [{
-                type: Input
-            }], queryParamsHandling: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], href: [{
-                type: Input
-            }], navigate: [{
-                type: Input
-            }], fragment: [{
-                type: Input
-            }], preserveFragment: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], raised: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, NaturalIconDirective, MatButtonModule, RouterLink], template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else if (!raised()) {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n} @else {\n    <!-- App routed link -->\n    @switch (type()) {\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-raised-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click  -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-raised-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-raised-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    target=\"_blank\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
+        }] });
 
 /*
  * Public API Surface of natural
@@ -11006,7 +11038,7 @@ class AvatarService {
         return this.failedSources.has(this.getSourceKey(source));
     }
     markSourceAsFailed(source) {
-        this.failedSources.set(this.getSourceKey(source), source);
+        this.failedSources.set(this.getSourceKey(source), true);
     }
     calculateAsciiCode(value) {
         return value
@@ -11014,10 +11046,10 @@ class AvatarService {
             .map(letter => letter.charCodeAt(0))
             .reduce((previous, current) => previous + current);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AvatarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AvatarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -11029,198 +11061,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 class NaturalAvatarComponent {
     avatarService = inject(AvatarService);
-    image;
-    initials;
-    gravatar;
-    size = 50;
-    decorated = true;
-    textSizeRatio = 2.25;
-    bgColor;
-    fgColor = '#FFF';
-    borderRadius = '';
-    textMaximumLength = 2;
-    avatarSrc = null;
-    avatarText = null;
-    avatarStyle = {};
-    hostStyle = {};
-    currentIndex = -1;
-    sources = [];
-    /**
-     * Detect inputs change
-     */
-    ngOnChanges(changes) {
-        this.sources.length = 0;
+    image = input();
+    initials = input();
+    gravatar = input();
+    size = input(50);
+    decorated = input(true);
+    textSizeRatio = input(2.25);
+    bgColor = input();
+    fgColor = input('#FFF');
+    borderRadius = input('');
+    textMaximumLength = input(2);
+    sources = linkedSignal(() => {
+        const sources = [];
         for (const [propName, creator] of this.avatarService.getCreators()) {
-            if (!changes[propName]) {
-                continue;
-            }
-            const currentValue = changes[propName].currentValue;
-            if (currentValue && typeof currentValue === 'string') {
-                this.sources.push(new creator(currentValue));
+            const value = this[propName]();
+            if (value) {
+                sources.push(new creator(value));
             }
         }
-        // reinitialize the avatar component when a source property value has changed
-        // the fallback system must be re-invoked with the new values.
-        this.initializeAvatar();
-    }
+        return {
+            currentIndex: this.findNextNonFailingIndex(-1, sources),
+            sources,
+        };
+    });
+    currentSource = computed(() => {
+        const sources = this.sources();
+        return sources.sources[sources.currentIndex];
+    });
+    imageAvatar = computed(() => this.currentSource()?.getAvatar(+this.size()));
+    textAvatar = computed(() => this.currentSource()?.getAvatar(+this.textMaximumLength()));
     /**
-     * Fetch avatar source
+     * Try to use the next available avatar source that has not already failed in the past
      */
     tryNextSource() {
-        const previousSource = this.sources[this.currentIndex];
+        const previousSource = this.currentSource();
         if (previousSource) {
             this.avatarService.markSourceAsFailed(previousSource);
         }
-        const source = this.findNextSource();
-        if (!source) {
-            this.clearAvatar();
-            return;
-        }
-        if (source.isTextual()) {
-            this.buildTextAvatar(source);
-        }
-        else {
-            this.buildImageAvatar(source);
-        }
+        const { currentIndex, sources } = this.sources();
+        this.sources.set({
+            currentIndex: this.findNextNonFailingIndex(currentIndex, sources),
+            sources,
+        });
     }
-    findNextSource() {
-        while (++this.currentIndex < this.sources.length) {
-            const source = this.sources[this.currentIndex];
+    findNextNonFailingIndex(currentIndex, sources) {
+        while (++currentIndex < sources.length) {
+            const source = sources[currentIndex];
             if (source && !this.avatarService.sourceHasFailedBefore(source)) {
-                return source;
+                return currentIndex;
             }
         }
-        return null;
-    }
-    /**
-     * Initialize the avatar component and its fallback system
-     */
-    initializeAvatar() {
-        this.currentIndex = -1;
-        if (this.sources.length > 0) {
-            this.tryNextSource();
-            this.hostStyle = {
-                width: this.size + 'px',
-                height: this.size + 'px',
-            };
-        }
-    }
-    clearAvatar() {
-        this.avatarSrc = null;
-        this.avatarText = null;
-        this.avatarStyle = {};
-    }
-    buildTextAvatar(avatarSource) {
-        this.clearAvatar();
-        avatarSource.getAvatar(+this.textMaximumLength).then(avatarText => (this.avatarText = avatarText));
-        this.avatarStyle = this.getTextualStyle(avatarSource.getValue());
-    }
-    buildImageAvatar(avatarSource) {
-        this.clearAvatar();
-        avatarSource.getAvatar(+this.size).then(avatarSrc => (this.avatarSrc = avatarSrc));
-        this.avatarStyle = this.getImageStyle();
+        return currentIndex;
     }
     /**
      * Returns initials style
      */
-    getTextualStyle(avatarValue) {
+    textualStyle = computed(() => {
+        const bgColor = this.bgColor();
+        const backgroundColor = bgColor
+            ? bgColor
+            : this.avatarService.getRandomColor(this.currentSource()?.getValue() ?? '');
         return {
             textAlign: 'center',
-            borderRadius: this.borderRadius || '100%',
+            borderRadius: this.borderRadius() || '100%',
             textTransform: 'uppercase',
-            color: this.fgColor,
-            backgroundColor: this.bgColor ? this.bgColor : this.avatarService.getRandomColor(avatarValue),
-            font: Math.floor(+this.size / this.textSizeRatio) + 'px Helvetica, Arial, sans-serif',
-            lineHeight: this.size + 'px',
-            width: this.size + 'px',
-            height: this.size + 'px',
+            color: this.fgColor(),
+            backgroundColor: backgroundColor,
+            font: Math.floor(+this.size() / this.textSizeRatio()) + 'px Helvetica, Arial, sans-serif',
+            lineHeight: this.size() + 'px',
+            width: this.size() + 'px',
+            height: this.size() + 'px',
         };
-    }
+    });
     /**
      * Returns image style
      */
-    getImageStyle() {
+    imageStyle = computed(() => {
         return {
             maxWidth: '100%',
-            borderRadius: this.borderRadius || '100%',
-            width: this.size + 'px',
-            height: this.size + 'px',
+            borderRadius: this.borderRadius() || '100%',
+            width: this.size() + 'px',
+            height: this.size() + 'px',
         };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", decorated: "decorated", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, host: { properties: { "style.height.px": "this.size", "style.width.px": "this.size", "class.decorated": "this.decorated" } }, usesOnChanges: true, ngImport: i0, template: `
-        <div class="avatar-container" [ngStyle]="hostStyle">
-            @if (avatarSrc) {
-                <img
-                    [src]="avatarSrc"
-                    [width]="size"
-                    [height]="size"
-                    [ngStyle]="avatarStyle"
-                    (error)="tryNextSource()"
-                    class="avatar-content"
-                    loading="lazy"
-                />
-            }
-            @if (avatarText) {
-                <div class="avatar-content" [class.natural-elevation]="decorated" [ngStyle]="avatarStyle">
-                    {{ avatarText }}
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, gravatar: { classPropertyName: "gravatar", publicName: "gravatar", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, decorated: { classPropertyName: "decorated", publicName: "decorated", isSignal: true, isRequired: false, transformFunction: null }, textSizeRatio: { classPropertyName: "textSizeRatio", publicName: "textSizeRatio", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, fgColor: { classPropertyName: "fgColor", publicName: "fgColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, textMaximumLength: { classPropertyName: "textMaximumLength", publicName: "textMaximumLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "size()", "style.width.px": "size()", "class.decorated": "decorated()" } }, ngImport: i0, template: `
+        @let source = currentSource();
+        <div class="avatar-container" [style.height.px]="size()" [style.width.px]="size()">
+            @if (source && source?.isTextual()) {
+                <div class="avatar-content" [class.natural-elevation]="decorated()" [ngStyle]="textualStyle()">
+                    {{ textAvatar() | async }}
                 </div>
+            } @else if (source) {
+                @if (imageAvatar() | async; as src) {
+                    <img
+                        class="avatar-content"
+                        loading="lazy"
+                        [src]="src"
+                        [width]="size()"
+                        [height]="size()"
+                        [ngStyle]="imageStyle()"
+                        (error)="tryNextSource()"
+                    />
+                }
             }
         </div>
-    `, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-avatar', template: `
-        <div class="avatar-container" [ngStyle]="hostStyle">
-            @if (avatarSrc) {
-                <img
-                    [src]="avatarSrc"
-                    [width]="size"
-                    [height]="size"
-                    [ngStyle]="avatarStyle"
-                    (error)="tryNextSource()"
-                    class="avatar-content"
-                    loading="lazy"
-                />
-            }
-            @if (avatarText) {
-                <div class="avatar-content" [class.natural-elevation]="decorated" [ngStyle]="avatarStyle">
-                    {{ avatarText }}
+        @let source = currentSource();
+        <div class="avatar-container" [style.height.px]="size()" [style.width.px]="size()">
+            @if (source && source?.isTextual()) {
+                <div class="avatar-content" [class.natural-elevation]="decorated()" [ngStyle]="textualStyle()">
+                    {{ textAvatar() | async }}
                 </div>
+            } @else if (source) {
+                @if (imageAvatar() | async; as src) {
+                    <img
+                        class="avatar-content"
+                        loading="lazy"
+                        [src]="src"
+                        [width]="size()"
+                        [height]="size()"
+                        [ngStyle]="imageStyle()"
+                        (error)="tryNextSource()"
+                    />
+                }
             }
         </div>
-    `, standalone: true, imports: [CommonModule], styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
-        }], propDecorators: { image: [{
-                type: Input
-            }], initials: [{
-                type: Input
-            }], gravatar: [{
-                type: Input
-            }], size: [{
-                type: HostBinding,
-                args: ['style.height.px']
-            }, {
-                type: HostBinding,
-                args: ['style.width.px']
-            }, {
-                type: Input
-            }], decorated: [{
-                type: HostBinding,
-                args: ['class.decorated']
-            }, {
-                type: Input
-            }], textSizeRatio: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], fgColor: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textMaximumLength: [{
-                type: Input
-            }] } });
+    `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.height.px]': 'size()',
+                        '[style.width.px]': 'size()',
+                        '[class.decorated]': 'decorated()',
+                    }, imports: [CommonModule], styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
+        }] });
 
 /*
  * Public API Surface of ngx-avatar
@@ -11307,10 +11283,10 @@ class NaturalMatomoService {
             this.referrerUrl = currentUrl;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalMatomoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalMatomoService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -11393,10 +11369,10 @@ class NaturalErrorHandler extends ErrorHandler {
                 .subscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalErrorHandler, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -11456,10 +11432,10 @@ class NaturalHttpPrefixDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: "naturalHttpPrefix" }, host: { listeners: { "ngModelChange": "httpize($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: "naturalHttpPrefix" }, host: { listeners: { "ngModelChange": "httpize($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[naturalHttpPrefix]',
@@ -11499,6 +11475,11 @@ function getOperations(req) {
  * The server will validate the signature before executing the GraphQL query.
  */
 function graphqlQuerySigner(key) {
+    // Validates the configuration exactly 1 time (not for
+    // every query), and if not reject **all** HTTP requests
+    if (!key) {
+        return () => throwError(() => new Error('graphqlQuerySigner requires a non-empty key. Configure it in local.php under signedQueries.'));
+    }
     return (req, next) => {
         const mustSign = req.method === 'POST' && /\/graphql(\?|$)/.exec(req.url);
         if (!mustSign) {
@@ -11526,5 +11507,5 @@ function graphqlQuerySigner(key) {
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarService, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTimeAgoPipe, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, available, cancellableTimeout, collectErrors, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, ifValid, integer, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, possibleComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
+export { AvatarService, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, collectErrors, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, ifValid, integer, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, possibleComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
 //# sourceMappingURL=ecodev-natural.mjs.map