@ecodev/natural 52.0.0 → 53.2.0

package/fesm2022/ecodev-natural.mjs

@@ -1,76 +1,76 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
-import { Directive, Component, Inject, Injectable, HostBinding, HostListener, inject, InjectionToken, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Input, NgModule, Host, Self, EventEmitter, Output, Pipe, ContentChild, createEnvironmentInjector, createComponent, runInInjectionContext, PLATFORM_ID, ErrorHandler } from '@angular/core';
+import { Directive, Component, Inject, Injectable, HostBinding, HostListener, inject, InjectionToken, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Input, Host, Self, EventEmitter, Output, Pipe, APP_INITIALIZER, ContentChild, createEnvironmentInjector, createComponent, runInInjectionContext, PLATFORM_ID, ErrorHandler, importProvidersFrom } from '@angular/core';
 import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith, last, EMPTY, merge as merge$1, Observable, first as first$1, combineLatest, catchError, from, ReplaySubject, debounceTime as debounceTime$1, raceWith, take as take$1, mergeMap, shareReplay as shareReplay$1, forkJoin, map as map$1, tap as tap$1, asyncScheduler } from 'rxjs';
-import * as i3 from '@angular/forms';
-import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, UntypedFormControl, FormsModule, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/router';
-import { Router, ActivatedRoute, NavigationStart, NavigationEnd, PRIMARY_OUTLET, RouterModule, NavigationError, DefaultUrlSerializer } from '@angular/router';
+import * as i2$3 from '@angular/forms';
+import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, FormControlDirective, FormControlName } from '@angular/forms';
+import * as i2$4 from '@angular/router';
+import { Router, ActivatedRoute, NavigationStart, NavigationEnd, PRIMARY_OUTLET, RouterLink, NavigationError, DefaultUrlSerializer } from '@angular/router';
 import { merge, isArray, pickBy, isEmpty, cloneDeep, uniq, groupBy, mergeWith, defaultsDeep, omit, kebabCase, clone, pick, isEqual, defaults, isObject, intersection, flatten, differenceWith } from 'lodash-es';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i4 from '@angular/material/button';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/material/snack-bar';
+import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { switchMap, first, map, filter, finalize, takeUntil, take, tap, takeWhile, debounceTime, shareReplay, startWith, distinctUntilChanged, throttleTime } from 'rxjs/operators';
-import * as i7$2 from '@angular/material/table';
+import * as i3$5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { DataSource, SelectionModel } from '@angular/cdk/collections';
 import * as i1$3 from '@angular/material/core';
-import { MAT_DATE_FORMATS, NativeDateAdapter, ErrorStateMatcher, MatRipple, MatRippleModule } from '@angular/material/core';
+import { MAT_DATE_FORMATS, MatOptionModule, NativeDateAdapter, ErrorStateMatcher, MatRipple, MatRippleModule } from '@angular/material/core';
 import * as i1$2 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i4$1 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { OverlayConfig } from '@angular/cdk/overlay';
