@ecodev/natural 61.0.1 → 61.0.2

package/fesm2022/ecodev-natural.mjs

@@ -72,11 +72,9 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { HmacSHA256 } from 'crypto-es/lib/sha256';
 
 class NaturalConfirmComponent {
-    constructor() {
-        this.data = inject(MAT_DIALOG_DATA);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalConfirmComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button [mat-dialog-close]=\"false\" mat-button>{{ data.cancelText }}</button>\n    <button [mat-dialog-close]=\"true\" mat-stroked-button cdkFocusInitial>{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    data = inject(MAT_DIALOG_DATA);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalConfirmComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions align=\"end\">\n    <button [mat-dialog-close]=\"false\" mat-button>{{ data.cancelText }}</button>\n    <button [mat-dialog-close]=\"true\" mat-stroked-button cdkFocusInitial>{{ data.confirmText }}</button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-content{max-width:40em}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalConfirmComponent, decorators: [{
             type: Component,
@@ -84,10 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }] });
 
 class NaturalAlertService {
-    constructor() {
-        this.dialog = inject(MatDialog);
-        this.snackBar = inject(MatSnackBar);
-    }
+    dialog = inject(MatDialog);
+    snackBar = inject(MatSnackBar);
     /**
      * Show an informative message in a snack bar
      */
@@ -123,8 +119,8 @@ class NaturalAlertService {
         });
         return dialog.afterClosed();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAlertService, decorators: [{
             type: Injectable,
@@ -134,22 +130,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }] });
 
 class NaturalAbstractPanel {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        /**
-         * The data property is the container where the resolved content is stored
-         * When loading a component from a panel opening (dialog), receives the data provided by the service
-         */
-        this.data = {};
-        /**
-         * Bind isFrontPanel style class on root component
-         */
-        this.isFrontPanel = false;
-        /**
-         * Bind isPanel style class on root component
-         */
-        this.isPanel = false;
-    }
+    destroyRef = inject(DestroyRef);
+    /**
+     * The data property is the container where the resolved content is stored
+     * When loading a component from a panel opening (dialog), receives the data provided by the service
+     */
+    data = {};
+    /**
+     * Bind isFrontPanel style class on root component
+     */
+    isFrontPanel = false;
+    /**
+     * Bind isPanel style class on root component
+     */
+    isPanel = false;
+    /**
+     * Merging of data provided by the very root component (that is in a route context) and inherited data through panels
+     * TODO: provide type with available attributes
+     */
+    panelData;
+    panelService;
     /**
      * Bind click on panels, to allow the selection of those who are behind
      */