+import * as i2$2 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { trigger, state, style, transition, sequence, query, animate, group } from '@angular/animations';
+import { NgIf, NgFor, NgClass, AsyncPipe, DatePipe, NgTemplateOutlet, DOCUMENT, UpperCasePipe, NgStyle, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@angular/cdk/a11y';
-import * as i2$1 from '@angular/common';
-import { CommonModule, DatePipe, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i4$2 from '@angular/material/form-field';
-import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/checkbox';
+import * as i7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/datepicker';
+import * as i6 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4$3 from '@angular/material/select';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1$4 from 'apollo-angular';
 import { gql } from 'apollo-angular';
 import { NetworkStatus } from '@apollo/client/core';
 import * as i1$6 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
-import * as i4$4 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i1$5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i2$3 from '@angular/platform-browser';
-import * as i8 from '@angular/material/tooltip';
+import * as i6$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$5 from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import * as i2$5 from '@angular/platform-browser';
+import * as i3$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i1$7 from '@angular/material/tabs';
-import * as i4$5 from '@angular/material/list';
+import * as i5 from '@angular/material/list';
 import { MatSelectionList, MatListModule } from '@angular/material/list';
-import * as i2$4 from '@angular/material/autocomplete';
+import * as i1$8 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i7$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { FlatTreeControl, CdkTreeModule } from '@angular/cdk/tree';
-import * as i5$2 from '@angular/material/tree';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import * as i3$3 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
-import * as i9 from '@angular/material/chips';
+import * as i7$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i5$1 from '@angular/material/divider';
-import * as i3$1 from '@ngbracket/ngx-layout';
-import * as i9$1 from '@angular/material/paginator';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i3$4 from '@ngbracket/ngx-layout';
+import * as i7$3 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i3$2 from '@angular/material/sidenav';
+import * as i2$6 from '@angular/material/sidenav';
 import { MatSidenavContainer, MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$8 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i1$9 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 
 class NaturalAbstractController {
     constructor() {
@@ -104,11 +104,11 @@ class NaturalConfirmComponent {
         this.data = data;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalConfirmComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalConfirmComponent, 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: "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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalConfirmComponent, decorators: [{
             type: Component,
-            args: [{ 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: [{ 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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -154,7 +154,7 @@ class NaturalAlertService {
         });
         return dialog.afterClosed();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertService, deps: [{ token: i1.MatDialog }, { token: i2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertService, deps: [{ token: i1.MatDialog }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertService, decorators: [{
@@ -162,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.MatSnackBar }]; } });
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2$1.MatSnackBar }]; } });
 
 class NaturalAbstractPanel extends NaturalAbstractController {
     constructor() {
@@ -2763,11 +2763,11 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: NATURAL_DROPDOWN_CONTAINER_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalDropdownContainerComponent, 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></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\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{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\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{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], 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></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\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{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], standalone: true, imports: [PortalModule, NgIf, 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></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\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{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_CONTAINER_DATA]
@@ -3093,11 +3093,22 @@ class TypeDateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeDateComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$3.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeDateComponent, 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\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: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.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: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"], 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeDateComponent, decorators: [{
             type: Component,
-            args: [{ 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\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"] }]
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        NgFor,
+                        MatOptionModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        NgIf,
+                        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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -3475,7 +3486,7 @@ class NaturalPersistenceService {
         }
         return this.isValid(key, storageKey, result) ? result : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPersistenceService, deps: [{ token: i2$2.Router }, { token: SESSION_STORAGE }, { token: NATURAL_PERSISTENCE_VALIDATOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPersistenceService, deps: [{ token: i2$4.Router }, { token: SESSION_STORAGE }, { token: NATURAL_PERSISTENCE_VALIDATOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPersistenceService, decorators: [{
@@ -3483,7 +3494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$4.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SESSION_STORAGE]
                 }] }, { type: undefined, decorators: [{
@@ -5062,19 +5073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 }]
         }] });
 
-class NaturalAlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertModule, declarations: [NaturalConfirmComponent], imports: [CommonModule, MatDialogModule, MatSnackBarModule, MatButtonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertModule, imports: [CommonModule, MatDialogModule, MatSnackBarModule, MatButtonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAlertModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalConfirmComponent],
-                    imports: [CommonModule, MatDialogModule, MatSnackBarModule, MatButtonModule],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
@@ -5105,12 +5103,12 @@ class NaturalIconDirective {
         this.matIconComponent = matIconComponent;
         this._size = undefined;
         this.classes = '';
-        this.registerIcons(config);
+        this.registerIcons(config ?? {});
     }
     set naturalIcon(value) {
         const newIcon = {
             name: value,
-            ...(this.config[value] ?? { font: value }),
+            ...(this.config?.[value] ?? { font: value }),
         };
         if (newIcon.class) {
             this.classes = newIcon.class;
@@ -5142,15 +5140,18 @@ class NaturalIconDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalIconDirective, deps: [{ token: i1$5.MatIconRegistry }, { token: i2$3.DomSanitizer }, { token: NATURAL_ICONS_CONFIG }, { token: i1$5.MatIcon, host: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalIconDirective, 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalIconDirective, deps: [{ token: i1$5.MatIconRegistry }, { token: i2$5.DomSanitizer }, { token: NATURAL_ICONS_CONFIG, optional: true }, { token: i1$5.MatIcon, host: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", 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: "16.1.2", ngImport: i0, type: NaturalIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-icon[naturalIcon]',
+                    standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.MatIconRegistry }, { type: i2$3.DomSanitizer }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.MatIconRegistry }, { type: i2$5.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [NATURAL_ICONS_CONFIG]
                 }] }, { type: i1$5.MatIcon, decorators: [{
@@ -5268,11 +5269,23 @@ class NaturalColumnsPickerComponent {
         return visibleButtons > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [{ token: i1$6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalColumnsPickerComponent, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    <ng-container *ngIf=\"(isMobile | async) && someVisibleButtons(); else elseBlock\">\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\"></mat-icon>\n        </button>\n\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                <ng-container *ngFor=\"let button of buttons\">\n                    <a\n                        mat-menu-item\n                        *ngIf=\"button.href\"\n                        [href]=\"defaultTrue(button.show) && button.href\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </a>\n\n                    <button\n                        mat-menu-item\n                        *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </button>\n\n                    <ng-container *ngIf=\"defaultTrue(button.show) && button.buttons\">\n                        <button\n                            mat-menu-item\n                            [matMenuTriggerFor]=\"subMenu\"\n                            (click)=\"button.click?.(button, $event)\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                            {{ button.label }}\n                        </button>\n\n                        <mat-menu #subMenu=\"matMenu\">\n                            <ng-template matMenuContent>\n                                <a\n                                    *ngFor=\"let subButton of button.buttons\"\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            </ng-template>\n                        </mat-menu>\n                    </ng-container>\n                </ng-container>\n\n                <button\n                    *ngIf=\"displayedColumns.length\"\n                    [matMenuTriggerFor]=\"columnMenu\"\n                    mat-menu-item\n                    [ngClass]=\"needMargin(null)\"\n                >\n                    <span i18n>Colonnes</span>\n                </button>\n            </ng-template>\n        </mat-menu>\n    </ng-container>\n\n    <ng-template #elseBlock>\n        <ng-container *ngFor=\"let button of buttons\">\n            <a\n                mat-icon-button\n                *ngIf=\"button.href\"\n                [href]=\"defaultTrue(button.show) && 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\"></mat-icon>\n            </a>\n\n            <button\n                mat-icon-button\n                *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\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\"></mat-icon>\n            </button>\n\n            <ng-container *ngIf=\"defaultTrue(button.show) && 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\"></mat-icon>\n                </button>\n\n                <mat-menu #menu=\"matMenu\">\n                    <ng-template matMenuContent>\n                        <a\n                            *ngFor=\"let subButton of button.buttons\"\n                            mat-menu-item\n                            [disabled]=\"subButton.disabled\"\n                            (click)=\"subButton.click(subButton, $event)\"\n                        >\n                            {{ subButton.label }}\n                        </a>\n                    </ng-template>\n                </mat-menu>\n            </ng-container>\n        </ng-container>\n\n        <button\n            *ngIf=\"displayedColumns.length\"\n            [matMenuTriggerFor]=\"columnMenu\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner les colonnes\"\n        >\n            <mat-icon naturalIcon=\"view_column\"></mat-icon>\n        </button>\n    </ng-template>\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            mat-menu-item\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    <ng-container *ngIf=\"(isMobile | async) && someVisibleButtons(); else elseBlock\">\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\"></mat-icon>\n        </button>\n\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                <ng-container *ngFor=\"let button of buttons\">\n                    <a\n                        mat-menu-item\n                        *ngIf=\"button.href\"\n                        [href]=\"defaultTrue(button.show) && button.href\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </a>\n\n                    <button\n                        mat-menu-item\n                        *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </button>\n\n                    <ng-container *ngIf=\"defaultTrue(button.show) && button.buttons\">\n                        <button\n                            mat-menu-item\n                            [matMenuTriggerFor]=\"subMenu\"\n                            (click)=\"button.click?.(button, $event)\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                            {{ button.label }}\n                        </button>\n\n                        <mat-menu #subMenu=\"matMenu\">\n                            <ng-template matMenuContent>\n                                <a\n                                    *ngFor=\"let subButton of button.buttons\"\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            </ng-template>\n                        </mat-menu>\n                    </ng-container>\n                </ng-container>\n\n                <button\n                    *ngIf=\"displayedColumns.length\"\n                    [matMenuTriggerFor]=\"columnMenu\"\n                    mat-menu-item\n                    [ngClass]=\"needMargin(null)\"\n                >\n                    <span i18n>Colonnes</span>\n                </button>\n            </ng-template>\n        </mat-menu>\n    </ng-container>\n\n    <ng-template #elseBlock>\n        <ng-container *ngFor=\"let button of buttons\">\n            <a\n                mat-icon-button\n                *ngIf=\"button.href\"\n                [href]=\"defaultTrue(button.show) && 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\"></mat-icon>\n            </a>\n\n            <button\n                mat-icon-button\n                *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\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\"></mat-icon>\n            </button>\n\n            <ng-container *ngIf=\"defaultTrue(button.show) && 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\"></mat-icon>\n                </button>\n\n                <mat-menu #menu=\"matMenu\">\n                    <ng-template matMenuContent>\n                        <a\n                            *ngFor=\"let subButton of button.buttons\"\n                            mat-menu-item\n                            [disabled]=\"subButton.disabled\"\n                            (click)=\"subButton.click(subButton, $event)\"\n                        >\n                            {{ subButton.label }}\n                        </a>\n                    </ng-template>\n                </mat-menu>\n            </ng-container>\n        </ng-container>\n\n        <button\n            *ngIf=\"displayedColumns.length\"\n            [matMenuTriggerFor]=\"columnMenu\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner les colonnes\"\n        >\n            <mat-icon naturalIcon=\"view_column\"></mat-icon>\n        </button>\n    </ng-template>\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            mat-menu-item\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-columns-picker', template: "<div>\n    <ng-container *ngIf=\"(isMobile | async) && someVisibleButtons(); else elseBlock\">\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\"></mat-icon>\n        </button>\n\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                <ng-container *ngFor=\"let button of buttons\">\n                    <a\n                        mat-menu-item\n                        *ngIf=\"button.href\"\n                        [href]=\"defaultTrue(button.show) && button.href\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </a>\n\n                    <button\n                        mat-menu-item\n                        *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </button>\n\n                    <ng-container *ngIf=\"defaultTrue(button.show) && button.buttons\">\n                        <button\n                            mat-menu-item\n                            [matMenuTriggerFor]=\"subMenu\"\n                            (click)=\"button.click?.(button, $event)\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                            {{ button.label }}\n                        </button>\n\n                        <mat-menu #subMenu=\"matMenu\">\n                            <ng-template matMenuContent>\n                                <a\n                                    *ngFor=\"let subButton of button.buttons\"\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            </ng-template>\n                        </mat-menu>\n                    </ng-container>\n                </ng-container>\n\n                <button\n                    *ngIf=\"displayedColumns.length\"\n                    [matMenuTriggerFor]=\"columnMenu\"\n                    mat-menu-item\n                    [ngClass]=\"needMargin(null)\"\n                >\n                    <span i18n>Colonnes</span>\n                </button>\n            </ng-template>\n        </mat-menu>\n    </ng-container>\n\n    <ng-template #elseBlock>\n        <ng-container *ngFor=\"let button of buttons\">\n            <a\n                mat-icon-button\n                *ngIf=\"button.href\"\n                [href]=\"defaultTrue(button.show) && 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\"></mat-icon>\n            </a>\n\n            <button\n                mat-icon-button\n                *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\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\"></mat-icon>\n            </button>\n\n            <ng-container *ngIf=\"defaultTrue(button.show) && 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\"></mat-icon>\n                </button>\n\n                <mat-menu #menu=\"matMenu\">\n                    <ng-template matMenuContent>\n                        <a\n                            *ngFor=\"let subButton of button.buttons\"\n                            mat-menu-item\n                            [disabled]=\"subButton.disabled\"\n                            (click)=\"subButton.click(subButton, $event)\"\n                        >\n                            {{ subButton.label }}\n                        </a>\n                    </ng-template>\n                </mat-menu>\n            </ng-container>\n        </ng-container>\n\n        <button\n            *ngIf=\"displayedColumns.length\"\n            [matMenuTriggerFor]=\"columnMenu\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner les colonnes\"\n        >\n            <mat-icon naturalIcon=\"view_column\"></mat-icon>\n        </button>\n    </ng-template>\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            mat-menu-item\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
+            args: [{ selector: 'natural-columns-picker', standalone: true, imports: [
+                        NgIf,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        NgFor,
+                        NgClass,
+                        MatCheckboxModule,
+                        MatTooltipModule,
+                        FormsModule,
+                        AsyncPipe,
+                    ], template: "<div>\n    <ng-container *ngIf=\"(isMobile | async) && someVisibleButtons(); else elseBlock\">\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\"></mat-icon>\n        </button>\n\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                <ng-container *ngFor=\"let button of buttons\">\n                    <a\n                        mat-menu-item\n                        *ngIf=\"button.href\"\n                        [href]=\"defaultTrue(button.show) && button.href\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </a>\n\n                    <button\n                        mat-menu-item\n                        *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\n                        (click)=\"button.click?.(button, $event)\"\n                        [disabled]=\"button.disabled\"\n                        [ngClass]=\"needMargin(button)\"\n                    >\n                        <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                        {{ button.label }}\n                    </button>\n\n                    <ng-container *ngIf=\"defaultTrue(button.show) && button.buttons\">\n                        <button\n                            mat-menu-item\n                            [matMenuTriggerFor]=\"subMenu\"\n                            (click)=\"button.click?.(button, $event)\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            <mat-checkbox *ngIf=\"useCheckbox(button)\" [checked]=\"button.checked\"></mat-checkbox>\n\n                            {{ button.label }}\n                        </button>\n\n                        <mat-menu #subMenu=\"matMenu\">\n                            <ng-template matMenuContent>\n                                <a\n                                    *ngFor=\"let subButton of button.buttons\"\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            </ng-template>\n                        </mat-menu>\n                    </ng-container>\n                </ng-container>\n\n                <button\n                    *ngIf=\"displayedColumns.length\"\n                    [matMenuTriggerFor]=\"columnMenu\"\n                    mat-menu-item\n                    [ngClass]=\"needMargin(null)\"\n                >\n                    <span i18n>Colonnes</span>\n                </button>\n            </ng-template>\n        </mat-menu>\n    </ng-container>\n\n    <ng-template #elseBlock>\n        <ng-container *ngFor=\"let button of buttons\">\n            <a\n                mat-icon-button\n                *ngIf=\"button.href\"\n                [href]=\"defaultTrue(button.show) && 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\"></mat-icon>\n            </a>\n\n            <button\n                mat-icon-button\n                *ngIf=\"defaultTrue(button.show) && !button.href && !button.buttons\"\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\"></mat-icon>\n            </button>\n\n            <ng-container *ngIf=\"defaultTrue(button.show) && 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\"></mat-icon>\n                </button>\n\n                <mat-menu #menu=\"matMenu\">\n                    <ng-template matMenuContent>\n                        <a\n                            *ngFor=\"let subButton of button.buttons\"\n                            mat-menu-item\n                            [disabled]=\"subButton.disabled\"\n                            (click)=\"subButton.click(subButton, $event)\"\n                        >\n                            {{ subButton.label }}\n                        </a>\n                    </ng-template>\n                </mat-menu>\n            </ng-container>\n        </ng-container>\n\n        <button\n            *ngIf=\"displayedColumns.length\"\n            [matMenuTriggerFor]=\"columnMenu\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"S\u00E9lectionner les colonnes\"\n        >\n            <mat-icon naturalIcon=\"view_column\"></mat-icon>\n        </button>\n    </ng-template>\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            mat-menu-item\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$6.BreakpointObserver }]; }, propDecorators: { buttons: [{
                 type: Input
             }], availableColumns: [{
@@ -5283,130 +5296,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Output
             }] } });
 
-class NaturalIconModule {
-    constructor(iconRegistry) {
-        // Replace the old Material Icons by the new Material Symbols
-        // This means that `https://fonts.googleapis.com/icon?family=Material+Icons` must be
-        // replaced by `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1`
-        const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
-        const outlinedFontSetClasses = defaultFontSetClasses
-            .filter(fontSetClass => fontSetClass !== 'material-icons')
-            .concat(['material-symbols-outlined']);
-        iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
-        iconRegistry.foobar = 'myocnosernoienr';
-    }
-    static forRoot(config) {
-        return {
-            ngModule: NaturalIconModule,
-            providers: [
-                {
-                    provide: NATURAL_ICONS_CONFIG,
-                    useValue: config,
-                },
-            ],
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalIconModule, deps: [{ token: i1$5.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalIconModule, declarations: [NaturalIconDirective], imports: [CommonModule, MatIconModule], exports: [NaturalIconDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalIconModule, imports: [CommonModule, MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalIconModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalIconDirective],
-                    imports: [CommonModule, MatIconModule],
-                    exports: [NaturalIconDirective],
-                }]
-        }], ctorParameters: function () { return [{ type: i1$5.MatIconRegistry }]; } });
-
-class NaturalColumnsPickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalColumnsPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalColumnsPickerModule, declarations: [NaturalColumnsPickerComponent], imports: [CommonModule,
-            FormsModule,
-            MatMenuModule,
-            MatButtonModule,
-            MatCheckboxModule,
-            NaturalIconModule,
-            MatTooltipModule,
-            MatIconModule], exports: [NaturalColumnsPickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalColumnsPickerModule, imports: [CommonModule,
-            FormsModule,
-            MatMenuModule,
-            MatButtonModule,
-            MatCheckboxModule,
-            NaturalIconModule,
-            MatTooltipModule,
-            MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalColumnsPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalColumnsPickerComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatMenuModule,
-                        MatButtonModule,
-                        MatCheckboxModule,
-                        NaturalIconModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                    ],
-                    exports: [NaturalColumnsPickerComponent],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
 
-/**
- * Need to add  http:// prefix if we don't have prefix already AND we don't have part of it
- */
-function ensureHttpPrefix(value) {
-    if (!value) {
-        return value;
-    }
-    const completePrefix = /^(https?):\/\//i.test(value);
-    const startingPrefix = 'https://'.indexOf(value) === 0 || 'http://'.indexOf(value) === 0;
-    if (!completePrefix && !startingPrefix) {
-        return 'http://' + value;
-    }
-    else {
-        return value;
-    }
-}
-/**
- * This directive only supports ReactiveForms due to ngModel/ngControl encapsulation and changes emissions.
- */
-class NaturalHttpPrefixDirective extends NaturalAbstractController {
-    constructor() {
-        super();
-        this.naturalHttpPrefix = null;
-    }
-    httpize($event) {
-        if (this.naturalHttpPrefix) {
-            const newValue = ensureHttpPrefix($event) || $event;
-            if ($event !== newValue) {
-                this.naturalHttpPrefix.setValue(newValue);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalHttpPrefixDirective, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: "naturalHttpPrefix" }, host: { listeners: { "ngModelChange": "httpize($event)" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[naturalHttpPrefix]',
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { naturalHttpPrefix: [{
-                type: Input
-            }], httpize: [{
-                type: HostListener,
-                args: ['ngModelChange', ['$event']]
-            }] } });
-
 /**
  * Returns an identifier for the tab
  */
@@ -5467,15 +5360,16 @@ class NaturalLinkableTabDirective extends NaturalAbstractController {
     getTabIndex(fragment) {
         return this.component._tabs.toArray().findIndex(tab => fragment === getTabId(tab));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalLinkableTabDirective, deps: [{ token: i1$7.MatTabGroup }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalLinkableTabDirective, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalLinkableTabDirective, deps: [{ token: i1$7.MatTabGroup }, { token: i2$4.ActivatedRoute }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-tab-group[naturalLinkableTab]',
+                    standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$7.MatTabGroup }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }]; }, propDecorators: { naturalLinkableTab: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatTabGroup }, { type: i2$4.ActivatedRoute }, { type: i2$4.Router }]; }, propDecorators: { naturalLinkableTab: [{
                 type: Input
             }] } });
 
@@ -5490,11 +5384,14 @@ class NaturalCapitalizePipe {
         return value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalCapitalizePipe, name: "capitalize" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalCapitalizePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'capitalize' }]
+            args: [{
+                    name: 'capitalize',
+                    standalone: true,
+                }]
         }] });
 
 class NaturalEllipsisPipe {
@@ -5502,11 +5399,14 @@ class NaturalEllipsisPipe {
         return value.substr(0, limit - 1) + (value.length > limit ? '…' : '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalEllipsisPipe, name: "ellipsis" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalEllipsisPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'ellipsis' }]
+            args: [{
+                    name: 'ellipsis',
+                    standalone: true,
+                }]
         }] });
 
 /**
@@ -5522,12 +5422,13 @@ class NaturalEnumPipe {
         return this.enumService.getValueName(value, enumName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalEnumPipe, deps: [{ token: NaturalEnumService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalEnumPipe, name: "enum" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalEnumPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'enum',
+                    standalone: true,
                 }]
         }], ctorParameters: function () { return [{ type: NaturalEnumService }]; } });
 
@@ -5539,76 +5440,16 @@ class NaturalSwissDatePipe extends DatePipe {
         return super.transform(value, format, timezone, locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSwissDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalSwissDatePipe, name: "swissDate" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalSwissDatePipe, isStandalone: true, name: "swissDate" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSwissDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'swissDate',
+                    standalone: true,
                 }]
         }] });
 
-class NaturalSrcDensityDirective {
-    /**
-     * Automatically apply image selection based on screen density.
-     *
-     * The given URL **MUST** be the normal density URL. And it **MUST** include
-     * the size as last path segment. That size will automatically be changed
-     * for other screen densities. That means that the server **MUST** be able to
-     * serve an image of the given size.
-     *
-     * Usage:
-     *
-     * ```html
-     * <img [naturalSrcDensity]="'/api/image/123/200'" />
-     * ```
-     *
-     * Will generate something like:
-     *
-     * ```html
-     * <img
-     *     src="/api/image/123/200"
-     *     srcset="/api/image/123/200, /api/image/123/300 1.5x, /api/image/123/400 2x, /api/image/123/600 3x, /api/image/123/800 4x"
-     * />
-     * ```
-     *
-     * See https://web.dev/codelab-density-descriptors/
-     */
-    set naturalSrcDensity(src) {
-        if (!src) {
-            return;
-        }
-        const match = src.match(/^(.*\/)(\d+)$/);
-        const base = match?.[1];
-        const size = +(match?.[2] ?? 0);
-        let srcset = '';
-        if (base && size) {
-            // This should cover most common densities according to https://www.mydevice.io/#tab1
-            const size15 = Math.round(size * 1.5);
-            const size2 = size * 2;
-            const size3 = size * 3;
-            const size4 = size * 4;
-            srcset = `${base}${size}, ${base}${size15} 1.5x, ${base}${size2} 2x, ${base}${size3} 3x, ${base}${size4} 4x`;
-        }
-        this.elementRef.nativeElement.src = src;
-        this.elementRef.nativeElement.srcset = srcset;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSrcDensityDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSrcDensityDirective, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: "naturalSrcDensity" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'img[naturalSrcDensity]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { naturalSrcDensity: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
 function isDate(value) {
     return value instanceof Date && !isNaN(value.valueOf());
 }
@@ -5731,12 +5572,13 @@ class NaturalTimeAgoPipe {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTimeAgoPipe, deps: [{ token: 'SHOULD_NEVER_BE_INJECTED', optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalTimeAgoPipe, name: "timeAgo" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeAgo',
+                    standalone: true,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
@@ -5745,44 +5587,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                     args: ['SHOULD_NEVER_BE_INJECTED']
                 }] }]; } });
 
-const declarationsToExport$1 = [
-    NaturalCapitalizePipe,
-    NaturalEllipsisPipe,
-    NaturalEnumPipe,
-    NaturalHttpPrefixDirective,
-    NaturalLinkableTabDirective,
-    NaturalSrcDensityDirective,
-    NaturalSwissDatePipe,
-    NaturalTimeAgoPipe,
-];
-class NaturalCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalCommonModule, declarations: [NaturalCapitalizePipe,
-            NaturalEllipsisPipe,
-            NaturalEnumPipe,
-            NaturalHttpPrefixDirective,
-            NaturalLinkableTabDirective,
-            NaturalSrcDensityDirective,
-            NaturalSwissDatePipe,
-            NaturalTimeAgoPipe], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatSelectModule], exports: [NaturalCapitalizePipe,
-            NaturalEllipsisPipe,
-            NaturalEnumPipe,
-            NaturalHttpPrefixDirective,
-            NaturalLinkableTabDirective,
-            NaturalSrcDensityDirective,
-            NaturalSwissDatePipe,
-            NaturalTimeAgoPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalCommonModule, providers: [sessionStorageProvider, localStorageProvider], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatSelectModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalCommonModule, decorators: [{
-            type: NgModule,
+class NaturalSrcDensityDirective {
+    /**
+     * Automatically apply image selection based on screen density.
+     *
+     * The given URL **MUST** be the normal density URL. And it **MUST** include
+     * the size as last path segment. That size will automatically be changed
+     * for other screen densities. That means that the server **MUST** be able to
+     * serve an image of the given size.
+     *
+     * Usage:
+     *
+     * ```html
+     * <img [naturalSrcDensity]="'/api/image/123/200'" />
+     * ```
+     *
+     * Will generate something like:
+     *
+     * ```html
+     * <img
+     *     src="/api/image/123/200"
+     *     srcset="/api/image/123/200, /api/image/123/300 1.5x, /api/image/123/400 2x, /api/image/123/600 3x, /api/image/123/800 4x"
+     * />
+     * ```
+     *
+     * See https://web.dev/codelab-density-descriptors/
+     */
+    set naturalSrcDensity(src) {
+        if (!src) {
+            return;
+        }
+        const match = src.match(/^(.*\/)(\d+)$/);
+        const base = match?.[1];
+        const size = +(match?.[2] ?? 0);
+        let srcset = '';
+        if (base && size) {
+            // This should cover most common densities according to https://www.mydevice.io/#tab1
+            const size15 = Math.round(size * 1.5);
+            const size2 = size * 2;
+            const size3 = size * 3;
+            const size4 = size * 4;
+            srcset = `${base}${size}, ${base}${size15} 1.5x, ${base}${size2} 2x, ${base}${size3} 3x, ${base}${size4} 4x`;
+        }
+        this.elementRef.nativeElement.src = src;
+        this.elementRef.nativeElement.srcset = srcset;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSrcDensityDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: "naturalSrcDensity" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [...declarationsToExport$1],
-                    imports: [CommonModule, MatFormFieldModule, MatInputModule, MatSelectModule],
-                    exports: [...declarationsToExport$1],
-                    providers: [sessionStorageProvider, localStorageProvider],
+                    selector: 'img[naturalSrcDensity]',
+                    standalone: true,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { naturalSrcDensity: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class NaturalDialogTriggerComponent {
     constructor(dialog, route, router) {
@@ -5839,15 +5704,16 @@ class NaturalDialogTriggerComponent {
             this.router.navigate(['.'], { relativeTo: this.route.parent });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [{ token: i1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalDialogTriggerComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [{ token: i1.MatDialog }, { token: i2$4.ActivatedRoute }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
+                    standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2$4.ActivatedRoute }, { type: i2$4.Router }]; } });
 
 const NATURAL_SEO_CONFIG = new InjectionToken('Configuration for SEO service');
 function stripTags(str) {
@@ -5972,7 +5838,7 @@ class NaturalSeoService {
         }
         return seo;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSeoService, deps: [{ token: NATURAL_SEO_CONFIG }, { token: i2$2.Router }, { token: i2$3.Title }, { token: i2$3.Meta }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSeoService, deps: [{ token: NATURAL_SEO_CONFIG }, { token: i2$4.Router }, { token: i2$5.Title }, { token: i2$5.Meta }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSeoService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSeoService, decorators: [{
@@ -5983,7 +5849,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_SEO_CONFIG]
-                }] }, { type: i2$2.Router }, { type: i2$3.Title }, { type: i2$3.Meta }]; } });
+                }] }, { type: i2$4.Router }, { type: i2$5.Title }, { type: i2$5.Meta }]; } });
+
+/**
+ * Configure and starts `NaturalSeoService`
+ */
+function provideSeo(config) {
+    return [
+        {
+            provide: NATURAL_SEO_CONFIG,
+            useValue: config,
+        },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: () => {
+                // injection required, but works without doing anything else
+                inject(NaturalSeoService);
+                return () => undefined;
+            },
+        },
+    ];
+}
 
 /*
  * Public API Surface of natural
@@ -6030,11 +5917,11 @@ class NaturalDetailHeaderComponent {
         return this.getRootLink().concat([id]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalDetailHeaderComponent, 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    <a\n        *ngIf=\"rootLabel || label\"\n        [routerLink]=\"isPanel ? [] : getRootLink()\"\n        [fragment]=\"listFragment\"\n        color=\"primary\"\n        mat-button\n        >{{ rootLabel || label }}</a\n    >\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></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: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    <a\n        *ngIf=\"rootLabel || label\"\n        [routerLink]=\"isPanel ? [] : getRootLink()\"\n        [fragment]=\"listFragment\"\n        color=\"primary\"\n        mat-button\n        >{{ rootLabel || label }}</a\n    >\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: "16.1.2", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-detail-header', template: "<div class=\"breadcrumb\">\n    <a\n        *ngIf=\"rootLabel || label\"\n        [routerLink]=\"isPanel ? [] : getRootLink()\"\n        [fragment]=\"listFragment\"\n        color=\"primary\"\n        mat-button\n        >{{ rootLabel || label }}</a\n    >\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></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', standalone: true, imports: [NgIf, MatButtonModule, RouterLink, NgFor, MatIconModule, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    <a\n        *ngIf=\"rootLabel || label\"\n        [routerLink]=\"isPanel ? [] : getRootLink()\"\n        [fragment]=\"listFragment\"\n        color=\"primary\"\n        mat-button\n        >{{ rootLabel || label }}</a\n    >\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></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: [{
@@ -6060,20 +5947,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Input
             }] } });
 
-class NaturalDetailHeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDetailHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalDetailHeaderModule, declarations: [NaturalDetailHeaderComponent], imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule, MatIconModule], exports: [NaturalDetailHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDetailHeaderModule, imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule, MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDetailHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalDetailHeaderComponent],
-                    imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule, MatIconModule],
-                    exports: [NaturalDetailHeaderComponent],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
@@ -6223,11 +6096,20 @@ class TypeSelectComponent extends NaturalAbstractController {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeSelectComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\n</form>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$5.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$5.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.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: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeSelectComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\n</form>\n" }]
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgIf,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        NgFor,
+                        MatOptionModule,
+                        MatListModule,
+                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -6486,12 +6368,12 @@ class AbstractSelect extends NaturalAbstractController {
         }
         this.internalCtrl.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AbstractSelect, deps: [{ token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AbstractSelect, deps: [{ token: i2$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: AbstractSelect, inputs: { placeholder: "placeholder", required: "required", navigateTo: "navigateTo", clearLabel: "clearLabel", showIcon: "showIcon", icon: "icon", displayWith: "displayWith", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AbstractSelect, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i3.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -6751,11 +6633,28 @@ class NaturalSelectComponent extends AbstractSelect {
         return this.variablesManager.variables.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSelectComponent, 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    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</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>\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    <!-- Meta data -->\n    <mat-icon *ngIf=\"!loading && showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <div class=\"loading-wrapper\" matIconPrefix *ngIf=\"loading\">\n        <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\"></mat-progress-spinner>\n    </div>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            (click)=\"clear()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.dirty && internalCtrl.enabled && optionRequired\"\n            (click)=\"reset()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"undo\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}: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: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</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>\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    <!-- Meta data -->\n    <mat-icon *ngIf=\"!loading && showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <div class=\"loading-wrapper\" matIconPrefix *ngIf=\"loading\">\n        <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\"></mat-progress-spinner>\n    </div>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            (click)=\"clear()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.dirty && internalCtrl.enabled && optionRequired\"\n            (click)=\"reset()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"undo\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}: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$8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: i7$1.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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select', template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</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>\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    <!-- Meta data -->\n    <mat-icon *ngIf=\"!loading && showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <div class=\"loading-wrapper\" matIconPrefix *ngIf=\"loading\">\n        <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\"></mat-progress-spinner>\n    </div>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            (click)=\"clear()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.dirty && internalCtrl.enabled && optionRequired\"\n            (click)=\"reset()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"undo\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}: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"] }]
+            args: [{ selector: 'natural-select', standalone: true, imports: [
+                        MatAutocompleteModule,
+                        NgFor,
+                        MatOptionModule,
+                        NgTemplateOutlet,
+                        NgIf,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        MatProgressSpinnerModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        RouterLink,
+                        AsyncPipe,
+                    ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</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>\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    <!-- Meta data -->\n    <mat-icon *ngIf=\"!loading && showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <div class=\"loading-wrapper\" matIconPrefix *ngIf=\"loading\">\n        <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\"></mat-progress-spinner>\n    </div>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            (click)=\"clear()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.dirty && internalCtrl.enabled && optionRequired\"\n            (click)=\"reset()\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"undo\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.pristine && internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}: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]
@@ -6798,11 +6697,20 @@ class TypeNaturalSelectComponent extends AbstractAssociationSelectComponent {
         return selectedName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeNaturalSelectComponent, 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.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: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
             type: Component,
-            args: [{ 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n" }]
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        NgFor,
+                        MatOptionModule,
+                        NgIf,
+                        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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n" }]
         }] });
 
 let InvalidWithValueStateMatcher$1 = class InvalidWithValueStateMatcher {
@@ -6845,11 +6753,11 @@ class TypeTextComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeTextComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeTextComponent, 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    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\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: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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 { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeTextComponent, decorators: [{
             type: Component,
-            args: [{ 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    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\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: [{ standalone: true, imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, NgIf], 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    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\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: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -6938,11 +6846,20 @@ class TypeNumberComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeNumberComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeNumberComponent, 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\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: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\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: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.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: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"], exportAs: ["matInput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeNumberComponent, decorators: [{
             type: Component,
-            args: [{ 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\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: [{ standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        NgFor,
+                        MatOptionModule,
+                        MatInputModule,
+                        NgIf,
+                    ], 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\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        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\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: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -7210,10 +7127,11 @@ class NaturalHierarchicSelectorService {
         return node || new HierarchicModelNode(item, configuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class FacetSelectorComponent {
@@ -7249,11 +7167,11 @@ class FacetSelectorComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: FacetSelectorComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: FacetSelectorComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"dropdown-title mat-body-2\" *ngIf=\"data.title\">{{ data.title }}</div>\n<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{padding:5px;font-variant:all-small-caps;font-size:18px;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"dropdown-title mat-body-2\" *ngIf=\"data.title\">{{ data.title }}</div>\n<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{padding:5px;font-variant:all-small-caps;font-size:18px;opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: FacetSelectorComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dropdown-title mat-body-2\" *ngIf=\"data.title\">{{ data.title }}</div>\n<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{padding:5px;font-variant:all-small-caps;font-size:18px;opacity:.7}\n"] }]
+            args: [{ standalone: true, imports: [NgIf, MatListModule, NgFor], template: "<div class=\"dropdown-title mat-body-2\" *ngIf=\"data.title\">{{ data.title }}</div>\n<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{padding:5px;font-variant:all-small-caps;font-size:18px;opacity:.7}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -7548,11 +7466,21 @@ class NaturalInputComponent {
         return selection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalInputComponent, deps: [{ token: i0.ElementRef }, { token: NaturalDropdownService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalInputComponent, 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    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\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    <mat-icon *ngIf=\"!facet && !selection\" naturalIcon=\"search\" matIconPrefix></mat-icon>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"close\"></mat-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"undo\"></mat-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\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    <mat-icon *ngIf=\"!facet && !selection\" naturalIcon=\"search\" matIconPrefix></mat-icon>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"close\"></mat-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"undo\"></mat-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-input', 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    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\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    <mat-icon *ngIf=\"!facet && !selection\" naturalIcon=\"search\" matIconPrefix></mat-icon>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"close\"></mat-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"undo\"></mat-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}\n"] }]
+            args: [{ selector: 'natural-input', standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatRippleModule,
+                        NgIf,
+                        MatInputModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        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    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\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    <mat-icon *ngIf=\"!facet && !selection\" naturalIcon=\"search\" matIconPrefix></mat-icon>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"close\"></mat-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n        <mat-icon naturalIcon=\"undo\"></mat-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NaturalDropdownService }, { type: i0.EnvironmentInjector }]; }, propDecorators: { ripple: [{
                 type: ViewChild,
                 args: [MatRipple, { static: true }]
@@ -7605,11 +7533,11 @@ class NaturalGroupComponent {
         this.selectionChange.emit(this.innerSelections);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalGroupComponent, 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: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\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></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\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></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-group', template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\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></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
+            args: [{ selector: 'natural-group', standalone: true, imports: [NgFor, NaturalInputComponent], template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\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></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
         }], propDecorators: { newValueInput: [{
                 type: ViewChild,
                 args: ['newValueInput']
@@ -7687,13 +7615,24 @@ class NaturalSearchComponent {
         this.selectionChange.emit([[]]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSearchComponent, deps: [{ token: i1$6.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSearchComponent, 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        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton\">\n                    <button\n                        (click)=\"removeGroup(i)\"\n                        *ngIf=\"innerSelections.length > 1\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Supprimer ce groupe\"\n                    >\n                        <mat-icon naturalIcon=\"remove\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton\">\n        <button\n            (click)=\"addGroup()\"\n            *ngIf=\"multipleGroups\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Ajouter un groupe\"\n        >\n            <mat-icon naturalIcon=\"add\"></mat-icon>\n        </button>\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\"></mat-icon>\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-direction:column;flex:1;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{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:15px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton\">\n                    <button\n                        (click)=\"removeGroup(i)\"\n                        *ngIf=\"innerSelections.length > 1\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Supprimer ce groupe\"\n                    >\n                        <mat-icon naturalIcon=\"remove\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton\">\n        <button\n            (click)=\"addGroup()\"\n            *ngIf=\"multipleGroups\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Ajouter un groupe\"\n        >\n            <mat-icon naturalIcon=\"add\"></mat-icon>\n        </button>\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\"></mat-icon>\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-direction:column;flex:1;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{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:15px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-search', template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton\">\n                    <button\n                        (click)=\"removeGroup(i)\"\n                        *ngIf=\"innerSelections.length > 1\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Supprimer ce groupe\"\n                    >\n                        <mat-icon naturalIcon=\"remove\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton\">\n        <button\n            (click)=\"addGroup()\"\n            *ngIf=\"multipleGroups\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Ajouter un groupe\"\n        >\n            <mat-icon naturalIcon=\"add\"></mat-icon>\n        </button>\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\"></mat-icon>\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-direction:column;flex:1;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{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:15px}.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"] }]
-        }], ctorParameters: function () { return [{ type: i1$6.BreakpointObserver }]; }, propDecorators: { placeholder: [{
-                type: Input
+            args: [{ selector: 'natural-search', standalone: true, imports: [
+                        NgClass,
+                        NgFor,
+                        NaturalGroupComponent,
+                        NgIf,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        MatDividerModule,
+                        AsyncPipe,
+                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton\">\n                    <button\n                        (click)=\"removeGroup(i)\"\n                        *ngIf=\"innerSelections.length > 1\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Supprimer ce groupe\"\n                    >\n                        <mat-icon naturalIcon=\"remove\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton\">\n        <button\n            (click)=\"addGroup()\"\n            *ngIf=\"multipleGroups\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Ajouter un groupe\"\n        >\n            <mat-icon naturalIcon=\"add\"></mat-icon>\n        </button>\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\"></mat-icon>\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-direction:column;flex:1;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{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:15px}.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"] }]
+        }], ctorParameters: function () { return [{ type: i1$6.BreakpointObserver }]; }, propDecorators: { placeholder: [{
+                type: Input
             }], facets: [{
                 type: Input
             }], multipleGroups: [{
@@ -8023,11 +7962,23 @@ class NaturalHierarchicSelectorComponent extends NaturalAbstractController {
         return model.__typename + '-' + model.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [{ token: NaturalHierarchicSelectorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalHierarchicSelectorComponent, 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], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                ></mat-progress-spinner>\n\n                <mat-icon\n                    *ngIf=\"!node.loading\"\n                    [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                ></mat-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <mat-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [naturalIcon]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></mat-icon>\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        <mat-chip-option\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <mat-icon *ngIf=\"node.config.icon\" [naturalIcon]=\"node.config.icon\"></mat-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <mat-icon matChipRemove naturalIcon=\"cancel\"></mat-icon>\n        </mat-chip-option>\n    </mat-chip-listbox>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\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: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i5$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i9.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i9.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                ></mat-progress-spinner>\n\n                <mat-icon\n                    *ngIf=\"!node.loading\"\n                    [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                ></mat-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <mat-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [naturalIcon]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></mat-icon>\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        <mat-chip-option\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <mat-icon *ngIf=\"node.config.icon\" [naturalIcon]=\"node.config.icon\"></mat-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <mat-icon matChipRemove naturalIcon=\"cancel\"></mat-icon>\n        </mat-chip-option>\n    </mat-chip-listbox>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$3.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-hierarchic-selector', providers: [NaturalHierarchicSelectorService], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                ></mat-progress-spinner>\n\n                <mat-icon\n                    *ngIf=\"!node.loading\"\n                    [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                ></mat-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <mat-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [naturalIcon]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></mat-icon>\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        <mat-chip-option\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <mat-icon *ngIf=\"node.config.icon\" [naturalIcon]=\"node.config.icon\"></mat-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <mat-icon matChipRemove naturalIcon=\"cancel\"></mat-icon>\n        </mat-chip-option>\n    </mat-chip-listbox>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\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"] }]
+            args: [{ selector: 'natural-hierarchic-selector', providers: [NaturalHierarchicSelectorService], standalone: true, imports: [
+                        NaturalSearchComponent,
+                        NgIf,
+                        MatProgressSpinnerModule,
+                        MatTreeModule,
+                        NgClass,
+                        MatButtonModule,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        NgFor,
+                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                ></mat-progress-spinner>\n\n                <mat-icon\n                    *ngIf=\"!node.loading\"\n                    [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                ></mat-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <mat-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [naturalIcon]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></mat-icon>\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        <mat-chip-option\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <mat-icon *ngIf=\"node.config.icon\" [naturalIcon]=\"node.config.icon\"></mat-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <mat-icon matChipRemove naturalIcon=\"cancel\"></mat-icon>\n        </mat-chip-option>\n    </mat-chip-listbox>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\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"] }]
         }], ctorParameters: function () { return [{ type: NaturalHierarchicSelectorService }]; }, propDecorators: { displayWith: [{
                 type: Input
             }], config: [{
@@ -8101,11 +8052,20 @@ class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent
         return selection[this.configuration.key].length ? selection : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeHierarchicSelectorComponent, 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\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    ></natural-hierarchic-selector>\n</form>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\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    ></natural-hierarchic-selector>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.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: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.1.2", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
             type: Component,
-            args: [{ 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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\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    ></natural-hierarchic-selector>\n</form>\n" }]
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        NgFor,
+                        MatOptionModule,
+                        NgIf,
+                        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\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <natural-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\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    ></natural-hierarchic-selector>\n</form>\n" }]
         }] });
 
 class InvalidWithValueStateMatcher {
@@ -8219,11 +8179,11 @@ class TypeDateRangeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeDateRangeComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$3.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeDateRangeComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error *ngIf=\"form.hasError('toGreaterThanFrom')\"\n            >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n            >< {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n            >> {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">\n            < {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">\n            > {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error *ngIf=\"form.hasError('toGreaterThanFrom')\"\n            >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n            >< {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n            >> {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">\n            < {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">\n            > {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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"], 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error *ngIf=\"form.hasError('toGreaterThanFrom')\"\n            >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n            >< {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n            >> {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">\n            < {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">\n            > {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n</form>\n" }]
+            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, NgIf], template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error *ngIf=\"form.hasError('toGreaterThanFrom')\"\n            >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n            >< {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n            >> {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">\n            < {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">\n            > {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NATURAL_DROPDOWN_DATA]
@@ -8232,456 +8192,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                     args: [MAT_DATE_FORMATS]
                 }] }]; } });
 
-class NaturalSearchModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalSearchModule, declarations: [NaturalSearchComponent,
-            NaturalGroupComponent,
-            NaturalInputComponent,
-            NaturalDropdownContainerComponent,
-            FacetSelectorComponent], imports: [CommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatInputModule,
-            MatListModule,
-            MatMenuModule,
-            MatRippleModule,
-            MatTooltipModule,
-            NaturalIconModule,
-            OverlayModule,
-            PortalModule,
-            ReactiveFormsModule], exports: [NaturalSearchComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSearchModule, providers: [
-            {
-                provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                useValue: { appearance: 'fill' },
-            },
-        ], imports: [CommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatInputModule,
-            MatListModule,
-            MatMenuModule,
-            MatRippleModule,
-            MatTooltipModule,
-            NaturalIconModule,
-            OverlayModule,
-            PortalModule,
-            ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSearchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        NaturalSearchComponent,
-                        NaturalGroupComponent,
-                        NaturalInputComponent,
-                        NaturalDropdownContainerComponent,
-                        FacetSelectorComponent,
-                    ],
-                    exports: [NaturalSearchComponent],
-                    imports: [
-                        CommonModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatListModule,
-                        MatMenuModule,
-                        MatRippleModule,
-                        MatTooltipModule,
-                        NaturalIconModule,
-                        OverlayModule,
-                        PortalModule,
-                        ReactiveFormsModule,
-                    ],
-                    providers: [
-                        {
-                            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-                            useValue: { appearance: 'fill' },
-                        },
-                    ],
-                }]
-        }] });
-
-class NaturalHierarchicSelectorDialogComponent {
-    constructor(data, dialogRef) {
-        this.dialogRef = dialogRef;
-        this.config = defaults(data, { multiple: true, allowUnselect: true });
-        this.searchSelectionsOutput = this.config.searchSelections;
-    }
-    close(selected) {
-        const result = {
-            hierarchicSelection: clone(selected),
-            searchSelections: clone(this.searchSelectionsOutput),
-        };
-        this.dialogRef.close(result);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalHierarchicSelectorDialogComponent, 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    ></natural-hierarchic-selector>\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: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
-            type: Component,
-            args: [{ 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    ></natural-hierarchic-selector>\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" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }]; } });
-
-class NaturalHierarchicSelectorDialogService {
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
-    open(hierarchicConfig, dialogConfig) {
-        const defaultDialogConfig = {
-            width: '700px',
-            data: hierarchicConfig,
+class TypeBooleanComponent extends NaturalAbstractController {
+    constructor(data, dropdownRef) {
+        super();
+        this.dropdownRef = dropdownRef;
+        this.renderedValue = new BehaviorSubject('');
+        this.operatorCtrl = new FormControl(true, { nonNullable: true });
+        this.defaults = {
+            displayWhenActive: '',
+            displayWhenInactive: '',
         };
-        return this.dialog.open(NaturalHierarchicSelectorDialogComponent, defaults(dialogConfig, defaultDialogConfig));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
-
-class NaturalHierarchicSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorModule, declarations: [NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent], imports: [CommonModule,
-            FormsModule,
-            CdkTreeModule,
-            MatCheckboxModule,
-            MatFormFieldModule,
-            MatButtonModule,
-            MatTreeModule,
-            MatIconModule,
-            MatInputModule,
-            MatProgressSpinnerModule,
-            MatDialogModule,
-            NaturalIconModule,
-            MatChipsModule,
-            NaturalSearchModule,
-            NaturalCommonModule], exports: [NaturalHierarchicSelectorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorModule, providers: [NaturalHierarchicSelectorDialogService], imports: [CommonModule,
-            FormsModule,
-            CdkTreeModule,
-            MatCheckboxModule,
-            MatFormFieldModule,
-            MatButtonModule,
-            MatTreeModule,
-            MatIconModule,
-            MatInputModule,
-            MatProgressSpinnerModule,
-            MatDialogModule,
-            NaturalIconModule,
-            MatChipsModule,
-            NaturalSearchModule,
-            NaturalCommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CdkTreeModule,
-                        MatCheckboxModule,
-                        MatFormFieldModule,
-                        MatButtonModule,
-                        MatTreeModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatProgressSpinnerModule,
-                        MatDialogModule,
-                        NaturalIconModule,
-                        MatChipsModule,
-                        NaturalSearchModule,
-                        NaturalCommonModule,
-                    ],
-                    providers: [NaturalHierarchicSelectorDialogService],
-                    exports: [NaturalHierarchicSelectorComponent],
-                }]
-        }] });
-
-/*
- * Public API Surface of natural
- */
-
-function defaultDisplayFn(item) {
-    if (!item) {
-        return '';
+        this.configuration = { ...this.defaults, ...data.configuration };
+        const updateDisplay = (value) => this.renderedValue.next(value ? this.configuration.displayWhenActive : this.configuration.displayWhenInactive);
+        if (data.condition?.equal) {
+            this.operatorCtrl.setValue(!!data.condition.equal.value);
+        }
+        // Update rendered value
+        this.operatorCtrl.valueChanges.subscribe(value => updateDisplay(value));
+        updateDisplay(this.operatorCtrl.value);
     }
-    return item.fullName || item.name || item.iban || item.id || item;
-}
-/**
- * Default usage:
- * <natural-select [config]="myConfig" [(ngModel)]="amazingModel"
- * (ngModelChange)=amazingChangeFn($event)></natural-select>
- *
- * [(ngModel)] and (ngModelChange) are optional
- *
- * Placeholder :
- * <natural-select placeholder="amazing placeholder">
- */
-class NaturalSelectHierarchicComponent extends AbstractSelect {
-    constructor(hierarchicSelectorDialogService, ngControl) {
-        super(ngControl);
-        this.hierarchicSelectorDialogService = hierarchicSelectorDialogService;
-        /**
-         * Configuration for hierarchic relations
-         *
-         * It should be an array with at least one element with `selectableAtKey` configured, otherwise the selector will never open.
-         */
-        this.config = null;
-        /**
-         * The selected value as an object. The internal value is `internalCtrl.value`, and that is a string.
-         */
-        this.value = null;
-        /**
-         * On Firefox, the combination of <input (focus)> event and dialog opening cause some strange bug where focus event is called multiple
-         * times This prevents it.
-         */
-        this.lockOpenDialog = false;
+    getCondition() {
+        if (!this.isValid()) {
+            return {};
+        }
+        return { equal: { value: this.operatorCtrl.value } };
     }
     /**
-     * Very important to return something, above all if [select]='displayedValue' attribute value is used
+     * Always valid because checked and unchecked are both valid values
      */
-    getDisplayFn() {
-        if (this.displayWith) {
-            return this.displayWith;
-        }
-        return defaultDisplayFn;
+    isValid() {
+        return true;
     }
     /**
-     * Override parent because our internalCtrl store the textual representation as string instead of raw Literal
+     * Always dirty because even on dropdown opening, the default value is accepted as intentional. There is no "default/empty" state
      */
-    writeValue(value) {
-        this.value = value;
-        this.internalCtrl.setValue(this.getDisplayFn()(this.value));
-    }
-    openDialog() {
-        if (this.internalCtrl.disabled) {
-            return;
-        }
-        if (this.lockOpenDialog) {
-            return;
-        }
-        const selectAtKey = this.getSelectKey();
-        if (!selectAtKey || !this.config) {
-            return;
-        }
-        this.lockOpenDialog = true;
-        if (this.onTouched) {
-            this.onTouched();
-        }
-        const selected = {};
-        if (this.internalCtrl.value) {
-            selected[selectAtKey] = [this.value];
-        }
-        const hierarchicConfig = {
-            hierarchicConfig: this.config,
-            hierarchicSelection: selected,
-            hierarchicFilters: this.filters,
-            multiple: false,
-        };
-        const dialogFocus = { restoreFocus: false };
-        this.hierarchicSelectorDialogService
-            .open(hierarchicConfig, dialogFocus)
-            .afterClosed()
-            .subscribe(result => {
-            this.lockOpenDialog = false;
-            if (result && result.hierarchicSelection) {
-                const selection = result.hierarchicSelection;
-                // Find the only selection amongst all possible keys
-                const keyWithSelection = Object.keys(selection).find(key => selection[key][0]);
-                const singleSelection = keyWithSelection ? selection[keyWithSelection][0] : null;
-                this.writeValue(singleSelection);
-                this.propagateValue(singleSelection);
-            }
-        });
-    }
-    showSelectButton() {
-        return !!(this.internalCtrl?.enabled && this.selectLabel && this.getSelectKey());
-    }
-    getSelectKey() {
-        return this.config?.filter(c => !!c.selectableAtKey)[0]?.selectableAtKey;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [{ token: NaturalHierarchicSelectorDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSelectHierarchicComponent, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\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    <mat-icon *ngIf=\"showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'natural-select-hierarchic', template: "<mat-form-field>\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    <mat-icon *ngIf=\"showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: NaturalHierarchicSelectorDialogService }, { type: i3.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { selectLabel: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }] } });
-
-class NaturalSelectEnumComponent extends AbstractSelect {
-    constructor(enumService, ngControl) {
-        super(ngControl);
-        this.enumService = enumService;
-        /**
-         * Whether the user should be allowed to select multiple options
-         */
-        this.multiple = false;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.items = this.enumService.get(this.enumName);
-    }
-    getDisplayFn() {
-        throw new Error('This should never be called');
+    isDirty() {
+        return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectEnumComponent, deps: [{ token: NaturalEnumService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSelectEnumComponent, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\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        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeBooleanComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-checkbox [formControl]=\"operatorCtrl\">{{ renderedValue.value }}</mat-checkbox>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeBooleanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select-enum', template: "<mat-form-field>\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        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: function () { return [{ type: NaturalEnumService }, { type: i3.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { enumName: [{
-                type: Input,
-                args: [{ required: true }]
-            }], nullLabel: [{
-                type: Input
-            }], optionDisabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }] } });
-
-class NaturalSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectModule, declarations: [NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent], imports: [CommonModule,
-            MatAutocompleteModule,
-            MatButtonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatProgressSpinnerModule,
-            MatSelectModule,
-            MatTooltipModule,
-            NaturalCommonModule,
-            NaturalIconModule,
-            ReactiveFormsModule,
-            RouterModule,
-            MatIconModule], exports: [NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectModule, imports: [CommonModule,
-            MatAutocompleteModule,
-            MatButtonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatProgressSpinnerModule,
-            MatSelectModule,
-            MatTooltipModule,
-            NaturalCommonModule,
-            NaturalIconModule,
-            ReactiveFormsModule,
-            RouterModule,
-            MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent],
-                    imports: [
-                        CommonModule,
-                        MatAutocompleteModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatProgressSpinnerModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        NaturalCommonModule,
-                        NaturalIconModule,
-                        ReactiveFormsModule,
-                        RouterModule,
-                        MatIconModule,
-                    ],
-                    exports: [NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent],
-                }]
-        }] });
-
-const components = [
-    TypeNumberComponent,
-    TypeSelectComponent,
-    TypeDateComponent,
-    TypeDateRangeComponent,
-    TypeNaturalSelectComponent,
-    TypeTextComponent,
-    TypeHierarchicSelectorComponent,
-];
-class NaturalDropdownComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDropdownComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalDropdownComponentsModule, declarations: [TypeNumberComponent,
-            TypeSelectComponent,
-            TypeDateComponent,
-            TypeDateRangeComponent,
-            TypeNaturalSelectComponent,
-            TypeTextComponent,
-            TypeHierarchicSelectorComponent], imports: [CommonModule,
-            FormsModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatButtonModule,
-            MatInputModule,
-            MatListModule,
-            MatCheckboxModule,
-            MatDatepickerModule,
-            MatSelectModule,
-            NaturalSelectModule,
-            NaturalHierarchicSelectorModule], exports: [TypeNumberComponent,
-            TypeSelectComponent,
-            TypeDateComponent,
-            TypeDateRangeComponent,
-            TypeNaturalSelectComponent,
-            TypeTextComponent,
-            TypeHierarchicSelectorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDropdownComponentsModule, imports: [CommonModule,
-            FormsModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatButtonModule,
-            MatInputModule,
-            MatListModule,
-            MatCheckboxModule,
-            MatDatepickerModule,
-            MatSelectModule,
-            NaturalSelectModule,
-            NaturalHierarchicSelectorModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDropdownComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...components],
-                    exports: [...components],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatInputModule,
-                        MatListModule,
-                        MatCheckboxModule,
-                        MatDatepickerModule,
-                        MatSelectModule,
-                        NaturalSelectModule,
-                        NaturalHierarchicSelectorModule,
-                    ],
-                }]
-        }] });
+            args: [{ standalone: true, imports: [FormsModule, ReactiveFormsModule, NgIf, NgFor, MatCheckboxModule], template: "<mat-checkbox [formControl]=\"operatorCtrl\">{{ renderedValue.value }}</mat-checkbox>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NATURAL_DROPDOWN_DATA]
+                }] }, { type: NaturalDropdownRef }]; } });
 
 /*
  * Public API Surface of natural-search dropdown components
@@ -9162,12 +8719,13 @@ class NaturalFileDropDirective extends NaturalAbstractFile {
             (this.broadcast && this.naturalFileService.filesChanged.observed));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFileDropDirective, 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 { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", 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: "16.1.2", ngImport: i0, type: NaturalFileDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not([naturalFileSelect])[naturalFileDrop]',
+                    standalone: true,
                 }]
         }], propDecorators: { fileOverClass: [{
                 type: HostBinding,
@@ -9199,19 +8757,20 @@ class NaturalFileSelectDirective extends NaturalAbstractFile {
         this.selectable = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFileSelectDirective, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: "selectable" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: "selectable" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: ':not([naturalFileDrop])[naturalFileSelect]',
+                    standalone: true,
                 }]
         }], propDecorators: { selectable: [{
                 type: Input
             }] } });
 
 // @dynamic
-class FileComponent {
+class NaturalFileComponent {
     constructor(naturalFileService, alertService, sanitizer, document) {
         this.naturalFileService = naturalFileService;
         this.alertService = alertService;
@@ -9319,13 +8878,21 @@ class FileComponent {
         reader.readAsBinaryString(file);
         return subject.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: FileComponent, deps: [{ token: NaturalFileService }, { token: NaturalAlertService }, { token: i2$3.DomSanitizer }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: FileComponent, selector: "natural-file", inputs: { height: "height", action: "action", backgroundSize: "backgroundSize", accept: "accept", uploader: "uploader", model: "model", formCtrl: "formCtrl" }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "this.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    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\"></mat-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <mat-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\"></mat-icon>\n        <mat-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" naturalIcon=\"get_app\"></mat-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}: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;flex-direction:column;position:absolute;inset:0;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{opacity:0;position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileComponent, deps: [{ token: NaturalFileService }, { token: NaturalAlertService }, { token: i2$5.DomSanitizer }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: "height", action: "action", backgroundSize: "backgroundSize", accept: "accept", uploader: "uploader", model: "model", formCtrl: "formCtrl" }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "this.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    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\"></mat-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <mat-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\"></mat-icon>\n        <mat-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" naturalIcon=\"get_app\"></mat-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}: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;flex-direction:column;position:absolute;inset:0;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{opacity:0;position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-file', 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    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\"></mat-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <mat-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\"></mat-icon>\n        <mat-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" naturalIcon=\"get_app\"></mat-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}: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;flex-direction:column;position:absolute;inset:0;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{opacity:0;position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: NaturalFileService }, { type: NaturalAlertService }, { type: i2$3.DomSanitizer }, { type: Document, decorators: [{
+            args: [{ selector: 'natural-file', standalone: true, imports: [
+                        NaturalFileDropDirective,
+                        MatRippleModule,
+                        NgIf,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        UpperCasePipe,
+                        NaturalCapitalizePipe,
+                    ], 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    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\"></mat-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <mat-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\"></mat-icon>\n        <mat-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" naturalIcon=\"get_app\"></mat-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}: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;flex-direction:column;position:absolute;inset:0;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{opacity:0;position:absolute;inset:0;display:flex;justify-content:center;align-items:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: NaturalFileService }, { type: NaturalAlertService }, { type: i2$5.DomSanitizer }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }]; }, propDecorators: { height: [{
@@ -9349,21 +8916,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Output
             }] } });
 
-const declarations$2 = [NaturalFileDropDirective, NaturalFileSelectDirective, FileComponent];
-class NaturalFileModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileModule, declarations: [NaturalFileDropDirective, NaturalFileSelectDirective, FileComponent], imports: [CommonModule, NaturalIconModule, MatRippleModule, NaturalCommonModule, MatIconModule], exports: [NaturalFileDropDirective, NaturalFileSelectDirective, FileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileModule, imports: [CommonModule, NaturalIconModule, MatRippleModule, NaturalCommonModule, MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFileModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, NaturalIconModule, MatRippleModule, NaturalCommonModule, MatIconModule],
-                    declarations: declarations$2,
-                    exports: declarations$2,
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
@@ -9375,11 +8927,11 @@ class NaturalFixedButtonComponent {
         this.disabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFixedButtonComponent, 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\"></mat-icon>\n</button>\n", styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"], dependencies: [{ kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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\"></mat-icon>\n</button>\n", styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: "16.1.2", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-fixed-button', template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n    <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n</button>\n", styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"] }]
+            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\"></mat-icon>\n</button>\n", styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9391,20 +8943,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Input
             }] } });
 
-class NaturalFixedButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonModule, declarations: [NaturalFixedButtonComponent], imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, NaturalIconModule], exports: [NaturalFixedButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonModule, imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, NaturalIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalFixedButtonComponent],
-                    imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, NaturalIconModule],
-                    exports: [NaturalFixedButtonComponent],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
@@ -9437,13 +8975,13 @@ class NaturalFixedButtonDetailComponent {
             this.delete.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [{ token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\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></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [{ token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\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></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-fixed-button-detail', template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\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></natural-fixed-button>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$2.ActivatedRoute }]; }, propDecorators: { model: [{
+            args: [{ selector: 'natural-fixed-button-detail', standalone: true, imports: [NgIf, NaturalFixedButtonComponent, MatTooltipModule], template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\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></natural-fixed-button>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$4.ActivatedRoute }]; }, propDecorators: { model: [{
                 type: Input,
                 args: [{ required: true }]
             }], form: [{
@@ -9455,28 +8993,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Output
             }] } });
 
-class NaturalFixedButtonDetailModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailModule, declarations: [NaturalFixedButtonDetailComponent], imports: [CommonModule, NaturalFixedButtonModule, MatTooltipModule], exports: [NaturalFixedButtonDetailComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailModule, imports: [CommonModule, NaturalFixedButtonModule, MatTooltipModule] }); }
+/*
+ * Public API Surface of natural
+ */
+
+class NaturalHierarchicSelectorDialogComponent {
+    constructor(data, dialogRef) {
+        this.dialogRef = dialogRef;
+        this.config = defaults(data, { multiple: true, allowUnselect: true });
+        this.searchSelectionsOutput = this.config.searchSelections;
+    }
+    close(selected) {
+        const result = {
+            hierarchicSelection: clone(selected),
+            searchSelections: clone(this.searchSelectionsOutput),
+        };
+        this.dialogRef.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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    ></natural-hierarchic-selector>\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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalFixedButtonDetailComponent],
-                    imports: [CommonModule, NaturalFixedButtonModule, MatTooltipModule],
-                    exports: [NaturalFixedButtonDetailComponent],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", 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    ></natural-hierarchic-selector>\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" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+
+class NaturalHierarchicSelectorDialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    open(hierarchicConfig, dialogConfig) {
+        const defaultDialogConfig = {
+            width: '700px',
+            data: hierarchicConfig,
+        };
+        return this.dialog.open(NaturalHierarchicSelectorDialogComponent, defaults(dialogConfig, defaultDialogConfig));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
 
 /*
  * Public API Surface of natural
  */
 
+/**
+ * Configure Material Symbols, instead of Material Icons, and configure custom Natural icons
+ */
+function provideIcons(config) {
+    return [
+        {
+            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
+                    // This means that `https://fonts.googleapis.com/icon?family=Material+Icons` must be
+                    // replaced by `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1`
+                    const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
+                    const outlinedFontSetClasses = defaultFontSetClasses
+                        .filter(fontSetClass => fontSetClass !== 'material-icons')
+                        .concat(['material-symbols-outlined']);
+                    iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
+                };
+            },
+        },
+    ];
+}
+
 /*
  * Public API Surface of natural
  */
 
+const PanelsHooksConfig = new InjectionToken('NaturalPanelsHooksConfig');
+
+function providePanels(hooks) {
+    return [
+        {
+            provide: PanelsHooksConfig,
+            useValue: hooks,
+        },
+    ];
+}
+
 function getConsumedSegments(segments, routes) {
     return flatten(getStackConfig(segments, routes).map(conf => conf.route.segments));
 }
@@ -9551,8 +9162,6 @@ const naturalPanelsUrlMatcher = (segments, group, route) => {
     return null;
 };
 
-const PanelsHooksConfig = new InjectionToken('NaturalPanelsHooksConfig');
-
 function segmentsToString(segments) {
     return segments.map(s => s.toString()).join('/');
 }
@@ -9857,7 +9466,7 @@ class NaturalPanelsService {
             dialog.updatePosition(position);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsService, deps: [{ token: i2$2.Router }, { token: i1.MatDialog }, { token: i0.Injector }, { token: PanelsHooksConfig }, { token: i3$1.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsService, deps: [{ token: i2$4.Router }, { token: i1.MatDialog }, { token: i0.Injector }, { token: PanelsHooksConfig }, { token: i3$4.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsService, decorators: [{
@@ -9865,58 +9474,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i1.MatDialog }, { type: i0.Injector }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$4.Router }, { type: i1.MatDialog }, { type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PanelsHooksConfig]
-                }] }, { type: i3$1.MediaObserver }]; } });
+                }] }, { type: i3$4.MediaObserver }]; } });
 
 class NaturalPanelsComponent {
     // PanelsComponent is kind of a "ghost" component to respond to an url matcher in route config,
     // An UrlMatcher (matcher attribute) is required to catch urls with an undefined number of params in url after a given param /panels/
     constructor(panelsService, route) {
         this.panelsService = panelsService;
-        this.route = route;
         this.panelsService.start(route);
     }
     ngOnDestroy() {
         this.panelsService.stop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsComponent, deps: [{ token: NaturalPanelsService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalPanelsComponent, selector: "natural-panels", ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsComponent, deps: [{ token: NaturalPanelsService }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'natural-panels',
                     template: '',
+                    standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: NaturalPanelsService }, { type: i2$2.ActivatedRoute }]; } });
-
-const declarations$1 = [NaturalPanelsComponent];
-class NaturalPanelsModule {
-    static forRoot(hooks) {
-        return {
-            ngModule: NaturalPanelsModule,
-            providers: [
-                {
-                    provide: PanelsHooksConfig,
-                    useValue: hooks,
-                },
-            ],
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsModule, declarations: [NaturalPanelsComponent], imports: [CommonModule, RouterModule, MatDialogModule], exports: [NaturalPanelsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsModule, imports: [CommonModule, RouterModule, MatDialogModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalPanelsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: declarations$1,
-                    imports: [CommonModule, RouterModule, MatDialogModule],
-                    exports: declarations$1,
-                }]
-        }] });
+        }], ctorParameters: function () { return [{ type: NaturalPanelsService }, { type: i2$4.ActivatedRoute }]; } });
 
 /**
  * Url fallback matcher to be used instead of `path: '**'` when Panel system
@@ -10041,140 +9624,280 @@ class NaturalRelationsComponent extends NaturalAbstractController {
         if (this.displayWith) {
             return this.displayWith;
         }
-        return (item) => (item ? item.fullName || item.name : '');
+        return (item) => (item ? item.fullName || item.name : '');
+    }
+    openNaturalHierarchicSelector() {
+        const selectAtKey = this.getSelectKey();
+        if (!selectAtKey || !this.hierarchicSelectorConfig) {
+            return;
+        }
+        const selected = {};
+        const hierarchicConfig = {
+            hierarchicConfig: this.hierarchicSelectorConfig,
+            hierarchicSelection: selected,
+            hierarchicFilters: this.hierarchicSelectorFilters,
+            multiple: true,
+        };
+        this.hierarchicSelectorDialog
+            .open(hierarchicConfig)
+            .afterClosed()
+            .subscribe(result => {
+            if (result && result.hierarchicSelection !== undefined) {
+                const selection = result.hierarchicSelection[selectAtKey];
+                if (selection.length) {
+                    this.addRelations(selection);
+                }
+            }
+        });
+    }
+    /**
+     * Get list from database
+     */
+    queryItems() {
+        if (!this.service) {
+            return;
+        }
+        this.loading = true;
+        const queryRef = this.service.watchAll(this.variablesManager).pipe(takeUntil(this.ngUnsubscribe), tap$1({
+            next: () => (this.loading = false),
+            complete: () => (this.loading = false),
+            error: () => (this.loading = false),
+        }));
+        this.dataSource = new NaturalDataSource(queryRef);
+    }
+    getSelectKey() {
+        if (!this.hierarchicSelectorConfig) {
+            return;
+        }
+        return this.hierarchicSelectorConfig.filter(c => !!c.selectableAtKey)[0].selectableAtKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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 }], usesInheritance: 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 *ngIf=\"dataSource\" [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                ></ng-template>\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                <button\n                    *ngIf=\"!disabled\"\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\"></mat-icon>\n                </button>\n            </td>\n        </ng-container>\n    </table>\n\n    <mat-paginator\n        (page)=\"pagination($event)\"\n        *ngIf=\"dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)\"\n        [length]=\"dataSource?.data?.length || 0\"\n        [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [pageSize]=\"dataSource?.data?.pageSize || 0\"\n    ></mat-paginator>\n\n    <div *ngIf=\"!loading && dataSource?.data?.length === 0\" class=\"margin-v mat-body\">\n        <span i18n>Aucun r\u00E9sultat</span>\n    </div>\n\n    <mat-progress-spinner *ngIf=\"loading\" [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n</div>\n\n<natural-select\n    (selectionChange)=\"addRelations([$event])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"$any(getDisplayFn())\"\n    [filter]=\"autocompleteSelectorFilter\"\n    [placeholder]=\"placeholder\"\n    [service]=\"service\"\n    [showIcon]=\"false\"\n></natural-select>\n\n<div *ngIf=\"hierarchicSelectorConfig && !disabled\">\n    <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: i7$3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7$1.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'natural-relations', standalone: true, imports: [
+                        NgIf,
+                        MatTableModule,
+                        NgTemplateOutlet,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        MatPaginatorModule,
+                        MatProgressSpinnerModule,
+                        NaturalSelectComponent,
+                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table *ngIf=\"dataSource\" [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                ></ng-template>\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                <button\n                    *ngIf=\"!disabled\"\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\"></mat-icon>\n                </button>\n            </td>\n        </ng-container>\n    </table>\n\n    <mat-paginator\n        (page)=\"pagination($event)\"\n        *ngIf=\"dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)\"\n        [length]=\"dataSource?.data?.length || 0\"\n        [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [pageSize]=\"dataSource?.data?.pageSize || 0\"\n    ></mat-paginator>\n\n    <div *ngIf=\"!loading && dataSource?.data?.length === 0\" class=\"margin-v mat-body\">\n        <span i18n>Aucun r\u00E9sultat</span>\n    </div>\n\n    <mat-progress-spinner *ngIf=\"loading\" [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n</div>\n\n<natural-select\n    (selectionChange)=\"addRelations([$event])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"$any(getDisplayFn())\"\n    [filter]=\"autocompleteSelectorFilter\"\n    [placeholder]=\"placeholder\"\n    [service]=\"service\"\n    [showIcon]=\"false\"\n></natural-select>\n\n<div *ngIf=\"hierarchicSelectorConfig && !disabled\">\n    <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n</div>\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"] }]
+        }], ctorParameters: function () { return [{ type: NaturalLinkMutationService }, { type: NaturalHierarchicSelectorDialogService }]; }, propDecorators: { select: [{
+                type: ViewChild,
+                args: [NaturalSelectComponent]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], service: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocompleteSelectorFilter: [{
+                type: Input
+            }], displayWith: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], main: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selectionChange: [{
+                type: Output
+            }], hierarchicSelectorFilters: [{
+                type: Input
+            }], hierarchicSelectorConfig: [{
+                type: Input
+            }], otherName: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of natural
+ */
+
+class NaturalSelectEnumComponent extends AbstractSelect {
+    constructor(enumService, ngControl) {
+        super(ngControl);
+        this.enumService = enumService;
+        /**
+         * Whether the user should be allowed to select multiple options
+         */
+        this.multiple = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.items = this.enumService.get(this.enumName);
+    }
+    getDisplayFn() {
+        throw new Error('This should never be called');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectEnumComponent, deps: [{ token: NaturalEnumService }, { token: i2$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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>\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        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'natural-select-enum', standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgIf,
+                        MatOptionModule,
+                        NgFor,
+                        AsyncPipe,
+                        NaturalCapitalizePipe,
+                    ], template: "<mat-form-field>\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        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: NaturalEnumService }, { type: i2$3.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { enumName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], nullLabel: [{
+                type: Input
+            }], optionDisabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }] } });
+
+function defaultDisplayFn(item) {
+    if (!item) {
+        return '';
+    }
+    return item.fullName || item.name || item.iban || item.id || item;
+}
+/**
+ * Default usage:
+ * <natural-select [config]="myConfig" [(ngModel)]="amazingModel"
+ * (ngModelChange)=amazingChangeFn($event)></natural-select>
+ *
+ * [(ngModel)] and (ngModelChange) are optional
+ *
+ * Placeholder :
+ * <natural-select placeholder="amazing placeholder">
+ */
+class NaturalSelectHierarchicComponent extends AbstractSelect {
+    constructor(hierarchicSelectorDialogService, ngControl) {
+        super(ngControl);
+        this.hierarchicSelectorDialogService = hierarchicSelectorDialogService;
+        /**
+         * Configuration for hierarchic relations
+         *
+         * It should be an array with at least one element with `selectableAtKey` configured, otherwise the selector will never open.
+         */
+        this.config = null;
+        /**
+         * The selected value as an object. The internal value is `internalCtrl.value`, and that is a string.
+         */
+        this.value = null;
+        /**
+         * On Firefox, the combination of <input (focus)> event and dialog opening cause some strange bug where focus event is called multiple
+         * times This prevents it.
+         */
+        this.lockOpenDialog = false;
+    }
+    /**
+     * Very important to return something, above all if [select]='displayedValue' attribute value is used
+     */
+    getDisplayFn() {
+        if (this.displayWith) {
+            return this.displayWith;
+        }
+        return defaultDisplayFn;
     }
-    openNaturalHierarchicSelector() {
+    /**
+     * Override parent because our internalCtrl store the textual representation as string instead of raw Literal
+     */
+    writeValue(value) {
+        this.value = value;
+        this.internalCtrl.setValue(this.getDisplayFn()(this.value));
+    }
+    openDialog() {
+        if (this.internalCtrl.disabled) {
+            return;
+        }
+        if (this.lockOpenDialog) {
+            return;
+        }
         const selectAtKey = this.getSelectKey();
-        if (!selectAtKey || !this.hierarchicSelectorConfig) {
+        if (!selectAtKey || !this.config) {
             return;
         }
+        this.lockOpenDialog = true;
+        if (this.onTouched) {
+            this.onTouched();
+        }
         const selected = {};
+        if (this.internalCtrl.value) {
+            selected[selectAtKey] = [this.value];
+        }
         const hierarchicConfig = {
-            hierarchicConfig: this.hierarchicSelectorConfig,
+            hierarchicConfig: this.config,
             hierarchicSelection: selected,
-            hierarchicFilters: this.hierarchicSelectorFilters,
-            multiple: true,
+            hierarchicFilters: this.filters,
+            multiple: false,
         };
-        this.hierarchicSelectorDialog
-            .open(hierarchicConfig)
+        const dialogFocus = { restoreFocus: false };
+        this.hierarchicSelectorDialogService
+            .open(hierarchicConfig, dialogFocus)
             .afterClosed()
             .subscribe(result => {
-            if (result && result.hierarchicSelection !== undefined) {
-                const selection = result.hierarchicSelection[selectAtKey];
-                if (selection.length) {
-                    this.addRelations(selection);
-                }
+            this.lockOpenDialog = false;
+            if (result && result.hierarchicSelection) {
+                const selection = result.hierarchicSelection;
+                // Find the only selection amongst all possible keys
+                const keyWithSelection = Object.keys(selection).find(key => selection[key][0]);
+                const singleSelection = keyWithSelection ? selection[keyWithSelection][0] : null;
+                this.writeValue(singleSelection);
+                this.propagateValue(singleSelection);
             }
         });
     }
-    /**
-     * Get list from database
-     */
-    queryItems() {
-        if (!this.service) {
-            return;
-        }
-        this.loading = true;
-        const queryRef = this.service.watchAll(this.variablesManager).pipe(takeUntil(this.ngUnsubscribe), tap$1({
-            next: () => (this.loading = false),
-            complete: () => (this.loading = false),
-            error: () => (this.loading = false),
-        }));
-        this.dataSource = new NaturalDataSource(queryRef);
+    showSelectButton() {
+        return !!(this.internalCtrl?.enabled && this.selectLabel && this.getSelectKey());
     }
     getSelectKey() {
-        if (!this.hierarchicSelectorConfig) {
-            return;
-        }
-        return this.hierarchicSelectorConfig.filter(c => !!c.selectableAtKey)[0].selectableAtKey;
+        return this.config?.filter(c => !!c.selectableAtKey)[0]?.selectableAtKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalRelationsComponent, 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 }], usesInheritance: 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 *ngIf=\"dataSource\" [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                ></ng-template>\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                <button\n                    *ngIf=\"!disabled\"\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\"></mat-icon>\n                </button>\n            </td>\n        </ng-container>\n    </table>\n\n    <mat-paginator\n        (page)=\"pagination($event)\"\n        *ngIf=\"dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)\"\n        [length]=\"dataSource?.data?.length || 0\"\n        [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [pageSize]=\"dataSource?.data?.pageSize || 0\"\n    ></mat-paginator>\n\n    <div *ngIf=\"!loading && dataSource?.data?.length === 0\" class=\"margin-v mat-body\">\n        <span i18n>Aucun r\u00E9sultat</span>\n    </div>\n\n    <mat-progress-spinner *ngIf=\"loading\" [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n</div>\n\n<natural-select\n    (selectionChange)=\"addRelations([$event])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"$any(getDisplayFn())\"\n    [filter]=\"autocompleteSelectorFilter\"\n    [placeholder]=\"placeholder\"\n    [service]=\"service\"\n    [showIcon]=\"false\"\n></natural-select>\n\n<div *ngIf=\"hierarchicSelectorConfig && !disabled\">\n    <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i7$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }, { kind: "component", type: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [{ token: NaturalHierarchicSelectorDialogService }, { token: i2$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\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    <mat-icon *ngIf=\"showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}: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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-relations', template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table *ngIf=\"dataSource\" [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                ></ng-template>\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                <button\n                    *ngIf=\"!disabled\"\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\"></mat-icon>\n                </button>\n            </td>\n        </ng-container>\n    </table>\n\n    <mat-paginator\n        (page)=\"pagination($event)\"\n        *ngIf=\"dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)\"\n        [length]=\"dataSource?.data?.length || 0\"\n        [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [pageSize]=\"dataSource?.data?.pageSize || 0\"\n    ></mat-paginator>\n\n    <div *ngIf=\"!loading && dataSource?.data?.length === 0\" class=\"margin-v mat-body\">\n        <span i18n>Aucun r\u00E9sultat</span>\n    </div>\n\n    <mat-progress-spinner *ngIf=\"loading\" [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n</div>\n\n<natural-select\n    (selectionChange)=\"addRelations([$event])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"$any(getDisplayFn())\"\n    [filter]=\"autocompleteSelectorFilter\"\n    [placeholder]=\"placeholder\"\n    [service]=\"service\"\n    [showIcon]=\"false\"\n></natural-select>\n\n<div *ngIf=\"hierarchicSelectorConfig && !disabled\">\n    <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n</div>\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"] }]
-        }], ctorParameters: function () { return [{ type: NaturalLinkMutationService }, { type: NaturalHierarchicSelectorDialogService }]; }, propDecorators: { select: [{
-                type: ViewChild,
-                args: [NaturalSelectComponent]
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], service: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], autocompleteSelectorFilter: [{
-                type: Input
-            }], displayWith: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], main: [{
-                type: Input,
-                args: [{ required: true }]
-            }], selectionChange: [{
-                type: Output
-            }], hierarchicSelectorFilters: [{
-                type: Input
-            }], hierarchicSelectorConfig: [{
+            args: [{ selector: 'natural-select-hierarchic', standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgIf,
+                        MatIconModule,
+                        NaturalIconDirective,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        RouterLink,
+                    ], template: "<mat-form-field>\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    <mat-icon *ngIf=\"showIcon\" [naturalIcon]=\"icon\" matIconPrefix></mat-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matIconSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <mat-icon naturalIcon=\"close\"></mat-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\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\"></mat-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\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<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: NaturalHierarchicSelectorDialogService }, { type: i2$3.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { selectLabel: [{
                 type: Input
-            }], otherName: [{
+            }], config: [{
                 type: Input
-            }], filter: [{
+            }], filters: [{
                 type: Input
             }] } });
 