@@ -184,8 +184,8 @@ class NaturalAbstractPanel {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractPanel, isStandalone: true, host: { listeners: { "click": "clickPanel()" }, properties: { "class.isFrontPanel": "this.isFrontPanel", "class.isPanel": "this.isPanel" } }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractPanel, isStandalone: true, host: { listeners: { "click": "clickPanel()" }, properties: { "class.isFrontPanel": "this.isFrontPanel", "class.isPanel": "this.isPanel" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractPanel, decorators: [{
             type: Directive,
@@ -496,9 +496,9 @@ function mergeConcatArray(destValue, source) {
  * ```
  */
 class NaturalQueryVariablesManager {
+    variables = new BehaviorSubject(undefined);
+    channels = new Map();
     constructor(queryVariablesManager) {
-        this.variables = new BehaviorSubject(undefined);
-        this.channels = new Map();
         if (queryVariablesManager) {
             this.channels = queryVariablesManager.getChannelsCopy();
             this.updateVariables();
@@ -2267,10 +2267,8 @@ function money(control) {
  * Cumulate all changes made to an object over time
  */
 class CumulativeChanges {
-    constructor() {
-        this.original = {};
-        this.diff = {};
-    }
+    original = {};
+    diff = {};
     /**
      * Initialize the original values, should be called exactly one time per instance
      */
@@ -2322,43 +2320,46 @@ function isNaturalDialogTriggerProvidedData(dialogData) {
 }
 // @dynamic
 class NaturalAbstractDetail extends NaturalAbstractPanel {
+    key;
+    service;
+    /**
+     * Data retrieved by the server via route resolvers.
+     *
+     * The key `model` is special. It is readonly and represents the model being updated
+     * as it exists on server. The value is kept up to date when Apollo mutates it on server.
+     *
+     * The only time when `model` is not readonly is during creation. Only then can we modify the model values directly.
+     *
+     * Other keys, if present, are whatever is returned from route resolvers as-is.
+     */
+    data;
+    /**
+     * Form that manages the data from the controller
+     */
+    form = new UntypedFormGroup({});
+    /**
+     * Show / hides the bottom fab button (mostly to hide it when we are on other tabs where semantic of button can conflict with ...
+     * semantic of data on other tab, like relations that list other objects)
+     */
+    showFabButton = true;
+    alertService = inject(NaturalAlertService);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    _dialogData = inject(MAT_DIALOG_DATA, { optional: true });
+    /**
+     * Once set, this must not change anymore, especially not right after the creation mutation,
+     * so the form does not switch from creation mode to update mode without an actual reload of
+     * model from DB (by navigating to update page).
+     */
+    _isUpdatePage = false;
+    changes = new CumulativeChanges();
     constructor(key, service) {
         super();
         this.key = key;
         this.service = service;
-        /**
-         * Data retrieved by the server via route resolvers.
-         *
-         * The key `model` is special. It is readonly and represents the model being updated
-         * as it exists on server. The value is kept up to date when Apollo mutates it on server.
-         *
-         * The only time when `model` is not readonly is during creation. Only then can we modify the model values directly.
-         *
-         * Other keys, if present, are whatever is returned from route resolvers as-is.
-         */
         this.data = {
             model: this.service.getDefaultForServer(),
         };
-        /**
-         * Form that manages the data from the controller
-         */
-        this.form = new UntypedFormGroup({});
-        /**
-         * Show / hides the bottom fab button (mostly to hide it when we are on other tabs where semantic of button can conflict with ...
-         * semantic of data on other tab, like relations that list other objects)
-         */
-        this.showFabButton = true;
-        this.alertService = inject(NaturalAlertService);
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        this._dialogData = inject(MAT_DIALOG_DATA, { optional: true });
-        /**
-         * Once set, this must not change anymore, especially not right after the creation mutation,
-         * so the form does not switch from creation mode to update mode without an actual reload of
-         * model from DB (by navigating to update page).
-         */
-        this._isUpdatePage = false;
-        this.changes = new CumulativeChanges();
     }
     /**
      * You probably should not override this method. Instead, consider overriding `initForm()`.
@@ -2519,8 +2520,8 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
         this.form = this.service.getFormGroup(this.data.model);
         this.changes.initialize(this.form.getRawValue());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractDetail, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractDetail, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractDetail, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractDetail, decorators: [{
             type: Directive,
@@ -2548,11 +2549,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * @dynamic
  */
 class NaturalAbstractEditableList {
+    service;
+    form;
+    formArray = new UntypedFormArray([]);
+    variablesManager = new NaturalQueryVariablesManager();
+    dataSource = new MatTableDataSource();
     constructor(service) {
         this.service = service;
-        this.formArray = new UntypedFormArray([]);
-        this.variablesManager = new NaturalQueryVariablesManager();
-        this.dataSource = new MatTableDataSource();
         // Create a form group with a line attributes that contain an array of formGroups (one by line = one by model)
         this.form = new UntypedFormGroup({ rows: this.formArray });
         this.dataSource.data = this.formArray.controls;
@@ -2609,8 +2612,8 @@ class NaturalAbstractEditableList {
     validateForm() {
         validateAllFormControls(this.form);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractEditableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractEditableList, isStandalone: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractEditableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractEditableList, isStandalone: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractEditableList, decorators: [{
             type: Directive,
@@ -2831,18 +2834,20 @@ function throwMatDialogContentAlreadyAttachedError() {
 }
 const NATURAL_DROPDOWN_CONTAINER_DATA = new InjectionToken('NaturalDropdownContainerData');
 class NaturalDropdownContainerComponent extends BasePortalOutlet {
+    elementRef = inject(ElementRef);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    data = inject(NATURAL_DROPDOWN_CONTAINER_DATA);
+    portalOutlet;
+    templateRef;
+    closed = new Subject();
+    /** Current state of the panel animation. */
+    panelAnimationState = 'void';
+    /** Emits whenever an animation on the menu completes. */
+    animationDone = new Subject();
+    focusTrap = null;
+    elementFocusedBeforeDialogWasOpened = null;
     constructor() {
         super();
-        this.elementRef = inject(ElementRef);
-        this.focusTrapFactory = inject(ConfigurableFocusTrapFactory);
-        this.data = inject(NATURAL_DROPDOWN_CONTAINER_DATA);
-        this.closed = new Subject();
-        /** Current state of the panel animation. */
-        this.panelAnimationState = 'void';
-        /** Emits whenever an animation on the menu completes. */
-        this.animationDone = new Subject();
-        this.focusTrap = null;
-        this.elementFocusedBeforeDialogWasOpened = null;
     }
     ngOnDestroy() {
         this.closed.complete();
@@ -2888,8 +2893,8 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
             this.focusTrap.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n        </div>\n    }\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
@@ -2903,9 +2908,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalDropdownRef {
+    dropdownContainer;
+    componentInstance;
+    closed = new Subject();
     constructor(dropdownContainer, component, customProviders, parentInjector, containerRef) {
         this.dropdownContainer = dropdownContainer;
-        this.closed = new Subject();
         // Customize injector to allow data and dropdown reference injection in component
         customProviders.push({ provide: NaturalDropdownRef, useValue: this });
         const customInjector = Injector.create({ providers: customProviders, parent: parentInjector });
@@ -2923,10 +2930,8 @@ class NaturalDropdownRef {
 
 const NATURAL_DROPDOWN_DATA = new InjectionToken('NaturalDropdownData');
 class NaturalDropdownService {
-    constructor() {
-        this.overlay = inject(Overlay);
-        this.injector = inject(Injector);
-    }
+    overlay = inject(Overlay);
+    injector = inject(Injector);
     open(component, connectedElement, customProviders, showValidateButton) {
         // Container data
         const containerData = {
@@ -2996,8 +3001,8 @@ class NaturalDropdownService {
             },
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDropdownService, decorators: [{
             type: Injectable,
@@ -3083,23 +3088,24 @@ function dateMax(dateAdapter, max) {
 }
 
 class TypeDateComponent {
+    dateAdapter = inject(DateAdapter);
+    dateFormats = inject(MAT_DATE_FORMATS);
+    renderedValue = new BehaviorSubject('');
+    configuration;
+    operatorCtrl = new FormControl('equal', { nonNullable: true });
+    valueCtrl = new FormControl(null);
+    todayCtrl = new FormControl(false);
+    operators = possibleComparableOperators;
+    form = new FormGroup({
+        operator: this.operatorCtrl,
+        value: this.valueCtrl,
+        today: this.todayCtrl,
+    });
+    defaults = {
+        min: null,
+        max: null,
+    };
     constructor() {
-        this.dateAdapter = inject(DateAdapter);
-        this.dateFormats = inject(MAT_DATE_FORMATS);
-        this.renderedValue = new BehaviorSubject('');
-        this.operatorCtrl = new FormControl('equal', { nonNullable: true });
-        this.valueCtrl = new FormControl(null);
-        this.todayCtrl = new FormControl(false);
-        this.operators = possibleComparableOperators;
-        this.form = new FormGroup({
-            operator: this.operatorCtrl,
-            value: this.valueCtrl,
-            today: this.todayCtrl,
-        });
-        this.defaults = {
-            min: null,
-            max: null,
-        };
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
         this.todayCtrl.valueChanges.pipe(takeUntilDestroyed()).subscribe(isToday => {
@@ -3216,8 +3222,8 @@ class TypeDateComponent {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matIconSuffix />\n        <mat-datepicker #value />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (valueCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-checkbox [formControl]=\"todayCtrl\" i18n>Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeDateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matIconSuffix />\n        <mat-datepicker #value />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (valueCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-checkbox [formControl]=\"todayCtrl\" i18n>Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateComponent, decorators: [{
             type: Component,
@@ -3400,9 +3406,7 @@ const LOCAL_STORAGE = new InjectionToken('Local storage that can be shimed when
  * Should be used to shim sessionStorage when running on server or in our tests
  */
 class NaturalMemoryStorage {
-    constructor() {
-        this.data = new Map();
-    }
+    data = new Map();
     get length() {
         return this.data.size;
     }
@@ -3428,8 +3432,8 @@ class NaturalMemoryStorage {
     setItem(key, value) {
         this.data.set(key, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
             type: Injectable,
@@ -3504,11 +3508,9 @@ const memoryLocalStorageProvider = {
 
 const NATURAL_PERSISTENCE_VALIDATOR = new InjectionToken('Validator for persisted value retrieved from NaturalPersistenceService. If returns false, the persisted value will never be returned.');
 class NaturalPersistenceService {
-    constructor() {
-        this.router = inject(Router);
-        this.sessionStorage = inject(SESSION_STORAGE);
-        this.isValid = inject(NATURAL_PERSISTENCE_VALIDATOR, { optional: true }) ?? (() => true); // By default, anything is valid
-    }
+    router = inject(Router);
+    sessionStorage = inject(SESSION_STORAGE);
+    isValid = inject(NATURAL_PERSISTENCE_VALIDATOR, { optional: true }) ?? (() => true); // By default, anything is valid
     /**
      * Persist in url and local storage the given value with the given key.
      * When stored in storage, we need more "key" to identify the controller.
@@ -3604,8 +3606,8 @@ class NaturalPersistenceService {
         }
         return this.isValid(key, storageKey, result) ? result : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPersistenceService, decorators: [{
             type: Injectable,
@@ -3621,9 +3623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * It also allow some extra data manipulation
  */
 class NaturalDataSource extends DataSource {
+    ngUnsubscribe = new Subject();
+    internalData;
     constructor(value) {
         super();
-        this.ngUnsubscribe = new Subject();
         if (value instanceof Observable) {
             this.internalData = new BehaviorSubject(null);
             value.pipe(takeUntil(this.ngUnsubscribe)).subscribe(res => (this.data = res));
@@ -3701,61 +3704,80 @@ function unwrapNavigable(item) {
  */
 // @dynamic
 class NaturalAbstractList extends NaturalAbstractPanel {
+    service;
+    /**
+     * Whether search should be loaded from url/storage and persisted in it too.
+     */
+    persistSearch = true;
+    /**
+     * List of columns that are available to the end-user to select from, via `<natural-columns-picker>`
+     */
+    availableColumns = [];
+    /**
+     * Columns list after interaction with `<natural-columns-picker>`
+     */
+    columnsForTable = [];
+    /**
+     * The default column selection that automatically happened after `<natural-columns-picker>` initialization
+     */
+    defaultSelectedColumns = null;
+    /**
+     * Visible (checked) columns
+     *
+     * Instead of using this, you should consider correctly configuring `AvailableColumn.checked`.
+     */
+    selectedColumns;
+    /**
+     * Source of the list
+     */
+    dataSource;
+    /**
+     * Selection for bulk actions
+     */
+    selection = new SelectionModel(true, []);
+    /**
+     * Next executed action from bulk menu
+     */
+    bulkActionSelected = null;
+    /**
+     * Centralisation of query variables
+     */
+    variablesManager = new NaturalQueryVariablesManager();
+    /**
+     * Configuration for natural-search facets
+     */
+    naturalSearchFacets = [];
+    /**
+     * Result of a search (can be provided as input for initialisation)
+     */
+    naturalSearchSelections = [[]];
+    /**
+     * Data attribute provided by activated route snapshot
+     */
+    routeData;
+    /**
+     * List of page sizes
+     */
+    pageSizeOptions = [5, 25, 50, 100, 200];
+    /**
+     * Initial pagination setup
+     */
+    defaultPagination = {
+        offset: null,
+        pageIndex: 0,
+        pageSize: 25,
+    };
+    /**
+     * Initial sorting
+     */
+    defaultSorting;
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    alertService = inject(NaturalAlertService);
+    persistenceService = inject(NaturalPersistenceService);
     constructor(service) {
         super();
         this.service = service;
-        /**
-         * Whether search should be loaded from url/storage and persisted in it too.
-         */
-        this.persistSearch = true;
-        /**
-         * List of columns that are available to the end-user to select from, via `<natural-columns-picker>`
-         */
-        this.availableColumns = [];
-        /**
-         * Columns list after interaction with `<natural-columns-picker>`
-         */
-        this.columnsForTable = [];
-        /**
-         * The default column selection that automatically happened after `<natural-columns-picker>` initialization
-         */
-        this.defaultSelectedColumns = null;
-        /**
-         * Selection for bulk actions
-         */
-        this.selection = new SelectionModel(true, []);
-        /**
-         * Next executed action from bulk menu
-         */
-        this.bulkActionSelected = null;
-        /**
-         * Centralisation of query variables
-         */
-        this.variablesManager = new NaturalQueryVariablesManager();
-        /**
-         * Configuration for natural-search facets
-         */
-        this.naturalSearchFacets = [];
-        /**
-         * Result of a search (can be provided as input for initialisation)
-         */
-        this.naturalSearchSelections = [[]];
-        /**
-         * List of page sizes
-         */
-        this.pageSizeOptions = [5, 25, 50, 100, 200];
-        /**
-         * Initial pagination setup
-         */
-        this.defaultPagination = {
-            offset: null,
-            pageIndex: 0,
-            pageSize: 25,
-        };
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        this.alertService = inject(NaturalAlertService);
-        this.persistenceService = inject(NaturalPersistenceService);
     }
     /**
      * Variables that are always forced on a list, in addition to whatever the end-user might select
@@ -4089,8 +4111,8 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             this.persistenceService.persist('col', value, this.route, this.getStorageKey());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractList, isStandalone: true, inputs: { persistSearch: "persistSearch", availableColumns: "availableColumns", selectedColumns: "selectedColumns", forcedVariables: "forcedVariables" }, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractList, isStandalone: true, inputs: { persistSearch: "persistSearch", availableColumns: "availableColumns", selectedColumns: "selectedColumns", forcedVariables: "forcedVariables" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractList, decorators: [{
             type: Directive,
@@ -4112,14 +4134,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * @dynamic
  */
 class NaturalAbstractNavigableList extends NaturalAbstractList {
+    /**
+     * Name of filter for child items to access ancestor item
+     */
+    ancestorRelationName = 'parent';
+    oldAncertorId = null;
+    breadcrumbs = [];
     constructor(service) {
         super(service);
-        /**
-         * Name of filter for child items to access ancestor item
-         */
-        this.ancestorRelationName = 'parent';
-        this.oldAncertorId = null;
-        this.breadcrumbs = [];
     }
     ngOnInit() {
         // In fact, "na" and "ns" key may exist at the same time in url (but shouldn't).
@@ -4221,8 +4243,8 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
         }
         return [item];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractNavigableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractNavigableList, isStandalone: true, inputs: { ancestorRelationName: "ancestorRelationName" }, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractNavigableList, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractNavigableList, isStandalone: true, inputs: { ancestorRelationName: "ancestorRelationName" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractNavigableList, decorators: [{
             type: Directive,
@@ -4339,12 +4361,10 @@ function debug(debugName) {
  * `id` must be the ID of the object that will be updated.
  */
 class NaturalDebounceService {
-    constructor() {
-        /**
-         * Stores the debounced update function
-         */
-        this.allDebouncedUpdateCache = new Map();
-    }
+    /**
+     * Stores the debounced update function
+     */
+    allDebouncedUpdateCache = new Map();
     /**
      * Debounce the `modelService.updateNow()` mutation for a short time. If called multiple times with the same
      * modelService and id, it will postpone the subscription to the mutation.
@@ -4469,8 +4489,8 @@ class NaturalDebounceService {
             this.allDebouncedUpdateCache.delete(modelService);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDebounceService, decorators: [{
             type: Injectable,
@@ -4480,6 +4500,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }] });
 
 class NaturalAbstractModelService {
+    name;
+    oneQuery;
+    allQuery;
+    createMutation;
+    updateMutation;
+    deleteMutation;
+    createName;
+    updateName;
+    deleteName;
+    /**
+     * Store the creation mutations that are pending
+     */
+    creatingCache = new Map();
+    apollo = inject(Apollo);
+    naturalDebounceService = inject(NaturalDebounceService);
+    plural;
     /**
      *
      * @param name service and single object query name (eg. userForFront or user).
@@ -4503,12 +4539,6 @@ class NaturalAbstractModelService {
         this.createName = createName;
         this.updateName = updateName;
         this.deleteName = deleteName;
-        /**
-         * Store the creation mutations that are pending
-         */
-        this.creatingCache = new Map();
-        this.apollo = inject(Apollo);
-        this.naturalDebounceService = inject(NaturalDebounceService);
         this.plural = plural ?? makePlural(this.name);
     }
     /**
@@ -4996,9 +5026,7 @@ const enumTypeQuery = gql `
     }
 `;
 class NaturalEnumService {
-    constructor() {
-        this.apollo = inject(Apollo);
-    }
+    apollo = inject(Apollo);
     /**
      * Return a list of observable enumerables considering the given name
      */
@@ -5036,8 +5064,8 @@ class NaturalEnumService {
             return '';
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumService, decorators: [{
             type: Injectable,
@@ -5067,9 +5095,11 @@ const queriesQuery = gql `
     }
 `;
 class NaturalLinkMutationService {
-    constructor() {
-        this.apollo = inject(Apollo);
-    }
+    apollo = inject(Apollo);
+    /**
+     * Receives the list of available mutations
+     */
+    allMutations;
     /**
      * Link two objects together
      */
@@ -5181,8 +5211,8 @@ class NaturalLinkMutationService {
             }
         }`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkMutationService, decorators: [{
             type: Injectable,
@@ -5241,8 +5271,8 @@ class NaturalSwissParsingDateAdapter extends NativeDateAdapter {
         // Also see https://github.com/tc39/ecma402/issues/6
         return 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSwissParsingDateAdapter, decorators: [{
             type: Injectable,
@@ -5274,13 +5304,13 @@ const naturalRegistered = Symbol('Natural icon registered');
  * ```
  */
 class NaturalIconDirective {
+    matIconRegistry = inject(MatIconRegistry);
+    domSanitizer = inject(DomSanitizer);
+    config = inject(NATURAL_ICONS_CONFIG, { optional: true });
+    matIconComponent = inject(MatIcon, { host: true, self: true });
+    _size = undefined;
+    classes = '';
     constructor() {
-        this.matIconRegistry = inject(MatIconRegistry);
-        this.domSanitizer = inject(DomSanitizer);
-        this.config = inject(NATURAL_ICONS_CONFIG, { optional: true });
-        this.matIconComponent = inject(MatIcon, { host: true, self: true });
-        this._size = undefined;
-        this.classes = '';
         const config = this.config;
         this.registerIcons(config ?? {});
     }
@@ -5319,8 +5349,8 @@ class NaturalIconDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalIconDirective, isStandalone: true, selector: "mat-icon[naturalIcon]", inputs: { naturalIcon: "naturalIcon", size: "size" }, host: { properties: { "style.font-size.px": "this._size", "style.min-height.px": "this._size", "style.min-width.px": "this._size", "class": "this.classes" } }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalIconDirective, isStandalone: true, selector: "mat-icon[naturalIcon]", inputs: { naturalIcon: "naturalIcon", size: "size" }, host: { properties: { "style.font-size.px": "this._size", "style.min-height.px": "this._size", "style.min-width.px": "this._size", "class": "this.classes" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalIconDirective, decorators: [{
             type: Directive,
@@ -5348,21 +5378,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalColumnsPickerComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.breakpointObserver = inject(BreakpointObserver);
-        this._availableColumns = [];
-        this.buttons = [];
-        /**
-         * Emit a list of valid and selected column keys whenever the selection changes
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Displayed options in the dropdown menu
-         */
-        this.displayedColumns = [];
-        this.isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map$1(result => result.matches));
-    }
+    destroyRef = inject(DestroyRef);
+    breakpointObserver = inject(BreakpointObserver);
+    _selections;
+    _availableColumns = [];
+    buttons = [];
     /**
      * Set all the columns that are available.
      */
@@ -5393,6 +5413,15 @@ class NaturalColumnsPickerComponent {
             col.checked = columns.includes(col.id);
         });
     }
+    /**
+     * Emit a list of valid and selected column keys whenever the selection changes
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Displayed options in the dropdown menu
+     */
+    displayedColumns = [];
+    isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map$1(result => result.matches));
     initColumns() {
         this._availableColumns?.forEach(col => {
             col.checked = this._selections?.length ? this._selections.includes(col.id) : col.checked;
@@ -5434,8 +5463,8 @@ class NaturalColumnsPickerComponent {
         const visibleButtons = this.buttons?.reduce((sum, button) => (this.defaultTrue(button.show) ? 1 : 0), 0) ?? 0;
         return visibleButtons > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons; track button) {\n                    @if (button.href) {\n                        <a\n                            mat-menu-item\n                            [href]=\"defaultTrue(button.show) && button.href\"\n                            (click)=\"button.click?.(button, $event)\"\n                            [disabled]=\"button.disabled\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            @if (useCheckbox(button)) {\n                                <mat-checkbox [checked]=\"button.checked\" />\n                            }\n                            {{ button.label }}\n                        </a>\n                    }\n                    @if (defaultTrue(button.show) && !button.href && !button.buttons) {\n                        <button\n                            mat-menu-item\n                            (click)=\"button.click?.(button, $event)\"\n                            [disabled]=\"button.disabled\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            @if (useCheckbox(button)) {\n                                <mat-checkbox [checked]=\"button.checked\" />\n                            }\n                            {{ button.label }}\n                        </button>\n                    }\n                    @if (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                            @if (useCheckbox(button)) {\n                                <mat-checkbox [checked]=\"button.checked\" />\n                            }\n                            {{ button.label }}\n                        </button>\n                        <mat-menu #subMenu=\"matMenu\">\n                            <ng-template matMenuContent>\n                                @for (subButton of button.buttons; track subButton) {\n                                    <a\n                                        mat-menu-item\n                                        [disabled]=\"subButton.disabled\"\n                                        (click)=\"subButton.click(subButton, $event)\"\n                                    >\n                                        {{ subButton.label }}\n                                    </a>\n                                }\n                            </ng-template>\n                        </mat-menu>\n                    }\n                }\n                @if (displayedColumns.length) {\n                    <button [matMenuTriggerFor]=\"columnMenu\" mat-menu-item [ngClass]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons; track button) {\n            @if (button.href) {\n                <a\n                    mat-icon-button\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\" />\n                </a>\n            }\n            @if (defaultTrue(button.show) && !button.href && !button.buttons) {\n                <button\n                    mat-icon-button\n                    (click)=\"button.click?.(button, $event)\"\n                    [disabled]=\"button.disabled\"\n                    [color]=\"color(button)\"\n                    [matTooltip]=\"button.label\"\n                >\n                    <mat-icon [naturalIcon]=\"button.icon\" />\n                </button>\n            }\n            @if (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\" />\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-template matMenuContent>\n                        @for (subButton of button.buttons; track subButton) {\n                            <a\n                                mat-menu-item\n                                [disabled]=\"subButton.disabled\"\n                                (click)=\"subButton.click(subButton, $event)\"\n                            >\n                                {{ subButton.label }}\n                            </a>\n                        }\n                    </ng-template>\n                </mat-menu>\n            }\n        }\n        @if (displayedColumns.length) {\n            <button\n                [matMenuTriggerFor]=\"columnMenu\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\" mat-menu-item>\n                <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"updateColumns()\"\n                    [(ngModel)]=\"column.checked\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons; track button) {\n                    @if (button.href) {\n                        <a\n                            mat-menu-item\n                            [href]=\"defaultTrue(button.show) && button.href\"\n                            (click)=\"button.click?.(button, $event)\"\n                            [disabled]=\"button.disabled\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            @if (useCheckbox(button)) {\n                                <mat-checkbox [checked]=\"button.checked\" />\n                            }\n                            {{ button.label }}\n                        </a>\n                    }\n                    @if (defaultTrue(button.show) && !button.href && !button.buttons) {\n                        <button\n                            mat-menu-item\n                            (click)=\"button.click?.(button, $event)\"\n                            [disabled]=\"button.disabled\"\n                            [ngClass]=\"needMargin(button)\"\n                        >\n                            @if (useCheckbox(button)) {\n                                <mat-checkbox [checked]=\"button.checked\" />\n                            }\n                            {{ button.label }}\n                        </button>\n                    }\n                    @if (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                            @if (useCheckbox(button)) {\n                                <mat-checkbox [checked]=\"button.checked\" />\n                            }\n                            {{ button.label }}\n                        </button>\n                        <mat-menu #subMenu=\"matMenu\">\n                            <ng-template matMenuContent>\n                                @for (subButton of button.buttons; track subButton) {\n                                    <a\n                                        mat-menu-item\n                                        [disabled]=\"subButton.disabled\"\n                                        (click)=\"subButton.click(subButton, $event)\"\n                                    >\n                                        {{ subButton.label }}\n                                    </a>\n                                }\n                            </ng-template>\n                        </mat-menu>\n                    }\n                }\n                @if (displayedColumns.length) {\n                    <button [matMenuTriggerFor]=\"columnMenu\" mat-menu-item [ngClass]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons; track button) {\n            @if (button.href) {\n                <a\n                    mat-icon-button\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\" />\n                </a>\n            }\n            @if (defaultTrue(button.show) && !button.href && !button.buttons) {\n                <button\n                    mat-icon-button\n                    (click)=\"button.click?.(button, $event)\"\n                    [disabled]=\"button.disabled\"\n                    [color]=\"color(button)\"\n                    [matTooltip]=\"button.label\"\n                >\n                    <mat-icon [naturalIcon]=\"button.icon\" />\n                </button>\n            }\n            @if (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\" />\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-template matMenuContent>\n                        @for (subButton of button.buttons; track subButton) {\n                            <a\n                                mat-menu-item\n                                [disabled]=\"subButton.disabled\"\n                                (click)=\"subButton.click(subButton, $event)\"\n                            >\n                                {{ subButton.label }}\n                            </a>\n                        }\n                    </ng-template>\n                </mat-menu>\n            }\n        }\n        @if (displayedColumns.length) {\n            <button\n                [matMenuTriggerFor]=\"columnMenu\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\" mat-menu-item>\n                <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"updateColumns()\"\n                    [(ngModel)]=\"column.checked\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
@@ -5481,16 +5510,16 @@ function getTabId(tab) {
  * ```
  */
 class NaturalLinkableTabDirective {
+    destroyRef = inject(DestroyRef);
+    component = inject(MatTabGroup);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    /**
+     * If false, disables the persistent navigation
+     */
+    naturalLinkableTab = true;
+    isLoadingRouteConfig = false;
     constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.component = inject(MatTabGroup);
-        this.route = inject(ActivatedRoute);
-        this.router = inject(Router);
-        /**
-         * If false, disables the persistent navigation
-         */
-        this.naturalLinkableTab = true;
-        this.isLoadingRouteConfig = false;
         this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {
             if (event instanceof RouteConfigLoadStart) {
                 this.isLoadingRouteConfig = true;
@@ -5537,8 +5566,8 @@ class NaturalLinkableTabDirective {
     getTabIndex(fragment) {
         return this.component._tabs.toArray().findIndex(tab => fragment === getTabId(tab));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkableTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkableTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalLinkableTabDirective, isStandalone: true, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
             type: Directive,
@@ -5560,8 +5589,8 @@ class NaturalCapitalizePipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, isStandalone: true, name: "capitalize" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalCapitalizePipe, decorators: [{
             type: Pipe,
@@ -5575,8 +5604,8 @@ class NaturalEllipsisPipe {
     transform(value, limit) {
         return value.substr(0, limit - 1) + (value.length > limit ? '…' : '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, isStandalone: true, name: "ellipsis" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEllipsisPipe, decorators: [{
             type: Pipe,
@@ -5592,14 +5621,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * Usage would be: {{ element.priority | enum: 'Priority' | async }}
  */
 class NaturalEnumPipe {
-    constructor() {
-        this.enumService = inject(NaturalEnumService);
-    }
+    enumService = inject(NaturalEnumService);
     transform(value, enumName) {
         return this.enumService.getValueName(value, enumName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, isStandalone: true, name: "enum" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalEnumPipe, decorators: [{
             type: Pipe,
@@ -5622,6 +5649,7 @@ function isDate(value) {
  * - "dans 3 ans"
  */
 class NaturalTimeAgoPipe {
+    fakedNow;
     constructor(fakedNow = null) {
         this.fakedNow = fakedNow;
     }
@@ -5730,8 +5758,8 @@ class NaturalTimeAgoPipe {
             throw new Error('Time travelling just happened');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, deps: [{ token: 'SHOULD_NEVER_BE_INJECTED', optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, deps: [{ token: 'SHOULD_NEVER_BE_INJECTED', optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
             type: Pipe,
@@ -5769,9 +5797,7 @@ function densities(src, forImageSet) {
     return result;
 }
 class NaturalSrcDensityDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-    }
+    elementRef = inject(ElementRef);
     /**
      * Automatically apply image selection based on screen density.
      *
@@ -5804,8 +5830,8 @@ class NaturalSrcDensityDirective {
         this.elementRef.nativeElement.src = src;
         this.elementRef.nativeElement.srcset = densities(src, false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSrcDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: "naturalSrcDensity" }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSrcDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSrcDensityDirective, isStandalone: true, selector: "img[naturalSrcDensity]", inputs: { naturalSrcDensity: "naturalSrcDensity" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSrcDensityDirective, decorators: [{
             type: Directive,
@@ -5819,9 +5845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalBackgroundDensityDirective {
-    constructor() {
-        this.elementRef = inject(ElementRef);
-    }
+    elementRef = inject(ElementRef);
     /**
      * Automatically apply background image selection based on screen density.
      *
@@ -5866,8 +5890,8 @@ class NaturalBackgroundDensityDirective {
             this.elementRef.nativeElement.style.backgroundImage = responsive;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalBackgroundDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalBackgroundDensityDirective, isStandalone: true, selector: "[naturalBackgroundDensity]", inputs: { naturalBackgroundDensity: "naturalBackgroundDensity" }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalBackgroundDensityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalBackgroundDensityDirective, isStandalone: true, selector: "[naturalBackgroundDensity]", inputs: { naturalBackgroundDensity: "naturalBackgroundDensity" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalBackgroundDensityDirective, decorators: [{
             type: Directive,
@@ -5881,10 +5905,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalDialogTriggerComponent {
+    dialog = inject(MatDialog);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    dialogRef;
+    triggerConfig;
     constructor() {
-        this.dialog = inject(MatDialog);
-        this.route = inject(ActivatedRoute);
-        this.router = inject(Router);
         // Data from activated route
         this.triggerConfig = this.route.snapshot.data.trigger;
         // Get data relative to dialog service configuration
@@ -5935,8 +5961,8 @@ class NaturalDialogTriggerComponent {
             this.router.navigate(['.'], { relativeTo: this.route.parent });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDialogTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalDialogTriggerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
             type: Component,
@@ -5965,15 +5991,16 @@ function stripTags(str) {
  * configured for it in the routing.
  */
 class NaturalSeoService {
+    router = inject(Router);
+    titleService = inject(Title);
+    metaTagService = inject(Meta);
+    document = inject(DOCUMENT);
+    locale = inject(LOCALE_ID);
+    routeData;
+    config = {
+        applicationName: '',
+    };
     constructor() {
-        this.router = inject(Router);
-        this.titleService = inject(Title);
-        this.metaTagService = inject(Meta);
-        this.document = inject(DOCUMENT);
-        this.locale = inject(LOCALE_ID);
-        this.config = {
-            applicationName: '',
-        };
         const configToken = inject(NATURAL_SEO_CONFIG);
         combineLatest({
             config: configToken instanceof Observable ? configToken.pipe(startWith$1(this.config)) : of(configToken),
@@ -6162,8 +6189,8 @@ class NaturalSeoService {
         }
         return of(seo);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSeoService, decorators: [{
             type: Injectable,
@@ -6198,36 +6225,41 @@ function provideSeo(config) {
  */
 
 class NaturalDetailHeaderComponent {
-    constructor() {
-        /**
-         * Must be set to get proper links when used in panels
-         */
-        this.isPanel = false;
-        /**
-         * If given will show icon before title
-         */
-        this.icon = '';
-        /**
-         * Title shown if model has no name, or empty name.
-         *
-         * Typically should be the human name for the object type, eg: 'Product'
-         */
-        this.label = '';
-        /**
-         * Label of the root of the breadcrumb, defaults to the value of `label`.
-         *
-         * Typically should be the plural form of the object type, eg: 'Products'
-         */
-        this.rootLabel = '';
-        /**
-         * Title shown if model has no id.
-         *
-         * Typically should be similar to 'New product'.
-         */
-        this.newLabel = '';
-        this.breadcrumbs = [];
-        this.listRoute = [];
-    }
+    /**
+     * Base URL used to build links, defaults to '/'
+     */
+    currentBaseUrl;
+    /**
+     * Must be set to get proper links when used in panels
+     */
+    isPanel = false;
+    /**
+     * If given will show icon before title
+     */
+    icon = '';
+    /**
+     * Title shown if model has no name, or empty name.
+     *
+     * Typically should be the human name for the object type, eg: 'Product'
+     */
+    label = '';
+    /**
+     * Label of the root of the breadcrumb, defaults to the value of `label`.
+     *
+     * Typically should be the plural form of the object type, eg: 'Products'
+     */
+    rootLabel = '';
+    /**
+     * Title shown if model has no id.
+     *
+     * Typically should be similar to 'New product'.
+     */
+    newLabel = '';
+    model;
+    breadcrumbs = [];
+    listRoute = [];
+    listFragment;
+    link;
     getRootLink() {
         return [this.currentBaseUrl || '/'].concat(this.listRoute);
     }
@@ -6237,8 +6269,8 @@ class NaturalDetailHeaderComponent {
         }
         return this.getRootLink().concat([id]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent.id) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs; track parent.id) {\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
             type: Component,
@@ -6273,23 +6305,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class TypeSelectComponent {
+    destroyRef = inject(DestroyRef);
+    renderedValue = new BehaviorSubject('');
+    list;
+    requireValueCtrl = false;
+    operators = possibleDiscreteOperators;
+    operatorCtrl = new FormControl('is', { nonNullable: true });
+    valueCtrl = new FormControl();
+    form = new FormGroup({
+        operator: this.operatorCtrl,
+        value: this.valueCtrl,
+    });
+    items = [];
+    configuration;
+    defaults = {
+        items: [],
+        multiple: true,
+        operators: true,
+    };
     constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.renderedValue = new BehaviorSubject('');
-        this.requireValueCtrl = false;
-        this.operators = possibleDiscreteOperators;
-        this.operatorCtrl = new FormControl('is', { nonNullable: true });
-        this.valueCtrl = new FormControl();
-        this.form = new FormGroup({
-            operator: this.operatorCtrl,
-            value: this.valueCtrl,
-        });
-        this.items = [];
-        this.defaults = {
-            items: [],
-            multiple: true,
-            operators: true,
-        };
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
         // Immediately initValidators and everytime the operator change later
@@ -6417,8 +6451,8 @@ class TypeSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option [value]=\"getId(item)\" togglePosition=\"before\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeSelectComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @if (configuration.operators) {\n        <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n            <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n            <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n                @for (item of operators; track item) {\n                    <mat-option [value]=\"item.key\">\n                        {{ item.label }}\n                    </mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n    }\n\n    @if (requireValueCtrl) {\n        <mat-selection-list [formControl]=\"valueCtrl\">\n            @for (item of items; track item) {\n                <mat-list-option [value]=\"getId(item)\" togglePosition=\"before\">\n                    {{ getDisplay(item) }}\n                </mat-list-option>\n            }\n        </mat-selection-list>\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i5$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeSelectComponent, decorators: [{
             type: Component,
@@ -6429,16 +6463,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class AbstractAssociationSelectComponent {
+    configuration;
+    renderedValue = new BehaviorSubject('');
+    requireValueCtrl = false;
+    operators = possibleDiscreteOperators;
+    operatorCtrl = new FormControl('is', { nonNullable: true });
+    valueCtrl = new FormControl();
+    form = new FormGroup({
+        operator: this.operatorCtrl,
+        value: this.valueCtrl,
+    });
     constructor(data) {
-        this.renderedValue = new BehaviorSubject('');
-        this.requireValueCtrl = false;
-        this.operators = possibleDiscreteOperators;
-        this.operatorCtrl = new FormControl('is', { nonNullable: true });
-        this.valueCtrl = new FormControl();
-        this.form = new FormGroup({
-            operator: this.operatorCtrl,
-            value: this.valueCtrl,
-        });
         this.configuration = data.configuration;
         // Immediately initValidators and everytime the operator change later
         this.operatorCtrl.valueChanges.pipe(startWith(null)).subscribe(() => this.initValidators());
@@ -6509,8 +6544,8 @@ class AbstractAssociationSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractAssociationSelectComponent, decorators: [{
             type: Directive,
@@ -6527,6 +6562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * custom FormControl class ("NaturalFormControl").
  */
 class ExternalFormControlMatcher extends ErrorStateMatcher {
+    component;
     constructor(component) {
         super();
         this.component = component;
@@ -6540,6 +6576,12 @@ class ExternalFormControlMatcher extends ErrorStateMatcher {
     }
 }
 class AbstractSelect {
+    ngControl;
+    placeholder;
+    /**
+     * Mat-hint
+     */
+    hint = null;
     /**
      * If the field is required
      */
@@ -6550,44 +6592,64 @@ class AbstractSelect {
     get required() {
         return !!this._required;
     }
+    _required;
+    /**
+     * Add a suffix button that is a link to given destination
+     */
+    navigateTo;
+    /**
+     * If provided cause a new clear button to appear
+     */
+    clearLabel;
+    /**
+     * Whether to show the search icon
+     */
+    showIcon = true;
+    /**
+     * Icon name
+     */
+    icon = 'search';
+    /**
+     * Function to customize the rendering of the selected item as text in input
+     */
+    displayWith;
+    /**
+     * Emit the selected value whenever it changes
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Emits when internal input is blurred
+     */
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    blur = new EventEmitter();
+    /**
+     * Contains internal representation for current selection AND searched text (for autocomplete)
+     *
+     * It is **not** necessarily `V | null`.
+     *
+     * - NaturalSelectComponent: `string | V | null`. We allow `string`
+     *   only when `optionRequired` is false, so most of the time it is `V | null`.
+     * - NaturalSelectHierarchicComponent: `string | null`.
+     * - NaturalSelectEnumComponent: `V | null`.
+     *
+     * In natural-select context, we use pristine and dirty to identify if the displayed value is search or committed model :
+     *  - Pristine status (unchanged value) means the model is displayed and propagated = the selection is committed
+     *  - Dirty status (changed value) means we are in search/autocomplete mode
+     */
+    internalCtrl = new FormControl(null);
+    /**
+     * Interface with ControlValueAccessor
+     * Notifies parent model / form controller
+     */
+    onChange;
+    /**
+     * Interface with ControlValueAccessor
+     * Notifies parent model / form controller
+     */
+    onTouched;
+    matcher;
     constructor(ngControl) {
         this.ngControl = ngControl;
-        /**
-         * Mat-hint
-         */
-        this.hint = null;
-        /**
-         * Whether to show the search icon
-         */
-        this.showIcon = true;
-        /**
-         * Icon name
-         */
-        this.icon = 'search';
-        /**
-         * Emit the selected value whenever it changes
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Emits when internal input is blurred
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        this.blur = new EventEmitter();
-        /**
-         * Contains internal representation for current selection AND searched text (for autocomplete)
-         *
-         * It is **not** necessarily `V | null`.
-         *
-         * - NaturalSelectComponent: `string | V | null`. We allow `string`
-         *   only when `optionRequired` is false, so most of the time it is `V | null`.
-         * - NaturalSelectHierarchicComponent: `string | null`.
-         * - NaturalSelectEnumComponent: `V | null`.
-         *
-         * In natural-select context, we use pristine and dirty to identify if the displayed value is search or committed model :
-         *  - Pristine status (unchanged value) means the model is displayed and propagated = the selection is committed
-         *  - Dirty status (changed value) means we are in search/autocomplete mode
-         */
-        this.internalCtrl = new FormControl(null);
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -6682,8 +6744,8 @@ class AbstractSelect {
         }
         this.internalCtrl.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: AbstractSelect, isStandalone: true, inputs: { placeholder: "placeholder", hint: "hint", required: "required", navigateTo: "navigateTo", clearLabel: "clearLabel", showIcon: "showIcon", icon: "icon", displayWith: "displayWith", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: AbstractSelect, isStandalone: true, inputs: { placeholder: "placeholder", hint: "hint", required: "required", navigateTo: "navigateTo", clearLabel: "clearLabel", showIcon: "showIcon", icon: "icon", displayWith: "displayWith", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", blur: "blur" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AbstractSelect, decorators: [{
             type: Directive,
@@ -6749,57 +6811,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * ```
  */
 class NaturalSelectComponent extends AbstractSelect {
-    constructor() {
-        super(...arguments);
-        this.destroyRef = inject(DestroyRef);
-        /**
-         * If false, allows to input free string without selecting an option from autocomplete suggestions
-         */
-        this.optionRequired = true;
-        /**
-         * The field on which to search for, default to 'custom'.
-         */
-        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-        this.searchField = 'custom';
-        /**
-         * The operator with which to search for, default to 'search' if `searchField` is 'custom', else 'like'.
-         */
-        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-        this.searchOperator = null;
-        /**
-         * Cache the committed value during search mode.
-         * It's used to be restored in case we cancel the selection
-         */
-        this.lastValidValue = null;
-        /**
-         * Items returned by server to show in listing
-         */
-        this.items = null;
-        /**
-         * Whether we are searching something
-         */
-        this.loading = false;
-        /**
-         * If some items are not shown in result list
-         * Shows a message after list if true
-         */
-        this.hasMoreItems = false;
-        this.nbTotal = 0;
-        /**
-         * Default page size
-         */
-        this.pageSize = 10;
-        /**
-         * Init search options
-         */
-        this.variablesManager = new NaturalQueryVariablesManager();
-    }
+    destroyRef = inject(DestroyRef);
+    autoTrigger;
+    itemTemplate;
+    /**
+     * Service with watchAll function that accepts queryVariables.
+     */
+    service;
+    /**
+     * If false, allows to input free string without selecting an option from autocomplete suggestions
+     */
+    optionRequired = true;
+    /**
+     * The field on which to search for, default to 'custom'.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    searchField = 'custom';
+    /**
+     * The operator with which to search for, default to 'search' if `searchField` is 'custom', else 'like'.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+    searchOperator = null;
+    /**
+     * Cache the committed value during search mode.
+     * It's used to be restored in case we cancel the selection
+     */
+    lastValidValue = null;
     /**
      * Additional filter for query
      */
     set filter(filter) {
         this.variablesManager.set('additional-filter', { filter: filter });
     }
+    /**
+     * Items returned by server to show in listing
+     */
+    items = null;
+    /**
+     * Whether we are searching something
+     */
+    loading = false;
+    /**
+     * If some items are not shown in result list
+     * Shows a message after list if true
+     */
+    hasMoreItems = false;
+    nbTotal = 0;
+    /**
+     * Default page size
+     */
+    pageSize = 10;
+    /**
+     * Init search options
+     */
+    variablesManager = new NaturalQueryVariablesManager();
     /**
      * Whether the value can be changed
      */
@@ -6953,8 +7018,8 @@ class NaturalSelectComponent extends AbstractSelect {
     getVariablesForDebug() {
         return this.variablesManager.variables.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</div>\n    }\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n            <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    }\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
@@ -7014,8 +7079,8 @@ class TypeNaturalSelectComponent extends AbstractAssociationSelectComponent {
         const selectedName = selected?.fullName || selected?.name || '';
         return selectedName;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeNaturalSelectComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeNaturalSelectComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (configuration && requireValueCtrl) {\n        <natural-select\n            style=\"display: inline\"\n            [formControl]=\"valueCtrl\"\n            [placeholder]=\"configuration.placeholder\"\n            [service]=\"configuration.service\"\n            [filter]=\"configuration.filter\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
             type: Component,
@@ -7038,11 +7103,11 @@ let InvalidWithValueStateMatcher$1 = class InvalidWithValueStateMatcher {
     }
 };
 class TypeTextComponent {
+    dropdownRef = inject(NaturalDropdownRef);
+    renderedValue = new BehaviorSubject('');
+    formCtrl = new FormControl('', { nonNullable: true });
+    matcher = new InvalidWithValueStateMatcher$1();
     constructor() {
-        this.dropdownRef = inject(NaturalDropdownRef);
-        this.renderedValue = new BehaviorSubject('');
-        this.formCtrl = new FormControl('', { nonNullable: true });
-        this.matcher = new InvalidWithValueStateMatcher$1();
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.formCtrl.valueChanges.subscribe(value => {
             this.renderedValue.next(value === null ? '' : this.formCtrl.value + '');
@@ -7072,8 +7137,8 @@ class TypeTextComponent {
             this.dropdownRef.close(); // undefined value, discard changes / prevent to add a condition (on new fields
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n        autocomplete=\"off\"\n    />\n    @if (formCtrl.hasError('required')) {\n        <mat-error>*</mat-error>\n    }\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeTextComponent, decorators: [{
             type: Component,
@@ -7081,22 +7146,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 class TypeNumberComponent {
+    dropdownRef = inject(NaturalDropdownRef);
+    renderedValue = new BehaviorSubject('');
+    configuration;
+    operatorCtrl = new FormControl('equal', { nonNullable: true });
+    valueCtrl = new FormControl();
+    matcher = new InvalidWithValueStateMatcher$1();
+    form = new FormGroup({
+        operator: this.operatorCtrl,
+        value: this.valueCtrl,
+    });
+    operators = possibleComparableOperators;
+    defaults = {
+        min: null,
+        max: null,
+        step: null,
+    };
     constructor() {
-        this.dropdownRef = inject(NaturalDropdownRef);
-        this.renderedValue = new BehaviorSubject('');
-        this.operatorCtrl = new FormControl('equal', { nonNullable: true });
-        this.valueCtrl = new FormControl();
-        this.matcher = new InvalidWithValueStateMatcher$1();
-        this.form = new FormGroup({
-            operator: this.operatorCtrl,
-            value: this.valueCtrl,
-        });
-        this.operators = possibleComparableOperators;
-        this.defaults = {
-            min: null,
-            max: null,
-            step: null,
-        };
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
         merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges).subscribe(() => {
@@ -7163,8 +7229,8 @@ class TypeNumberComponent {
             return operator.label + ' ' + this.valueCtrl.value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeNumberComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeNumberComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\n        />\n        @if (valueCtrl.hasError('min')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (valueCtrl.hasError('max')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeNumberComponent, decorators: [{
             type: Component,
@@ -7172,6 +7238,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 class HierarchicFlatNode {
+    node;
+    name;
+    level;
+    expandable;
+    selectable;
+    deselectable;
+    loading = false;
     constructor(node, name, level = 0, expandable = false, selectable = true, deselectable = true) {
         this.node = node;
         this.name = name;
@@ -7179,15 +7252,16 @@ class HierarchicFlatNode {
         this.expandable = expandable;
         this.selectable = selectable;
         this.deselectable = deselectable;
-        this.loading = false;
     }
 }
 
 class HierarchicModelNode {
+    model;
+    config;
+    childrenChange = new BehaviorSubject([]);
     constructor(model, config) {
         this.model = model;
         this.config = config;
-        this.childrenChange = new BehaviorSubject([]);
     }
     get children() {
         return this.childrenChange.value;
@@ -7195,21 +7269,19 @@ class HierarchicModelNode {
 }
 
 class NaturalHierarchicSelectorService {
-    constructor() {
-        this.injector = inject(Injector);
-        /**
-         * Stores the global result of the tree
-         * This observable contains Node.
-         * When it's updated, the TreeController and TreeFlattener process the new array to generate the flat tree.
-         */
-        this.dataChange = new BehaviorSubject([]);
-        /**
-         * Configuration for relations and selection constraints
-         *
-         * The list should be sorted in the order of the hierarchic (list first parent rules, then child rules)
-         */
-        this.configuration = [];
-    }
+    injector = inject(Injector);
+    /**
+     * Stores the global result of the tree
+     * This observable contains Node.
+     * When it's updated, the TreeController and TreeFlattener process the new array to generate the flat tree.
+     */
+    dataChange = new BehaviorSubject([]);
+    /**
+     * Configuration for relations and selection constraints
+     *
+     * The list should be sorted in the order of the hierarchic (list first parent rules, then child rules)
+     */
+    configuration = [];
     /**
      * Init component by saving the complete configuration, and then retrieving root elements.
      * Updates **another** observable (this.dataChange) when data is retrieved.
@@ -7432,8 +7504,8 @@ class NaturalHierarchicSelectorService {
         const node = this.dataChange.value.find(n => n.model.id === item.id && n.model.__typename === item.__typename);
         return node || new HierarchicModelNode(item, configuration);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorService, decorators: [{
             type: Injectable,
@@ -7441,14 +7513,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }] });
 
 class FacetSelectorComponent {
-    constructor() {
-        this.data = inject(NATURAL_DROPDOWN_DATA);
-        this.dropdownRef = inject(NaturalDropdownRef);
-        // Never has a real value
-        this.renderedValue = new BehaviorSubject('');
-        this.facets = this.data.configuration.facets;
-        this.selection = null;
-    }
+    data = inject(NATURAL_DROPDOWN_DATA);
+    dropdownRef = inject(NaturalDropdownRef);
+    // Never has a real value
+    renderedValue = new BehaviorSubject('');
+    facets = this.data.configuration.facets;
+    selection = null;
     /**
      * Get value, including rich object types
      */
@@ -7472,8 +7542,8 @@ class FacetSelectorComponent {
     isDirty() {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FacetSelectorComponent, decorators: [{
             type: Component,
@@ -7495,66 +7565,80 @@ function isComponentValid(component) {
     };
 }
 class NaturalInputComponent {
-    constructor() {
-        this.element = inject(ElementRef);
-        this.dropdownService = inject(NaturalDropdownService);
-        this.injector = inject(EnvironmentInjector);
-        /**
-         * Name of the field on which do a global search (without facet)
-         */
-        this.searchFieldName = 'search';
-        /**
-         * Selected setted for this component
-         */
-        this.selection = null;
-        /**
-         * Text display in the dropdown to select the facet
-         */
-        this.dropdownTitle = '';
-        /**
-         * Emits when user a added/updated/deleted a search (from global context or from facet)
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Emits when user removes the search by pressing the cross icon
-         */
-        this.cleared = new EventEmitter();
-        /**
-         * Selected facet from the list of available facets
-         */
-        this.facet = null;
-        /**
-         * Controller for the input field
-         */
-        this.formCtrl = new FormControl(null);
-        /**
-         * Customer error matcher that should validate on each change (including initialisation)
-         */
-        this.errorMatcher = new AlwaysErrorStateMatcher();
-        /**
-         * Reference of the opened dropdown container
-         */
-        this.dropdownRef = null;
-        /**
-         * Reference of the component inside the dropdown container
-         */
-        this.dropdownComponentRef = null;
-        /**
-         *  Minimum input length (number of chars)
-         *  See length attribute
-         */
-        this.minLength = 5;
-        /**
-         * Size of the input (number of chars)
-         * Match the input.size attribute
-         */
-        this.length = this.minLength;
-        /**
-         * Flag, that, if marked as yes, prevents the opening of the dropdown
-         * Is used to prevent dropdown opening when natural-search takes the focus from parent context (like on modal opening)
-         */
-        this.neutralizeDropdownOpening = false;
-    }
+    element = inject(ElementRef);
+    dropdownService = inject(NaturalDropdownService);
+    injector = inject(EnvironmentInjector);
+    /**
+     * Controls the ripple effect, used when opening a dropdown
+     */
+    ripple;
+    /**
+     * Native element ref for <input> related to this <natural-input> component
+     */
+    input;
+    /**
+     * Label for this field
+     */
+    placeholder;
+    /**
+     * Name of the field on which do a global search (without facet)
+     */
+    searchFieldName = 'search';
+    /**
+     * Selected setted for this component
+     */
+    selection = null;
+    /**
+     * Available facets, allows the user to pick one, than generated then a selection
+     */
+    facets;
+    /**
+     * Text display in the dropdown to select the facet
+     */
+    dropdownTitle = '';
+    /**
+     * Emits when user a added/updated/deleted a search (from global context or from facet)
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Emits when user removes the search by pressing the cross icon
+     */
+    cleared = new EventEmitter();
+    /**
+     * Selected facet from the list of available facets
+     */
+    facet = null;
+    /**
+     * Controller for the input field
+     */
+    formCtrl = new FormControl(null);
+    /**
+     * Customer error matcher that should validate on each change (including initialisation)
+     */
+    errorMatcher = new AlwaysErrorStateMatcher();
+    /**
+     * Reference of the opened dropdown container
+     */
+    dropdownRef = null;
+    /**
+     * Reference of the component inside the dropdown container
+     */
+    dropdownComponentRef = null;
+    /**
+     *  Minimum input length (number of chars)
+     *  See length attribute
+     */
+    minLength = 5;
+    /**
+     * Size of the input (number of chars)
+     * Match the input.size attribute
+     */
+    length = this.minLength;
+    /**
+     * Flag, that, if marked as yes, prevents the opening of the dropdown
+     * Is used to prevent dropdown opening when natural-search takes the focus from parent context (like on modal opening)
+     */
+    neutralizeDropdownOpening = false;
     /**
      * Custom management for taking the focus from parent context
      * When focusing manually on the <input>, a dropdown is opened
@@ -7771,8 +7855,8 @@ class NaturalInputComponent {
         }
         return selection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets", dropdownTitle: "dropdownTitle" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets", dropdownTitle: "dropdownTitle" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button (click)=\"clear()\" mat-icon-button matIconSuffix>\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalInputComponent, decorators: [{
             type: Component,
@@ -7813,14 +7897,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalGroupComponent {
-    constructor() {
-        /**
-         * Text display in the dropdown to select the facet
-         */
-        this.dropdownTitle = '';
-        this.selectionChange = new EventEmitter();
-        this.innerSelections = [];
-    }
+    newValueInput;
+    /**
+     * Text display in the dropdown to select the facet
+     */
+    dropdownTitle = '';
+    placeholder;
+    facets;
+    selectionChange = new EventEmitter();
+    innerSelections = [];
     set selections(selection) {
         this.innerSelections = deepClone(selection);
     }
@@ -7837,8 +7922,8 @@ class NaturalGroupComponent {
         this.innerSelections.splice(index, 1);
         this.selectionChange.emit(this.innerSelections);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: "dropdownTitle", placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n        [facets]=\"facets\"\n        [selection]=\"selection\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalGroupComponent, isStandalone: true, selector: "natural-group", inputs: { dropdownTitle: "dropdownTitle", placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "@for (selection of innerSelections; track $index) {\n    <natural-input\n        (cleared)=\"removeInput($index)\"\n        (selectionChange)=\"updateInput($event, $index)\"\n        [facets]=\"facets\"\n        [selection]=\"selection\"\n    />\n}\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n    [dropdownTitle]=\"dropdownTitle\"\n/>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{display:inline-flex;flex:auto;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets", "dropdownTitle"], outputs: ["selectionChange", "cleared"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalGroupComponent, decorators: [{
             type: Component,
@@ -7861,40 +7946,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalSearchComponent {
-    constructor() {
-        this.breakpointObserver = inject(BreakpointObserver);
-        /**
-         * Placeholder for last input (the free search input)
-         */
-        this.placeholder = $localize `Rechercher`;
-        /**
-         * Exhaustive list of facets to be used in this <natural-search>
-         */
-        this.facets = [];
-        /**
-         * Whether to allow end-user to create multiple `OR` groups
-         */
-        this.multipleGroups = false;
-        /**
-         * Text display in the dropdown to select the facet
-         */
-        this.dropdownTitle = '';
-        /**
-         * Emits when some selection has been setted by the user
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Cleaned inputted selections. Allow valid selections to be manipulated inside component
-         */
-        this.innerSelections = [[]];
-        this.isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map$1(result => result.matches));
-    }
+    breakpointObserver = inject(BreakpointObserver);
+    /**
+     * Placeholder for last input (the free search input)
+     */
+    placeholder = $localize `Rechercher`;
+    /**
+     * Exhaustive list of facets to be used in this <natural-search>
+     */
+    facets = [];
+    /**
+     * Whether to allow end-user to create multiple `OR` groups
+     */
+    multipleGroups = false;
+    /**
+     * Text display in the dropdown to select the facet
+     */
+    dropdownTitle = '';
+    /**
+     * Emits when some selection has been setted by the user
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Cleaned inputted selections. Allow valid selections to be manipulated inside component
+     */
+    innerSelections = [[]];
     /**
      * Input to display at component initialisation
      */
     set selections(selections) {
         this.innerSelections = selections?.[0] ? deepClone(selections) : [[]];
     }
+    isMobile = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(map$1(result => result.matches));
     ngOnChanges() {
         if (!this.facets) {
             this.facets = [];
@@ -7919,8 +8002,8 @@ class NaturalSearchComponent {
         this.innerSelections = [[]];
         this.selectionChange.emit([[]]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections; track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if (innerSelections.length > 1) {\n                        <button\n                            (click)=\"removeGroup($index)\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            (click)=\"clear()\"\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", dropdownTitle: "dropdownTitle", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections.length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections; track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if (innerSelections.length > 1) {\n                        <button\n                            (click)=\"removeGroup($index)\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups) {\n            <button (click)=\"addGroup()\" mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            (click)=\"clear()\"\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i5$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
@@ -7948,49 +8031,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalHierarchicSelectorComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.hierarchicSelectorService = inject(NaturalHierarchicSelectorService);
-        /**
-         * If multiple or single item selection
-         */
-        this.multiple = false;
-        /**
-         * Selected items
-         * Organized by key, containing each an array of selected items of same type
-         */
-        this.selected = {};
-        /**
-         * Whether selectable elements can be unselected
-         */
-        this.allowUnselect = true;
-        /**
-         * Search facets
-         */
-        this.searchFacets = [];
-        /**
-         * Selections to apply on natural-search on component initialisation
-         */
-        this.searchSelections = [];
-        /**
-         * Emits when natural-search selections change
-         */
-        this.searchSelectionChange = new EventEmitter();
-        /**
-         * Inner representation of selected @Input() to allow flat listing as mat-chip.
-         */
-        this.selectedNodes = [];
-        /**
-         * Emits selection change
-         * Returns a Literal where selected models are organized by key
-         */
-        this.selectionChange = new EventEmitter();
-        this.loading = false;
-        /**
-         * Cache for transformed nodes
-         */
-        this.flatNodeMap = new Map();
-    }
+    destroyRef = inject(DestroyRef);
+    hierarchicSelectorService = inject(NaturalHierarchicSelectorService);
+    /**
+     * Function that receives a model and returns a string for display value
+     */
+    displayWith;
+    /**
+     * Config for items and relations arrangement
+     */
+    config;
+    /**
+     * If multiple or single item selection
+     */
+    multiple = false;
+    /**
+     * Selected items
+     * Organized by key, containing each an array of selected items of same type
+     */
+    selected = {};
+    /**
+     * Whether selectable elements can be unselected
+     */
+    allowUnselect = true;
+    /**
+     * Filters that apply to each query
+     */
+    filters;
+    /**
+     * Search facets
+     */
+    searchFacets = [];
+    /**
+     * Selections to apply on natural-search on component initialisation
+     */
+    searchSelections = [];
+    /**
+     * Emits when natural-search selections change
+     */
+    searchSelectionChange = new EventEmitter();
+    /**
+     * Inner representation of selected @Input() to allow flat listing as mat-chip.
+     */
+    selectedNodes = [];
+    /**
+     * Emits selection change
+     * Returns a Literal where selected models are organized by key
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Controller for nodes selection
+     */
+    flatNodesSelection;
+    treeControl;
+    treeFlattener;
+    dataSource;
+    loading = false;
+    /**
+     * Cache for transformed nodes
+     */
+    flatNodeMap = new Map();
     /**
      * Angular OnChange implementation
      */
@@ -8263,8 +8363,8 @@ class NaturalHierarchicSelectorComponent {
     getMapKey(model) {
         return model.__typename + '-' + model.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\n                @if (node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.config.icon\" />\n                }\n                <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search (selectionChange)=\"search($event)\" [facets]=\"searchFacets\" [selections]=\"searchSelections\" />\n</div>\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"36\" mode=\"indeterminate\" style=\"margin: 10px\" />\n    }\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            @if (node.expandable) {\n                <button\n                    (click)=\"loadChildren(node)\"\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    mat-icon-button\n                    matTreeNodeToggle\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner [diameter]=\"24\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.node.config.icon\" style=\"margin-right: 10px\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option (removed)=\"unselectModelNode(node)\" [removable]=\"true\" [selectable]=\"false\">\n                @if (node.config.icon) {\n                    <mat-icon [naturalIcon]=\"node.config.icon\" />\n                }\n                <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8352,8 +8452,8 @@ class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent
     noEmptySelection(selection) {
         return selection[this.configuration.key].length ? selection : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            (selectionChange)=\"selectionChange($event)\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            style=\"margin-right: 20px\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeHierarchicSelectorComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\" panelWidth=\"\">\n            @for (item of operators; track item) {\n                <mat-option [value]=\"item.key\">\n                    {{ item.label }}\n                </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @if (requireValueCtrl) {\n        <natural-hierarchic-selector\n            (selectionChange)=\"selectionChange($event)\"\n            [config]=\"configuration.config\"\n            [filters]=\"configuration.filters\"\n            [multiple]=\"true\"\n            [selected]=\"valueCtrl.value || {}\"\n            style=\"margin-right: 20px\"\n        />\n    }\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8398,21 +8498,22 @@ function toGreaterThanFrom(dateAdapter) {
  * If you need optional bounding date, then use `TypeDateComponent` instead.
  */
 class TypeDateRangeComponent {
+    dateAdapter = inject(DateAdapter);
+    dateFormats = inject(MAT_DATE_FORMATS);
+    renderedValue = new BehaviorSubject('');
+    configuration;
+    matcher = new InvalidWithValueStateMatcher();
+    fromCtrl = new FormControl(null);
+    toCtrl = new FormControl(null);
+    form = new FormGroup({
+        from: this.fromCtrl,
+        to: this.toCtrl,
+    });
+    defaults = {
+        min: null,
+        max: null,
+    };
     constructor() {
-        this.dateAdapter = inject(DateAdapter);
-        this.dateFormats = inject(MAT_DATE_FORMATS);
-        this.renderedValue = new BehaviorSubject('');
-        this.matcher = new InvalidWithValueStateMatcher();
-        this.fromCtrl = new FormControl(null);
-        this.toCtrl = new FormControl(null);
-        this.form = new FormGroup({
-            from: this.fromCtrl,
-            to: this.toCtrl,
-        });
-        this.defaults = {
-            min: null,
-            max: null,
-        };
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = { ...this.defaults, ...data.configuration };
         merge$1(this.fromCtrl.valueChanges, this.toCtrl.valueChanges).subscribe(() => {
@@ -8478,8 +8579,8 @@ class TypeDateRangeComponent {
             return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeDateRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            i18n-placeholder\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeDateRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            i18n-placeholder\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"from\" />\n        <mat-datepicker #from />\n        @if (form.hasError('toGreaterThanFrom')) {\n            <mat-error>{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error>\n        }\n        @if (fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>< {{ configuration.min }}</mat-error>\n        }\n        @if (fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error>> {{ configuration.max }}</mat-error>\n        }\n        @if (fromCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            i18n-placeholder\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matIconSuffix [for]=\"to\" />\n        <mat-datepicker #to />\n        @if (toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> < {{ configuration.min }}</mat-error>\n        }\n        @if (toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')) {\n            <mat-error> > {{ configuration.max }}</mat-error>\n        }\n        @if (toCtrl.hasError('required')) {\n            <mat-error>*</mat-error>\n        }\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
             type: Component,
@@ -8487,14 +8588,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 class TypeOptionsComponent {
+    data;
+    renderedValue = new BehaviorSubject('');
+    formControl = new FormControl({}, { nonNullable: true });
+    configuration;
+    defaults = {
+        options: [],
+    };
+    dropdownRef = inject(NaturalDropdownRef);
     constructor(data) {
         this.data = data;
-        this.renderedValue = new BehaviorSubject('');
-        this.formControl = new FormControl({}, { nonNullable: true });
-        this.defaults = {
-            options: [],
-        };
-        this.dropdownRef = inject(NaturalDropdownRef);
         this.configuration = { ...this.defaults, ...data.configuration };
         if (!this.configuration.options.length) {
             throw new Error('TypeOptions need options, empty array or null given');
@@ -8527,8 +8630,8 @@ class TypeOptionsComponent {
     isDirty() {
         return this.formControl.dirty;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeOptionsComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeOptionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeOptionsComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeOptionsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeOptionsComponent, decorators: [{
             type: Component,
@@ -8560,8 +8663,8 @@ class TypeBooleanComponent extends TypeOptionsComponent {
         };
         super(typeOptionsData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: TypeBooleanComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-button-toggle-group [formControl]=\"formControl\">\n    @for (option of configuration.options; track option) {\n        <mat-button-toggle [value]=\"option\">{{ option.display }}</mat-button-toggle>\n    }\n</mat-button-toggle-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: TypeBooleanComponent, decorators: [{
             type: Component,
@@ -8703,18 +8806,16 @@ function eventToFiles(event) {
 
 // @dynamic
 class NaturalFileService {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        /**
-         * Allow to subscribe to selected files in the entire application. So a
-         * child component is able to receive a file that was dropped on a parent
-         * component.
-         *
-         * Typically useful to drop a file on the entire screen, instead of a precise
-         * component.
-         */
-        this.filesChanged = new Subject();
-    }
+    document = inject(DOCUMENT);
+    /**
+     * Allow to subscribe to selected files in the entire application. So a
+     * child component is able to receive a file that was dropped on a parent
+     * component.
+     *
+     * Typically useful to drop a file on the entire screen, instead of a precise
+     * component.
+     */
+    filesChanged = new Subject();
     getDownloadLink(model) {
         const window = this.document.defaultView;
         if (!window) {
@@ -8732,8 +8833,8 @@ class NaturalFileService {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileService, decorators: [{
             type: Injectable,
@@ -8752,54 +8853,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * @dynamic
  */
 class NaturalAbstractFile {
+    element;
+    naturalFileService;
+    document;
+    fileElement;
+    /**
+     * Whether we should accept a single file or multiple files
+     */
+    multiple = false;
+    /**
+     * Comma-separated list of unique file type specifiers. Like the native element
+     * it can be a mix of mime-type and file extensions.
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+     */
+    accept = '';
+    /**
+     * Maximum file size in bytes. 0 means no validation at all.
+     */
+    maxSize = 0;
+    /**
+     * Disable the file selection entirely
+     */
+    fileSelectionDisabled = false;
+    /**
+     * Whether the user can click on the element to select something
+     *
+     * This has only effect during initialization. Subsequent changes will have
+     * no effect.
+     */
+    selectable = false;
+    /**
+     * If true, the file selection will be broadcast through `NaturalFileService.filesChanged`.
+     *
+     * It is useful to set this to false if there is two upload on a page with different purpose
+     * and the second upload should not be confused with the first one.
+     */
+    broadcast = true;
+    /**
+     * The single valid file that has been selected.
+     *
+     * It is for convenience of use, and will only emit if there is at least one
+     * valid file. See `filesChange` for a more complete output.
+     */
+    fileChange = new EventEmitter();
+    /**
+     * The list of files that have been selected.
+     */
+    filesChange = new EventEmitter();
     constructor(element, naturalFileService, document) {
         this.element = element;
         this.naturalFileService = naturalFileService;
         this.document = document;
-        /**
-         * Whether we should accept a single file or multiple files
-         */
-        this.multiple = false;
-        /**
-         * Comma-separated list of unique file type specifiers. Like the native element
-         * it can be a mix of mime-type and file extensions.
-         *
-         * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
-         */
-        this.accept = '';
-        /**
-         * Maximum file size in bytes. 0 means no validation at all.
-         */
-        this.maxSize = 0;
-        /**
-         * Disable the file selection entirely
-         */
-        this.fileSelectionDisabled = false;
-        /**
-         * Whether the user can click on the element to select something
-         *
-         * This has only effect during initialization. Subsequent changes will have
-         * no effect.
-         */
-        this.selectable = false;
-        /**
-         * If true, the file selection will be broadcast through `NaturalFileService.filesChanged`.
-         *
-         * It is useful to set this to false if there is two upload on a page with different purpose
-         * and the second upload should not be confused with the first one.
-         */
-        this.broadcast = true;
-        /**
-         * The single valid file that has been selected.
-         *
-         * It is for convenience of use, and will only emit if there is at least one
-         * valid file. See `filesChange` for a more complete output.
-         */
-        this.fileChange = new EventEmitter();
-        /**
-         * The list of files that have been selected.
-         */
-        this.filesChange = new EventEmitter();
     }
     ngOnDestroy() {
         delete this.fileElement; // faster memory release of dom element
@@ -8932,8 +9037,8 @@ class NaturalAbstractFile {
             return null;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractFile, deps: [{ token: i0.ElementRef }, { token: NaturalFileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: "multiple", accept: "accept", maxSize: "maxSize", fileSelectionDisabled: "fileSelectionDisabled", selectable: "selectable", broadcast: "broadcast" }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractFile, deps: [{ token: i0.ElementRef }, { token: NaturalFileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: "multiple", accept: "accept", maxSize: "maxSize", fileSelectionDisabled: "fileSelectionDisabled", selectable: "selectable", broadcast: "broadcast" }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAbstractFile, decorators: [{
             type: Directive,
@@ -8976,16 +9081,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * ```
  */
 class NaturalFileDropDirective extends NaturalAbstractFile {
-    constructor() {
-        super(...arguments);
-        this.destroyRef = inject(DestroyRef);
-        this.fileOverClass = false;
-        /**
-         * Emits whenever files are being dragged over
-         */
-        this.fileOver = new EventEmitter();
-        this.rawFileOver = new Subject();
-    }
+    destroyRef = inject(DestroyRef);
+    fileOverClass = false;
+    /**
+     * Emits whenever files are being dragged over
+     */
+    fileOver = new EventEmitter();
+    rawFileOver = new Subject();
     ngOnInit() {
         super.ngOnInit();
         // Automatically change the class, but not too often to avoid visual
@@ -9044,8 +9146,8 @@ class NaturalFileDropDirective extends NaturalAbstractFile {
             this.filesChange.observed ||
             (this.broadcast && this.naturalFileService.filesChanged.observed));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFileDropDirective, isStandalone: true, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: { fileOver: "fileOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" }, properties: { "class.natural-file-over": "this.fileOverClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileDropDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFileDropDirective, isStandalone: true, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: { fileOver: "fileOver" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" }, properties: { "class.natural-file-over": "this.fileOverClass" } }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileDropDirective, decorators: [{
             type: Directive,
@@ -9073,17 +9175,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * This directive has all options to select files, except drag'n'drop.
  */
 class NaturalFileSelectDirective extends NaturalAbstractFile {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether the user can click on the element to select something
-         *
-         * Override parent to enable it by default
-         */
-        this.selectable = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: "selectable" }, usesInheritance: true, ngImport: i0 }); }
+    /**
+     * Whether the user can click on the element to select something
+     *
+     * Override parent to enable it by default
+     */
+    selectable = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileSelectDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFileSelectDirective, isStandalone: true, selector: ":not([naturalFileDrop])[naturalFileSelect]", inputs: { selectable: "selectable" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileSelectDirective, decorators: [{
             type: Directive,
@@ -9097,34 +9196,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
 
 // @dynamic
 class NaturalFileComponent {
-    constructor() {
-        this.naturalFileService = inject(NaturalFileService);
-        this.alertService = inject(NaturalAlertService);
-        this.document = inject(DOCUMENT);
-        this.height = 250;
-        this.action = null;
-        this.backgroundSize = 'contain';
-        /**
-         * Comma-separated list of unique file type specifiers. Like the native element,
-         * it can be a mix of mime-type and file extensions.
-         *
-         * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
-         */
-        this.accept = 'image/bmp,image/gif,image/jpeg,image/pjpeg,image/png,image/svg+xml,image/svg,image/webp';
-        this.model = null;
-        /**
-         * If provided, its value will get updated when the model changes.
-         * But its value is never read, so if you want to set a value use `[model]` instead.
-         */
-        this.formCtrl = null;
-        /**
-         * This **must not** be used to mutate the server, because it is very likely it will never be called if the
-         * human navigates away from the page before the upload is finished. Instead, you should use `[uploader]`.
-         */
-        this.modelChange = new EventEmitter();
-        this.imagePreview = '';
-        this.filePreview = null;
-    }
+    naturalFileService = inject(NaturalFileService);
+    alertService = inject(NaturalAlertService);
+    document = inject(DOCUMENT);
+    height = 250;
+    action = null;
+    backgroundSize = 'contain';
+    /**
+     * Comma-separated list of unique file type specifiers. Like the native element,
+     * it can be a mix of mime-type and file extensions.
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+     */
+    accept = 'image/bmp,image/gif,image/jpeg,image/pjpeg,image/png,image/svg+xml,image/svg,image/webp';
+    /**
+     * If given, it will be called when a new file is selected. The callback should typically upload the file
+     * to the server and link the newly uploaded file to the existing related object.
+     *
+     * The callback **must** be able to run even if the calling component has been destroyed. That means in most
+     * cases you **must** `bind()` the callback explicitly, like so:
+     *
+     * ```html
+     * <natural-file [uploader]="myCallback.bind(this)" />
+     * ```
+     *
+     * Also, you probably **should** set a `[formCtrl]` so that the form is updated automatically, instead of doing
+     * it manually within the callback.
+     */
+    uploader;
+    model = null;
+    /**
+     * If provided, its value will get updated when the model changes.
+     * But its value is never read, so if you want to set a value use `[model]` instead.
+     */
+    formCtrl = null;
+    /**
+     * This **must not** be used to mutate the server, because it is very likely it will never be called if the
+     * human navigates away from the page before the upload is finished. Instead, you should use `[uploader]`.
+     */
+    modelChange = new EventEmitter();
+    imagePreview = '';
+    filePreview = null;
     ngOnChanges(changes) {
         if (changes.model && changes.model.previousValue !== changes.model.currentValue) {
             this.updateImage();
@@ -9205,8 +9317,8 @@ class NaturalFileComponent {
         reader.readAsBinaryString(file);
         return subject.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", 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    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\">\n            <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\">\n        @if (action === 'upload') {\n            <mat-icon [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\" />\n        }\n        @if (action === 'download') {\n            <mat-icon [size]=\"height * 0.66\" naturalIcon=\"get_app\" />\n        }\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalFileComponent, isStandalone: true, selector: "natural-file", inputs: { height: "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    [naturalBackgroundDensity]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    @if (filePreview) {\n        <div class=\"file-preview\">\n            <mat-icon [size]=\"height * 0.33\" naturalIcon=\"attachment\" />\n            {{ filePreview | uppercase }}\n        </div>\n    }\n\n    <div class=\"action-overlay\">\n        @if (action === 'upload') {\n            <mat-icon [size]=\"height * 0.66\" naturalIcon=\"cloud_upload\" />\n        }\n        @if (action === 'download') {\n            <mat-icon [size]=\"height * 0.66\" naturalIcon=\"get_app\" />\n        }\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;position:relative;flex-direction:row;overflow:hidden}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{display:flex;position:absolute;inset:0;justify-content:center;align-items:center;opacity:0}\n"], dependencies: [{ kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }, { kind: "directive", type: NaturalBackgroundDensityDirective, selector: "[naturalBackgroundDensity]", inputs: ["naturalBackgroundDensity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFileComponent, decorators: [{
             type: Component,
@@ -9245,13 +9357,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class NaturalFixedButtonComponent {
-    constructor() {
-        this.link = [];
-        this.color = 'accent';
-        this.disabled = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: "icon", link: "link", color: "color", disabled: "disabled" }, ngImport: i0, template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n    <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] }); }
+    icon;
+    link = [];
+    color = 'accent';
+    disabled = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: "icon", link: "link", color: "color", disabled: "disabled" }, ngImport: i0, template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n    <mat-icon [naturalIcon]=\"icon\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
             type: Component,
@@ -9272,6 +9383,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class NaturalFixedButtonDetailComponent {
+    canChange = true;
+    isCreation = false;
     get model() {
         return this._model;
     }
@@ -9282,11 +9395,11 @@ class NaturalFixedButtonDetailComponent {
             this.canChange = false;
         }
     }
+    _model;
+    form;
+    create = new EventEmitter();
+    delete = new EventEmitter();
     constructor() {
-        this.canChange = true;
-        this.isCreation = false;
-        this.create = new EventEmitter();
-        this.delete = new EventEmitter();
         const route = inject(ActivatedRoute);
         route.params.pipe(takeUntilDestroyed()).subscribe(() => (this.canChange = true));
     }
@@ -9300,8 +9413,8 @@ class NaturalFixedButtonDetailComponent {
             this.delete.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        (click)=\"clickCreate()\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        (click)=\"clickDelete()\"\n        [disabled]=\"form.disabled\"\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        (click)=\"clickCreate()\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        (click)=\"clickDelete()\"\n        [disabled]=\"form.disabled\"\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
@@ -9323,8 +9436,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class NaturalHierarchicSelectorDialogComponent {
+    dialogRef = inject(MatDialogRef);
+    /**
+     * Set of hierarchic configurations to pass as attribute to HierarchicComponent
+     */
+    config;
+    /**
+     * Natural search selections after initialisation
+     */
+    searchSelectionsOutput;
     constructor() {
-        this.dialogRef = inject(MatDialogRef);
         const data = inject(MAT_DIALOG_DATA);
         this.config = defaults(data, { multiple: true, allowUnselect: true });
         this.searchSelectionsOutput = this.config.searchSelections;
@@ -9336,8 +9457,8 @@ class NaturalHierarchicSelectorDialogComponent {
         };
         this.dialogRef.close(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n    <button mat-dialog-close mat-button i18n>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
             type: Component,
@@ -9345,9 +9466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 class NaturalHierarchicSelectorDialogService {
-    constructor() {
-        this.dialog = inject(MatDialog);
-    }
+    dialog = inject(MatDialog);
     open(hierarchicConfig, dialogConfig) {
         const defaultDialogConfig = {
             width: '700px',
@@ -9355,8 +9474,8 @@ class NaturalHierarchicSelectorDialogService {
         };
         return this.dialog.open(NaturalHierarchicSelectorDialogComponent, defaults(dialogConfig, defaultDialogConfig));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHierarchicSelectorDialogService, decorators: [{
             type: Injectable,
@@ -9497,52 +9616,60 @@ function compareConfigs(a, b) {
  * @dynamic
  */
 class NaturalPanelsService {
+    router = inject(Router);
+    dialog = inject(MatDialog);
+    injector = inject(Injector);
+    hooksConfig = inject(PanelsHooksConfig);
+    panelWidth = '960px';
     /**
      * Because of this static property Panels are **not** compatible with SSR.
      * And we cannot make it non-static, because `UrlMatcher` cannot be injected.
      */
-    static { this._opened = false; }
+    static _opened = false;
     static get opened() {
         return this._opened;
     }
+    /**
+     * Stream that emits when all open dialog have finished closing
+     */
+    afterAllClosed = new Subject();
+    /**
+     * Cache for panels counter. Works more like an ID.
+     * Is used to give an unique identifier to multiple similar panels configurations
+     */
+    counter = 1;
+    /**
+     * Class applied to dialog overlay related with panels
+     * If change, change CSS too
+     */
+    panelClass = 'panel';
+    /**
+     * Cache for panels setup before navigation change.
+     * Used to detect panels openings/closings and adapt for new configuration
+     */
+    oldFullConfig = [];
+    /**
+     * Cache for subscription stop
+     */
+    routeSub;
+    /**
+     * Cache for subscription stop
+     */
+    navSub;
+    /**
+     * Horizontal gaps between panels
+     */
+    panelsOffsetH = 35;
+    /**
+     * Vertical gaps between panels
+     */
+    panelsOffsetV = 40;
+    /**
+     * Cache of previous screen size
+     * Used to change panels stack orientation on small screens
+     */
+    isVertical = false;
     constructor() {
-        this.router = inject(Router);
-        this.dialog = inject(MatDialog);
-        this.injector = inject(Injector);
-        this.hooksConfig = inject(PanelsHooksConfig);
-        this.panelWidth = '960px';
-        /**
-         * Stream that emits when all open dialog have finished closing
-         */
-        this.afterAllClosed = new Subject();
-        /**
-         * Cache for panels counter. Works more like an ID.
-         * Is used to give an unique identifier to multiple similar panels configurations
-         */
-        this.counter = 1;
-        /**
-         * Class applied to dialog overlay related with panels
-         * If change, change CSS too
-         */
-        this.panelClass = 'panel';
-        /**
-         * Cache for panels setup before navigation change.
-         * Used to detect panels openings/closings and adapt for new configuration
-         */
-        this.oldFullConfig = [];
-        /**
-         * Horizontal gaps between panels
-         */
-        this.panelsOffsetH = 35;
-        /**
-         * Vertical gaps between panels
-         */
-        this.panelsOffsetV = 40;
-        /**
-         * Cache of previous screen size
-         * Used to change panels stack orientation on small screens
-         */
-        this.isVertical = false;
         const breakpointObserver = inject(BreakpointObserver);
         //  Watch media to know if display panels horizontally or vertically
         breakpointObserver
@@ -9787,8 +9914,8 @@ class NaturalPanelsService {
             dialog.updatePosition(position);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsService, decorators: [{
             type: Injectable,
@@ -9798,18 +9925,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }], ctorParameters: () => [] });
 
 class NaturalPanelsComponent {
+    panelsService = inject(NaturalPanelsService);
     // 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() {
-        this.panelsService = inject(NaturalPanelsService);
         const route = inject(ActivatedRoute);
         this.panelsService.start(route);
     }
     ngOnDestroy() {
         this.panelsService.stop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalPanelsComponent, isStandalone: true, selector: "natural-panels", ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalPanelsComponent, decorators: [{
             type: Component,
@@ -9847,38 +9974,12 @@ const fallbackIfNoOpenedPanels = (segments) => {
  * ```
  */
 class NaturalRelationsComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.linkMutationService = inject(NaturalLinkMutationService);
-        this.hierarchicSelectorDialog = inject(NaturalHierarchicSelectorDialogService);
-        /**
-         * The placeholder used in the button to add a new relation
-         */
-        this.placeholder = '';
-        /**
-         * Whether the relations can be changed
-         */
-        this.disabled = false;
-        /**
-         * Emits after relations were successfully added on the server
-         */
-        this.selectionChange = new EventEmitter();
-        this.loading = false;
-        /**
-         * Table columns
-         */
-        this.displayedColumns = ['name'];
-        this.pageSizeOptions = [5, 25, 50, 100];
-        this.defaultPagination = {
-            pageIndex: 0,
-            pageSize: 25,
-        };
-        /**
-         * Observable variables/options for listing service usage and apollo watchQuery
-         */
-        this.variablesManager = new NaturalQueryVariablesManager();
-        this.removing = new Set();
-    }
+    destroyRef = inject(DestroyRef);
+    linkMutationService = inject(NaturalLinkMutationService);
+    hierarchicSelectorDialog = inject(NaturalHierarchicSelectorDialogService);
+    select;
+    itemTemplate;
+    _service;
     get service() {
         return this._service;
     }
@@ -9892,6 +9993,61 @@ class NaturalRelationsComponent {
         }));
         this.dataSource = new NaturalDataSource(items$);
     }
+    /**
+     * The placeholder used in the button to add a new relation
+     */
+    placeholder = '';
+    /**
+     * Filter for autocomplete selector
+     */
+    autocompleteSelectorFilter;
+    /**
+     * Function to customize the rendering of the selected item as text in input
+     */
+    displayWith;
+    /**
+     * Whether the relations can be changed
+     */
+    disabled = false;
+    /**
+     * The main object to which all relations belong to
+     */
+    main;
+    /**
+     * Emits after relations were successfully added on the server
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Filters for hierarchic selector
+     */
+    hierarchicSelectorFilters;
+    /**
+     * Configuration in case we prefer hierarchic selection over autocomplete selection
+     */
+    hierarchicSelectorConfig;
+    /**
+     * Link mutation semantic
+     */
+    otherName;
+    /**
+     * Listing service instance
+     */
+    dataSource;
+    loading = false;
+    /**
+     * Table columns
+     */
+    displayedColumns = ['name'];
+    pageSizeOptions = [5, 25, 50, 100];
+    defaultPagination = {
+        pageIndex: 0,
+        pageSize: 25,
+    };
+    /**
+     * Observable variables/options for listing service usage and apollo watchQuery
+     */
+    variablesManager = new NaturalQueryVariablesManager();
+    removing = new Set();
     /**
      * The filter used to filter relations
      *
@@ -9988,8 +10144,8 @@ class NaturalRelationsComponent {
         }
         return this.hierarchicSelectorConfig.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        (click)=\"removeRelation(element)\"\n                        [disabled]=\"removing.has(element)\"\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig) {\n        <div>\n            <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n        </div>\n    } @else {\n        <natural-select\n            (selectionChange)=\"addRelations([$event])\"\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter\"\n            [placeholder]=\"placeholder\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
             type: Component,
@@ -10041,14 +10197,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class NaturalSelectEnumComponent extends AbstractSelect {
+    enumService = inject(NaturalEnumService);
+    /**
+     * The name of the enum type, eg: `"ActionStatus"`
+     */
+    enumName;
+    /**
+     * If given an extra option is added to select `null` with given label
+     */
+    nullLabel;
+    /**
+     * Functions that receives an enum value and returns whether that value is disabled
+     */
+    optionDisabled;
+    /**
+     * Whether the user should be allowed to select multiple options
+     */
+    multiple = false;
+    items;
     constructor() {
         const ngControl = inject(NgControl, { optional: true, self: true });
         super(ngControl);
-        this.enumService = inject(NaturalEnumService);
-        /**
-         * Whether the user should be allowed to select multiple options
-         */
-        this.multiple = false;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -10057,8 +10226,8 @@ class NaturalSelectEnumComponent extends AbstractSelect {
     getDisplayFn() {
         throw new Error('This should never be called');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectEnumComponent, isStandalone: true, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"onBlur()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        @if (nullLabel) {\n            <mat-option [value]=\"null\">{{ nullLabel }}</mat-option>\n        }\n        @for (item of items | async; track item.value) {\n            <mat-option [value]=\"item.value\" [disabled]=\"optionDisabled ? optionDisabled(item) : false\">\n                {{ item.name }}\n            </mat-option>\n        }\n    </mat-select>\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    }\n</mat-form-field>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
             type: Component,
@@ -10100,25 +10269,33 @@ function defaultDisplayFn(item) {
  * ```
  */
 class NaturalSelectHierarchicComponent extends AbstractSelect {
+    hierarchicSelectorDialogService = inject(NaturalHierarchicSelectorDialogService);
+    /**
+     * If provided cause a new select button to appear
+     */
+    selectLabel;
+    /**
+     * Configuration for hierarchic relations
+     *
+     * It should be an array with at least one element with `selectableAtKey` configured, otherwise the selector will never open.
+     */
+    config = null;
+    /**
+     * Filters formatted for hierarchic selector
+     */
+    filters;
+    /**
+     * The selected value as an object. The internal value is `internalCtrl.value`, and that is a string.
+     */
+    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.
+     */
+    lockOpenDialog = false;
     constructor() {
         const ngControl = inject(NgControl, { optional: true, self: true });
         super(ngControl);
-        this.hierarchicSelectorDialogService = inject(NaturalHierarchicSelectorDialogService);
-        /**
-         * 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
@@ -10183,8 +10360,8 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
     getSelectKey() {
         return this.config?.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    @if (showIcon) {\n        <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n    }\n\n    @if (hint) {\n        <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n            <button\n                (click)=\"clear(); $event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    }\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button (click)=\"openDialog()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button (click)=\"clear()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
@@ -10212,18 +10389,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class NaturalSidenavStackService {
-    constructor() {
-        /**
-         * The stack of all currently living sidenavs
-         */
-        this.sidenavs = [];
-        /**
-         * Emits the most recent living SidenavContainer whenever it changes. So it's
-         * either the SidenavContainer that was just added, or the one "before" the
-         * SidenavContainer that was just removed
-         */
-        this.currentSidenav = new Subject();
-    }
+    /**
+     * The stack of all currently living sidenavs
+     */
+    sidenavs = [];
+    /**
+     * Emits the most recent living SidenavContainer whenever it changes. So it's
+     * either the SidenavContainer that was just added, or the one "before" the
+     * SidenavContainer that was just removed
+     */
+    currentSidenav = new Subject();
     /**
      * For internal use only
      * @internal
@@ -10252,8 +10427,8 @@ class NaturalSidenavStackService {
     next() {
         this.currentSidenav.next(this.sidenavs[this.sidenavs.length - 1]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavStackService, decorators: [{
             type: Injectable,
@@ -10275,47 +10450,45 @@ function assert(value) {
  * Maybe the better is to wait next release
  */
 class NaturalSidenavService {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.breakpointObserver = inject(BreakpointObserver);
-        this.router = inject(Router);
-        this.sessionStorage = inject(SESSION_STORAGE);
-        this.naturalSidenavStackService = inject(NaturalSidenavStackService);
-        /**
-         * Navigation modes
-         * First is for desktop view
-         * Second is for mobile view
-         */
-        this.modes = ['side', 'push'];
-        /**
-         * Activated mode
-         * Default to desktop view
-         */
-        this.mode = this.modes[0];
-        /**
-         * Whether nav is opened or not
-         */
-        this.opened = true;
-        /**
-         * Stores the opened status during mobile view, to restore if we come back to desktop view
-         */
-        this.tmpOpened = this.opened;
-        /**
-         * Whether nav is minimized or not
-         */
-        this.minimized = false;
-        /**
-         * LocalStorage key that stores the minimized status
-         */
-        this.minimizedStorageKey = 'menu-minimized';
-        /**
-         * LocalStorage key that stores the opened status
-         */
-        this.openedStorageKey = 'menu-opened';
-        this.minimizedStorageKeyWithName = null;
-        this.openedStorageKeyWithName = null;
-        this._isMobileView = false;
-    }
+    destroyRef = inject(DestroyRef);
+    breakpointObserver = inject(BreakpointObserver);
+    router = inject(Router);
+    sessionStorage = inject(SESSION_STORAGE);
+    naturalSidenavStackService = inject(NaturalSidenavStackService);
+    /**
+     * Navigation modes
+     * First is for desktop view
+     * Second is for mobile view
+     */
+    modes = ['side', 'push'];
+    /**
+     * Activated mode
+     * Default to desktop view
+     */
+    mode = this.modes[0];
+    /**
+     * Whether nav is opened or not
+     */
+    opened = true;
+    /**
+     * Stores the opened status during mobile view, to restore if we come back to desktop view
+     */
+    tmpOpened = this.opened;
+    /**
+     * Whether nav is minimized or not
+     */
+    minimized = false;
+    /**
+     * LocalStorage key that stores the minimized status
+     */
+    minimizedStorageKey = 'menu-minimized';
+    /**
+     * LocalStorage key that stores the opened status
+     */
+    openedStorageKey = 'menu-opened';
+    minimizedStorageKeyWithName = null;
+    openedStorageKeyWithName = null;
+    _isMobileView = false;
     get activeMode() {
         return this.mode;
     }
@@ -10442,8 +10615,8 @@ class NaturalSidenavService {
             this.sessionStorage.setItem(this.openedStorageKeyWithName, this.opened ? 'true' : 'false');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavService, decorators: [{
             type: Injectable,
@@ -10451,8 +10624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }] });
 
 class NaturalSidenavComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavComponent, isStandalone: true, selector: "natural-sidenav", ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavComponent, decorators: [{
             type: Component,
@@ -10464,27 +10637,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
         }] });
 
 class NaturalSidenavContainerComponent {
-    constructor() {
-        this.sidenavService = inject(NaturalSidenavService);
-        /**
-         * The side that the drawer is attached to
-         */
-        this.position = 'start';
-        /**
-         * If true listens to route changes to close side nav after a route change if mobile view is active
-         * Actually a navigation to current route does not emit a route change, and the sidenav don't close.
-         */
-        this.mobileAutoClose = true;
-        /**
-         * Width of the minimized menu
-         */
-        this.minimizedWidth = 150;
-        /**
-         * If true, prevents "native" material sidenav to scroll at container level and delegates the scroll responsability to the transcluded
-         * content
-         */
-        this.noScroll = false;
-    }
+    sidenavService = inject(NaturalSidenavService);
+    /**
+     * Unique identifier used for the local storage
+     */
+    name;
+    /**
+     * The side that the drawer is attached to
+     */
+    position = 'start';
+    /**
+     * If true listens to route changes to close side nav after a route change if mobile view is active
+     * Actually a navigation to current route does not emit a route change, and the sidenav don't close.
+     */
+    mobileAutoClose = true;
+    /**
+     * Width of the minimized menu
+     */
+    minimizedWidth = 150;
+    /**
+     * If true, prevents "native" material sidenav to scroll at container level and delegates the scroll responsability to the transcluded
+     * content
+     */
+    noScroll = false;
+    /**
+     * Inner "native" material sidenav
+     */
+    menuSidenav;
     get isMinimized() {
         return this.sidenavService.isMinimized;
     }
@@ -10515,8 +10694,8 @@ class NaturalSidenavContainerComponent {
     toggleMinimized() {
         this.sidenavService.toggleMinimized();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
@@ -10541,8 +10720,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
             }] } });
 
 class NaturalSidenavContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: NaturalSidenavContentComponent, isStandalone: true, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
             type: Component,
@@ -10554,14 +10733,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  */
 
 class NaturalStampComponent {
+    item;
     showUpdate() {
         const same = this.item.updater?.id === this.item.creator?.id &&
             this.item.updateDate &&
             this.item.updateDate === this.item.creationDate;
         return !same && (!!this.item.updateDate || !!this.item.updater);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n    @if (item.creationDate || item.creator) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n            :\n            @if (item.creator) {\n                <span>{{ item.creator.fullName || item.creator.name }}</span>\n            }\n            @if (item.creator && item.creationDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.creationDate) {\n                <span>{{ item.creationDate | date }} ({{ item.creationDate | timeAgo }})</span>\n            }\n        </div>\n    }\n    @if (showUpdate()) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Modification</span>\n            :\n            @if (item.updater) {\n                <span>{{ item.updater.fullName || item.updater.name }}</span>\n            }\n            @if (item.updater && item.updateDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.updateDate) {\n                <span>{{ item.updateDate | date }} ({{ item.updateDate | timeAgo }})</span>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalStampComponent, isStandalone: true, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "@if (item) {\n    @if (item.creationDate || item.creator) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n            :\n            @if (item.creator) {\n                <span>{{ item.creator.fullName || item.creator.name }}</span>\n            }\n            @if (item.creator && item.creationDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.creationDate) {\n                <span>{{ item.creationDate | date }} ({{ item.creationDate | timeAgo }})</span>\n            }\n        </div>\n    }\n    @if (showUpdate()) {\n        <div>\n            <span class=\"mat-subtitle-2\" i18n>Modification</span>\n            :\n            @if (item.updater) {\n                <span>{{ item.updater.fullName || item.updater.name }}</span>\n            }\n            @if (item.updater && item.updateDate) {\n                <span>,&nbsp;</span>\n            }\n            @if (item.updateDate) {\n                <span>{{ item.updateDate | date }} ({{ item.updateDate | timeAgo }})</span>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalStampComponent, decorators: [{
             type: Component,
@@ -10586,16 +10766,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * External URL will always be opened in new tab.
  */
 class NaturalTableButtonComponent {
-    constructor() {
-        this.queryParams = {};
-        this.queryParamsHandling = '';
-        this.navigate = [];
-        this.preserveFragment = false;
-        this.disabled = false;
-        this.raised = false;
-        this.buttonClick = new EventEmitter();
-        this.type = 'none';
-    }
+    queryParams = {};
+    queryParamsHandling = '';
+    label;
+    icon;
+    href;
+    navigate = [];
+    fragment;
+    preserveFragment = false;
+    disabled = false;
+    raised = false;
+    color;
+    buttonClick = new EventEmitter();
+    type = 'none';
     ngOnChanges() {
         if (this.navigate instanceof UrlTree || this.navigate?.length || Object.keys(this.queryParams).length) {
             this.type = 'routerLink';
@@ -10610,8 +10793,8 @@ class NaturalTableButtonComponent {
             this.type = 'none';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", disabled: "disabled", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n    <span>\n        @if (icon) {\n            <mat-icon [naturalIcon]=\"icon\" />\n        }\n        @if (label) {\n            <span>{{ label }}</span>\n        }\n    </span>\n}\n\n@if (!raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n\n@if (raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-raised-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            (click)=\"buttonClick.emit($event)\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a\n            [attr.href]=\"href\"\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n            target=\"_blank\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", disabled: "disabled", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type === 'none') {\n    <span>\n        @if (icon) {\n            <mat-icon [naturalIcon]=\"icon\" />\n        }\n        @if (label) {\n            <span>{{ label }}</span>\n        }\n    </span>\n}\n\n@if (!raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a (click)=\"buttonClick.emit($event)\" [disabled]=\"disabled\" mat-icon-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-icon-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n\n@if (raised) {\n    <!-- App routed link with label... -->\n    @if (type === 'routerLink' && label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-raised-button\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'routerLink' && !label) {\n        <a\n            [color]=\"color\"\n            [queryParams]=\"queryParams\"\n            [queryParamsHandling]=\"queryParamsHandling\"\n            [routerLink]=\"navigate\"\n            [fragment]=\"fragment\"\n            [preserveFragment]=\"preserveFragment\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- Click with label... -->\n    @if (type === 'click' && label) {\n        <a [color]=\"color\" [disabled]=\"disabled\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'click' && !label) {\n        <a\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            (click)=\"buttonClick.emit($event)\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n    <!-- External link with label... -->\n    @if (type === 'href' && label) {\n        <a [attr.href]=\"href\" [color]=\"color\" [disabled]=\"disabled\" mat-raised-button target=\"_blank\">\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n            <span>{{ label }}</span>\n        </a>\n    }\n    <!-- ... and without label -->\n    @if (type === 'href' && !label) {\n        <a\n            [attr.href]=\"href\"\n            [color]=\"color\"\n            [disabled]=\"disabled\"\n            mat-icon-button\n            class=\"mat-elevation-z4\"\n            target=\"_blank\"\n        >\n            @if (icon) {\n                <mat-icon [naturalIcon]=\"icon\" />\n            }\n        </a>\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
@@ -10656,6 +10839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * in order to provide the avatar source.
  */
 class Source {
+    value;
     constructor(value) {
         this.value = value;
         this.value = value;
@@ -10953,27 +11137,25 @@ class Image extends Source {
  * Provides utilities methods related to Avatar component
  */
 class AvatarService {
-    constructor() {
-        /**
-         * Ordered pairs of possible sources. First in the list is the highest priority.
-         * And key must match one the input of AvatarComponent.
-         */
-        this.sourceCreators = new Map([
-            ['gravatar', Gravatar],
-            ['image', Image],
-            ['initials', Initials],
-        ]);
-        this.avatarColors = [
-            '#e37900', // 2.99 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=e37900
-            '#e6b102', // 2.26 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=c7ab00
-            '#00bbbb', // 2.37 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=00bbbb
-            '#008cff', // 3.38 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=008cff
-            '#d9138c', // 4.51 pass https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=d901b8
-            '#7321d1', // 4.28 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=c800ff
-            '#3b3b3b', // 11.2 pass https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=3b3b3b
-        ];
-        this.failedSources = new Map();
-    }
+    /**
+     * Ordered pairs of possible sources. First in the list is the highest priority.
+     * And key must match one the input of AvatarComponent.
+     */
+    sourceCreators = new Map([
+        ['gravatar', Gravatar],
+        ['image', Image],
+        ['initials', Initials],
+    ]);
+    avatarColors = [
+        '#e37900', // 2.99 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=e37900
+        '#e6b102', // 2.26 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=c7ab00
+        '#00bbbb', // 2.37 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=00bbbb
+        '#008cff', // 3.38 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=008cff
+        '#d9138c', // 4.51 pass https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=d901b8
+        '#7321d1', // 4.28 fail https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=c800ff
+        '#3b3b3b', // 11.2 pass https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=3b3b3b
+    ];
+    failedSources = new Map();
     getRandomColor(avatarText) {
         if (!avatarText) {
             return 'transparent';
@@ -10999,8 +11181,8 @@ class AvatarService {
             .map(letter => letter.charCodeAt(0))
             .reduce((previous, current) => previous + current);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: AvatarService, decorators: [{
             type: Injectable,
@@ -11013,21 +11195,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * Show an avatar from different sources
  */
 class NaturalAvatarComponent {
-    constructor() {
-        this.avatarService = inject(AvatarService);
-        this.size = 50;
-        this.decorated = true;
-        this.textSizeRatio = 2.25;
-        this.fgColor = '#FFF';
-        this.borderRadius = '';
-        this.textMaximumLength = 2;
-        this.avatarSrc = null;
-        this.avatarText = null;
-        this.avatarStyle = {};
-        this.hostStyle = {};
-        this.currentIndex = -1;
-        this.sources = [];
-    }
+    avatarService = inject(AvatarService);
+    image;
+    initials;
+    gravatar;
+    size = 50;
+    decorated = true;
+    textSizeRatio = 2.25;
+    bgColor;
+    fgColor = '#FFF';
+    borderRadius = '';
+    textMaximumLength = 2;
+    avatarSrc = null;
+    avatarText = null;
+    avatarStyle = {};
+    hostStyle = {};
+    currentIndex = -1;
+    sources = [];
     /**
      * Detect inputs change
      */
@@ -11130,8 +11314,8 @@ class NaturalAvatarComponent {
             height: this.size + 'px',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", decorated: "decorated", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, host: { properties: { "style.height.px": "this.size", "style.width.px": "this.size", "class.decorated": "this.decorated" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: NaturalAvatarComponent, isStandalone: true, selector: "natural-avatar", inputs: { image: "image", initials: "initials", gravatar: "gravatar", size: "size", decorated: "decorated", textSizeRatio: "textSizeRatio", bgColor: "bgColor", fgColor: "fgColor", borderRadius: "borderRadius", textMaximumLength: "textMaximumLength" }, host: { properties: { "style.height.px": "this.size", "style.width.px": "this.size", "class.decorated": "this.decorated" } }, usesOnChanges: true, ngImport: i0, template: `
         <div class="avatar-container" [ngStyle]="hostStyle">
             @if (avatarSrc) {
                 <img
@@ -11150,7 +11334,7 @@ class NaturalAvatarComponent {
                 </div>
             }
         </div>
-    `, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    `, isInline: true, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
             type: Component,
@@ -11215,13 +11399,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
  * @dynamic
  */
 class NaturalMatomoService {
+    router = inject(Router);
+    document = inject(DOCUMENT);
+    titleService = inject(Title);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    window;
+    subscription = null;
+    referrerUrl = '';
     constructor() {
-        this.router = inject(Router);
-        this.document = inject(DOCUMENT);
-        this.titleService = inject(Title);
-        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-        this.subscription = null;
-        this.referrerUrl = '';
         const window = this.document.defaultView;
         if (!window) {
             throw new Error('Could not init MatomoService `window` is undefined');
@@ -11289,8 +11474,8 @@ class NaturalMatomoService {
             this.referrerUrl = currentUrl;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalMatomoService, decorators: [{
             type: Injectable,
@@ -11315,12 +11500,12 @@ const NaturalLoggerConfigExtra = new InjectionToken('Class that may provide extr
  * ```
  */
 class NaturalErrorHandler extends ErrorHandler {
+    http = inject(HttpClient);
+    document = inject(DOCUMENT);
+    url = inject(NaturalLoggerConfigUrl, { optional: true });
+    loggerExtra = inject(NaturalLoggerConfigExtra, { optional: true });
     constructor() {
         super();
-        this.http = inject(HttpClient);
-        this.document = inject(DOCUMENT);
-        this.url = inject(NaturalLoggerConfigUrl, { optional: true });
-        this.loggerExtra = inject(NaturalLoggerConfigExtra, { optional: true });
     }
     handleError(error) {
         console.error(error);
@@ -11375,8 +11560,8 @@ class NaturalErrorHandler extends ErrorHandler {
                 .subscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalErrorHandler, decorators: [{
             type: Injectable,
@@ -11429,9 +11614,7 @@ function ensureHttpPrefix(value) {
  * This directive only supports ReactiveForms due to ngModel/ngControl encapsulation and changes emissions.
  */
 class NaturalHttpPrefixDirective {
-    constructor() {
-        this.naturalHttpPrefix = null;
-    }
+    naturalHttpPrefix = null;
     httpize($event) {
         if (this.naturalHttpPrefix) {
             const newValue = ensureHttpPrefix($event) || $event;
@@ -11440,8 +11623,8 @@ class NaturalHttpPrefixDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: "naturalHttpPrefix" }, host: { listeners: { "ngModelChange": "httpize($event)" } }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHttpPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: NaturalHttpPrefixDirective, isStandalone: true, selector: "[naturalHttpPrefix]", inputs: { naturalHttpPrefix: "naturalHttpPrefix" }, host: { listeners: { "ngModelChange": "httpize($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: NaturalHttpPrefixDirective, decorators: [{
             type: Directive,