-class NaturalRelationsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsModule, declarations: [NaturalRelationsComponent], imports: [CommonModule,
-            MatInputModule,
-            MatButtonModule,
-            MatProgressSpinnerModule,
-            NaturalIconModule,
-            MatTableModule,
-            NaturalSelectModule,
-            NaturalHierarchicSelectorModule,
-            MatPaginatorModule,
-            MatTooltipModule,
-            MatIconModule], exports: [NaturalRelationsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsModule, imports: [CommonModule,
-            MatInputModule,
-            MatButtonModule,
-            MatProgressSpinnerModule,
-            NaturalIconModule,
-            MatTableModule,
-            NaturalSelectModule,
-            NaturalHierarchicSelectorModule,
-            MatPaginatorModule,
-            MatTooltipModule,
-            MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalRelationsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalRelationsComponent],
-                    imports: [
-                        CommonModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MatProgressSpinnerModule,
-                        NaturalIconModule,
-                        MatTableModule,
-                        NaturalSelectModule,
-                        NaturalHierarchicSelectorModule,
-                        MatPaginatorModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                    ],
-                    exports: [NaturalRelationsComponent],
-                }]
-        }] });
-
-/*
- * Public API Surface of natural
- */
-
 /*
  * Public API Surface of natural
  */
@@ -10403,17 +10126,30 @@ class NaturalSidenavService extends NaturalAbstractController {
             this.sessionStorage.setItem(this.openedStorageKeyWithName, this.opened ? 'true' : 'false');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavService, deps: [{ token: i3$1.MediaObserver }, { token: i2$2.Router }, { token: SESSION_STORAGE }, { token: NaturalSidenavStackService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavService, deps: [{ token: i3$4.MediaObserver }, { token: i2$4.Router }, { token: SESSION_STORAGE }, { token: NaturalSidenavStackService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i3$1.MediaObserver }, { type: i2$2.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i3$4.MediaObserver }, { type: i2$4.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SESSION_STORAGE]
                 }] }, { type: NaturalSidenavStackService }]; } });
 
+class NaturalSidenavComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'natural-sidenav',
+                    template: '<ng-content></ng-content>',
+                    standalone: true,
+                }]
+        }] });
+
 class NaturalSidenavContainerComponent {
     constructor(sidenavService) {
         this.sidenavService = sidenavService;
@@ -10467,11 +10203,11 @@ class NaturalSidenavContainerComponent {
         this.sidenavService.toggleMinimized();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSidenavContainerComponent, 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: "menuContainer", first: true, predicate: MatSidenavContainer, descendants: true, static: true }, { 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\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-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-direction:column;flex:1}: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: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$2.MatSidenavContent, selector: "mat-sidenav-content" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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: "menuContainer", first: true, predicate: MatSidenavContainer, descendants: true, static: true }, { 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\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-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-direction:column;flex:1}: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: i2$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], 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\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-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-direction:column;flex:1}: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], standalone: true, imports: [MatSidenavModule, NgClass], 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\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-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-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: NaturalSidenavService }]; }, propDecorators: { name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10496,38 +10232,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
 
 class NaturalSidenavContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSidenavContentComponent, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-sidenav-content', template: '<ng-content></ng-content>', styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"] }]
-        }] });
-
-class NaturalSidenavComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalSidenavComponent, selector: "natural-sidenav", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'natural-sidenav',
-                    template: '<ng-content></ng-content>',
-                }]
-        }] });
-
-class NaturalSidenavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavModule, declarations: [NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent], imports: [CommonModule, MatSidenavModule, MatIconModule, MatButtonModule], exports: [NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavModule, providers: [sessionStorageProvider], imports: [CommonModule, MatSidenavModule, MatIconModule, MatButtonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalSidenavModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent],
-                    imports: [CommonModule, MatSidenavModule, MatIconModule, MatButtonModule],
-                    exports: [NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent],
-                    providers: [sessionStorageProvider],
-                }]
+            args: [{ selector: 'natural-sidenav-content', template: '<ng-content></ng-content>', standalone: true, styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"] }]
         }] });
 
 /*
@@ -10542,31 +10251,16 @@ class NaturalStampComponent {
         return !same && (!!this.item.updateDate || !!this.item.updater);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalStampComponent, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NaturalSwissDatePipe, name: "swissDate" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NaturalSwissDatePipe, name: "swissDate" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalStampComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-stamp', template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n" }]
+            args: [{ selector: 'natural-stamp', standalone: true, imports: [NgIf, NaturalSwissDatePipe, NaturalTimeAgoPipe], template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n" }]
         }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
-const declarationsToExport = [NaturalStampComponent];
-class NaturalStampModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalStampModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalStampModule, declarations: [NaturalStampComponent], imports: [CommonModule, NaturalCommonModule], exports: [NaturalStampComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalStampModule, imports: [CommonModule, NaturalCommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalStampModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...declarationsToExport],
-                    imports: [CommonModule, NaturalCommonModule],
-                    exports: [...declarationsToExport],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
@@ -10607,11 +10301,11 @@ class NaturalTableButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalTableButtonComponent, 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<span *ngIf=\"type === 'none'\">\n    <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        [disabled]=\"disabled\"\n        mat-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-raised-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;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{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{padding:0 8px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", 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<span *ngIf=\"type === 'none'\">\n    <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        [disabled]=\"disabled\"\n        mat-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-raised-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;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{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{padding:0 8px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, 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<span *ngIf=\"type === 'none'\">\n    <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        [disabled]=\"disabled\"\n        mat-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-raised-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;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{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{padding:0 8px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}\n"] }]
+            args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIf, 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<span *ngIf=\"type === 'none'\">\n    <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        [disabled]=\"disabled\"\n        mat-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\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        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n    <!-- Click with label... -->\n    <a\n        *ngIf=\"type === 'click' && label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-raised-button\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a\n        *ngIf=\"type === 'href' && label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        [disabled]=\"disabled\"\n        mat-icon-button\n        class=\"mat-elevation-z4\"\n        target=\"_blank\"\n    >\n        <mat-icon *ngIf=\"icon\" [naturalIcon]=\"icon\"></mat-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;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{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{padding:0 8px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}\n"] }]
         }], propDecorators: { queryParams: [{
                 type: Input
             }], queryParamsHandling: [{
@@ -10638,38 +10332,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Output
             }] } });
 
-class NaturalTableButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTableButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalTableButtonModule, declarations: [NaturalTableButtonComponent], imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule, MatIconModule], exports: [NaturalTableButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTableButtonModule, imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule, MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalTableButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalTableButtonComponent],
-                    imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule, MatIconModule],
-                    exports: [NaturalTableButtonComponent],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
 
-class NaturalDialogTriggerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerModule, declarations: [NaturalDialogTriggerComponent], imports: [CommonModule, MatDialogModule], exports: [NaturalDialogTriggerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerModule, imports: [CommonModule, MatDialogModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalDialogTriggerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalDialogTriggerComponent],
-                    imports: [CommonModule, MatDialogModule],
-                    exports: [NaturalDialogTriggerComponent],
-                }]
-        }] });
-
 /*
  * Public API Surface of natural
  */
@@ -11029,7 +10695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
 /**
  * Show an avatar from different sources
  */
-class AvatarComponent {
+class NaturalAvatarComponent {
     constructor(avatarService) {
         this.avatarService = avatarService;
         this.size = 50;
@@ -11144,8 +10810,8 @@ class AvatarComponent {
             height: this.size + 'px',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AvatarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: AvatarComponent, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, usesOnChanges: true, ngImport: i0, template: `
         <div class="avatar-container" [ngStyle]="hostStyle">
             <img
                 *ngIf="avatarSrc"
@@ -11161,9 +10827,9 @@ class AvatarComponent {
                 {{ avatarText }}
             </div>
         </div>
-    `, isInline: true, styles: [":host{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    `, isInline: true, styles: [":host{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-avatar', template: `
         <div class="avatar-container" [ngStyle]="hostStyle">
@@ -11181,7 +10847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 {{ avatarText }}
             </div>
         </div>
-    `, styles: [":host{border-radius:50%}\n"] }]
+    `, standalone: true, imports: [NgStyle, NgIf], styles: [":host{border-radius:50%}\n"] }]
         }], ctorParameters: function () { return [{ type: AvatarService }]; }, propDecorators: { image: [{
                 type: Input
             }], initials: [{
@@ -11202,35 +10868,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: Input
             }] } });
 
-const declarations = [AvatarComponent];
-class NaturalAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarModule, declarations: [AvatarComponent], imports: [CommonModule], exports: [AvatarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAvatarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: declarations,
-                    exports: declarations,
-                }]
-        }] });
-
 /*
  * Public API Surface of ngx-avatar
  */
 
-class NaturalMatomoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoModule, decorators: [{
-            type: NgModule,
-            args: [{}]
-        }] });
-
 /**
  * Service to track visitors via Matomo.
  *
@@ -11314,7 +10955,7 @@ class NaturalMatomoService {
             this.referrerUrl = currentUrl;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoService, deps: [{ token: i2$2.Router }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i2$3.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoService, deps: [{ token: i2$4.Router }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i2$5.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalMatomoService, decorators: [{
@@ -11322,13 +10963,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: Document, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$4.Router }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i2$3.Title }]; } });
+                }] }, { type: i2$5.Title }]; } });
 
 /*
  * Public API Surface of natural
@@ -11339,10 +10980,10 @@ const NaturalLoggerConfigExtra = new InjectionToken('Class that may provide extr
 /**
  * Replace Angular's error handler to also send the log to a remote server via HTTP POST.
  *
- * Usage is automatic as soon we import the module via:
+ * Usage is automatic as soon as we provide it via:
  *
  * ```ts
- * NaturalErrorModule.forRoot('http://example.com', ExtraService),
+ * provideErrorHandler('http://example.com', ExtraService),
  * ```
  */
 class NaturalErrorHandler extends ErrorHandler {
@@ -11406,7 +11047,7 @@ class NaturalErrorHandler extends ErrorHandler {
                 .subscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorHandler, deps: [{ token: i1$8.HttpClient }, { token: DOCUMENT }, { token: NaturalLoggerConfigUrl, optional: true }, { token: NaturalLoggerConfigExtra, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorHandler, deps: [{ token: i1$9.HttpClient }, { token: DOCUMENT }, { token: NaturalLoggerConfigUrl, optional: true }, { token: NaturalLoggerConfigExtra, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorHandler, decorators: [{
@@ -11414,7 +11055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$8.HttpClient }, { type: Document, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$9.HttpClient }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
@@ -11429,41 +11070,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                     args: [NaturalLoggerConfigExtra]
                 }] }]; } });
 
-class NaturalErrorModule {
-    static forRoot(url, extraService) {
-        const providers = [];
-        providers.push({
+function provideErrorHandler(url, extraService) {
+    const providers = [
+        {
             provide: ErrorHandler,
             useClass: NaturalErrorHandler,
-        }, {
+        },
+        {
             provide: NaturalLoggerConfigUrl,
             useValue: url,
+        },
+    ];
+    if (extraService) {
+        providers.push({
+            provide: NaturalLoggerConfigExtra,
+            useClass: extraService,
         });
-        if (extraService) {
-            providers.push({
-                provide: NaturalLoggerConfigExtra,
-                useClass: extraService,
-            });
+    }
+    return providers;
+}
+
+/*
+ * Public API Surface of natural
+ */
+
+/**
+ * Need to add  http:// prefix if we don't have prefix already AND we don't have part of it
+ */
+function ensureHttpPrefix(value) {
+    if (!value) {
+        return value;
+    }
+    const completePrefix = /^(https?):\/\//i.test(value);
+    const startingPrefix = 'https://'.indexOf(value) === 0 || 'http://'.indexOf(value) === 0;
+    if (!completePrefix && !startingPrefix) {
+        return 'http://' + value;
+    }
+    else {
+        return value;
+    }
+}
+/**
+ * This directive only supports ReactiveForms due to ngModel/ngControl encapsulation and changes emissions.
+ */
+class NaturalHttpPrefixDirective extends NaturalAbstractController {
+    constructor() {
+        super();
+        this.naturalHttpPrefix = null;
+    }
+    httpize($event) {
+        if (this.naturalHttpPrefix) {
+            const newValue = ensureHttpPrefix($event) || $event;
+            if ($event !== newValue) {
+                this.naturalHttpPrefix.setValue(newValue);
+            }
         }
-        return {
-            ngModule: NaturalErrorModule,
-            providers: providers,
-        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorModule, imports: [HttpClientModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorModule, imports: [HttpClientModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: "naturalHttpPrefix" }, host: { listeners: { "ngModelChange": "httpize($event)" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalErrorModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [HttpClientModule],
+                    selector: '[naturalHttpPrefix]',
+                    standalone: true,
                 }]
-        }] });
+        }], ctorParameters: function () { return []; }, propDecorators: { naturalHttpPrefix: [{
+                type: Input
+            }], httpize: [{
+                type: HostListener,
+                args: ['ngModelChange', ['$event']]
+            }] } });
 
-/*
- * Public API Surface of natural
+/**
+ * Minimal, global providers for Natural to work
  */
+const naturalProviders = [
+    importProvidersFrom([MatDialogModule, MatSnackBarModule]),
+    sessionStorageProvider,
+    localStorageProvider,
+];
 
 // Load `$localize` onto the global scope - to be able to use that function to translate strings in components/services.
 
@@ -11471,5 +11157,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarService, FileComponent, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractController, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertModule, NaturalAlertService, NaturalAvatarModule, NaturalCapitalizePipe, NaturalColumnsPickerComponent, NaturalColumnsPickerModule, NaturalCommonModule, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDetailHeaderModule, NaturalDialogTriggerComponent, NaturalDialogTriggerModule, NaturalDropdownComponentsModule, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorModule, NaturalFileDropDirective, NaturalFileModule, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalFixedButtonDetailModule, NaturalFixedButtonModule, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorModule, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalIconModule, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoModule, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsModule, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalRelationsModule, NaturalSearchComponent, NaturalSearchModule, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSelectModule, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavModule, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalStampModule, NaturalSwissDatePipe, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTableButtonModule, NaturalTimeAgoPipe, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeSelectComponent, TypeTextComponent, available, cancellableTimeout, cleanSameValues, collectErrors, copyToClipboard, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, hasFilesAndProcessDate, ifValid, integer, isMutation, localStorageFactory, localStorageProvider, lowerCaseFirstLetter, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, wrapLike };
+export { AvatarService, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractController, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, 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, NaturalSwissDatePipe, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTimeAgoPipe, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeSelectComponent, TypeTextComponent, available, cancellableTimeout, cleanSameValues, collectErrors, copyToClipboard, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, hasFilesAndProcessDate, ifValid, integer, isMutation, localStorageFactory, localStorageProvider, lowerCaseFirstLetter, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, provideErrorHandler, provideIcons, providePanels, provideSeo, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, wrapLike };
 //# sourceMappingURL=ecodev-natural.mjs.map