@ecodev/natural 44.0.4 → 45.0.0

package/fesm2020/ecodev-natural.mjs

@@ -1,7 +1,7 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
 import { Directive, Component, Inject, Injectable, HostBinding, HostListener, InjectionToken, Input, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, Pipe, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Self, ContentChild, createEnvironmentInjector, createComponent, PLATFORM_ID, ErrorHandler } from '@angular/core';
-import { Subject, BehaviorSubject, of, timer, EMPTY, Observable, first as first$1, combineLatest, ReplaySubject, forkJoin, merge as merge$1, asyncScheduler, catchError } from 'rxjs';
+import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith, last, EMPTY, Observable, first as first$1, combineLatest, ReplaySubject, debounceTime as debounceTime$1, raceWith, take as take$1, mergeMap, shareReplay as shareReplay$1, catchError, forkJoin, map as map$1, merge as merge$1, tap as tap$1, asyncScheduler } from 'rxjs';
 import * as i3 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, UntypedFormControl, FormsModule, FormControl, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/router';
@@ -13,7 +13,7 @@ import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { switchMap, map, first, filter, finalize, takeUntil, take, tap, takeWhile, debounceTime, shareReplay, mergeMap, startWith, distinctUntilChanged, throttleTime } from 'rxjs/operators';
+import { switchMap, map, first, filter, finalize, takeUntil, take, tap, takeWhile, debounceTime, shareReplay, startWith, distinctUntilChanged, throttleTime } from 'rxjs/operators';
 import * as i7$2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { DataSource, SelectionModel } from '@angular/cdk/collections';
@@ -58,12 +58,13 @@ import * as i5$2 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
 import * as i8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i3$2 from '@angular/material/divider';
 import * as i6 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$2 from '@angular/flex-layout';
+import * as i3$3 from '@angular/flex-layout';
 import * as i9 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i3$3 from '@angular/material/sidenav';
+import * as i3$4 from '@angular/material/sidenav';
 import { MatSidenavContainer, MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import * as i1$8 from '@angular/common/http';
 import { HttpHeaders, HttpClientModule } from '@angular/common/http';
@@ -2345,51 +2346,50 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
         this.form.disable();
         this.service
             .create(this.data.model)
-            .pipe(finalize(() => this.form.enable()))
-            .subscribe(model => {
+            .pipe(switchMap$1(model => {
             this.alertService.info($localize `Créé`);
             this.form.patchValue(model);
-            this.postCreate(model).subscribe({
-                complete: () => {
-                    if (redirect) {
-                        if (this.isPanel) {
-                            const oldUrl = this.router.url;
-                            const nextUrl = this.panelData?.config.params.nextRoute;
-                            const newUrl = oldUrl.replace('/new', '/' + model.id) + (nextUrl ? '/' + nextUrl : '');
-                            this.router.navigateByUrl(newUrl); // replace /new by /123
-                        }
-                        else {
-                            this.router.navigate(['..', model.id], { relativeTo: this.route });
-                        }
-                    }
-                },
-            });
-        });
+            return this.postCreate(model).pipe(endWith(model), last());
+        }), switchMap$1(model => {
+            if (redirect) {
+                if (this.isPanel) {
+                    const oldUrl = this.router.url;
+                    const nextUrl = this.panelData?.config.params.nextRoute;
+                    const newUrl = oldUrl.replace('/new', '/' + model.id) + (nextUrl ? '/' + nextUrl : '');
+                    return this.router.navigateByUrl(newUrl); // replace /new by /123
+                }
+                else {
+                    return this.router.navigate(['..', model.id], { relativeTo: this.route });
+                }
+            }
+            return EMPTY;
+        }), finalize(() => this.form.enable()))
+            .subscribe();
     }
     delete(redirectionRoute) {
+        this.form.disable();
         this.alertService
             .confirm($localize `Suppression`, $localize `Voulez-vous supprimer définitivement cet élément ?`, $localize `Supprimer définitivement`)
-            .subscribe(confirmed => {
-            if (confirmed) {
-                this.preDelete(this.data.model);
-                this.form.disable();
-                this.service
-                    .delete([this.data.model])
-                    .pipe(finalize(() => this.form.enable()))
-                    .subscribe(() => {
-                    this.alertService.info($localize `Supprimé`);
-                    if (!this.isPanel) {
-                        const defaultRoute = ['../../' + kebabCase(this.key)];
-                        this.router.navigate(redirectionRoute ? redirectionRoute : defaultRoute, {
-                            relativeTo: this.route,
-                        });
-                    }
-                    else {
-                        this.panelService?.goToPenultimatePanel();
-                    }
-                });
+            .pipe(switchMap$1(confirmed => {
+            if (!confirmed) {
+                return EMPTY;
             }
-        });
+            this.preDelete(this.data.model);
+            return this.service.delete([this.data.model]).pipe(switchMap$1(() => {
+                this.alertService.info($localize `Supprimé`);
+                if (this.isPanel) {
+                    this.panelService?.goToPenultimatePanel();
+                    return EMPTY;
+                }
+                else {
+                    const defaultRoute = ['../../' + kebabCase(this.key)];
+                    return this.router.navigate(redirectionRoute ? redirectionRoute : defaultRoute, {
+                        relativeTo: this.route,
+                    });
+                }
+            }));
+        }), finalize(() => this.form.enable()))
+            .subscribe();
     }
     postUpdate(model) { }
     /**
@@ -3552,6 +3552,7 @@ function cancellableTimeout(canceller, milliSeconds = 0) {
 function debug(debugName) {
     return tap({
         subscribe: () => console.log('SUBSCRIBE', debugName),
+        unsubscribe: () => console.log('UNSUBSCRIBE', debugName),
         next: value => console.log('NEXT', debugName, value),
         error: error => console.log('ERROR', debugName, error),
         complete: () => console.log('COMPLETE', debugName),
@@ -3559,18 +3560,15 @@ function debug(debugName) {
 }
 
 class NaturalAbstractModelService {
-    constructor(apollo, name, oneQuery, allQuery, createMutation, updateMutation, deleteMutation) {
+    constructor(apollo, naturalDebounceService, name, oneQuery, allQuery, createMutation, updateMutation, deleteMutation) {
         this.apollo = apollo;
+        this.naturalDebounceService = naturalDebounceService;
         this.name = name;
         this.oneQuery = oneQuery;
         this.allQuery = allQuery;
         this.createMutation = createMutation;
         this.updateMutation = updateMutation;
         this.deleteMutation = deleteMutation;
-        /**
-         * Stores the debounced update function
-         */
-        this.debouncedUpdateCache = new Map();
         /**
          * Store the creation mutations that are pending
          */
@@ -3802,36 +3800,7 @@ class NaturalAbstractModelService {
         this.throwIfNotQuery(this.updateMutation);
         // Keep a single instance of the debounced update function
         const id = object.id;
-        let debounced = this.debouncedUpdateCache.get(id);
-        if (!debounced) {
-            const source = new ReplaySubject(1);
-            let wasCancelled = false;
-            const canceller = new Subject();
-            canceller.subscribe(() => {
-                wasCancelled = true;
-                source.complete();
-                canceller.complete();
-            });
-            // Create debounced update function
-            const result = source.pipe(debounceTime(2000), // Wait 2sec.
-            take(1), mergeMap(() => {
-                this.debouncedUpdateCache.delete(id);
-                if (wasCancelled) {
-                    return EMPTY;
-                }
-                return this.updateNow(object);
-            }), shareReplay());
-            debounced = {
-                source,
-                canceller,
-                result,
-            };
-            this.debouncedUpdateCache.set(id, debounced);
-        }
-        // Notify our debounced update each time we ask to update
-        debounced.source.next();
-        // Return and observable that is updated when mutation is done
-        return debounced.result;
+        return this.naturalDebounceService.debounce(this, id, this.updateNow(object));
     }
     /**
      * Update an object immediately when subscribing
@@ -3883,8 +3852,7 @@ class NaturalAbstractModelService {
         this.throwIfNotQuery(this.deleteMutation);
         const ids = objects.map(o => {
             // Cancel pending update
-            const debounced = this.debouncedUpdateCache.get(o.id);
-            debounced?.canceller.next();
+            this.naturalDebounceService.cancel(this, o.id);
             return o.id;
         });
         const variables = merge({
@@ -4065,6 +4033,131 @@ class NaturalAbstractModelService {
     }
 }
 
+/**
+ * Debounce subscriptions to observable, with possibility to cancel one, or flush all of them. Typically,
+ * observables are object updates, so `NaturalAbstractModelService.updateNow()`.
+ *
+ * `key` must be an instance of `NaturalAbstractModelService` to separate objects by their types. So User with ID 1 is
+ * not confused with Product with ID 1. It has no other purpose.
+ *
+ * `id` should be the ID of the object that will be updated.
+ */
+class NaturalDebounceService {
+    constructor() {
+        this.flusher = new Subject();
+        /**
+         * Stores the debounced update function
+         */
+        this.allDebouncedUpdateCache = new Map();
+    }
+    /**
+     * Debounce the given source observable for a short time. If called multiple times with the same key and id,
+     * it will postpone the subscription to the source observable.
+     *
+     * Giving the same key and id but a different source observable will replace the original observable, but
+     * keep the same debouncing timeline.
+     */
+    debounce(key, id, source) {
+        const debouncedUpdateCache = this.getMap(key);
+        let debounced = debouncedUpdateCache.get(id);
+        if (debounced) {
+            debounced.source = source;
+        }
+        else {
+            const debouncer = new ReplaySubject(1);
+            let wasCancelled = false;
+            const canceller = new Subject();
+            canceller.subscribe(() => {
+                wasCancelled = true;
+                debouncer.complete();
+                canceller.complete();
+                this.delete(key, id);
+            });
+            debounced = {
+                debouncer,
+                canceller,
+                source,
+                result: debouncer.pipe(debounceTime$1(2000), // Wait 2 seconds...
+                raceWith(this.flusher), // ...unless flusher is triggered
+                take$1(1), mergeMap(() => {
+                    this.delete(key, id);
+                    if (wasCancelled || !debounced) {
+                        return EMPTY;
+                    }
+                    return debounced.source;
+                }), shareReplay$1()),
+            };
+            debouncedUpdateCache.set(id, debounced);
+        }
+        // Notify our debounced update each time we ask to update
+        debounced.debouncer.next();
+        // Return and observable that is updated when mutation is done
+        return debounced.result;
+    }
+    cancel(key, id) {
+        const debounced = this.allDebouncedUpdateCache.get(key)?.get(id);
+        debounced?.canceller.next();
+    }
+    /**
+     * Immediately execute all pending updates.
+     *
+     * It should typically be called before login out.
+     *
+     * The returned observable will complete when all updates complete, even if some of them error.
+     */
+    flush() {
+        const all = [];
+        this.allDebouncedUpdateCache.forEach(map => map.forEach(debounced => {
+            all.push(debounced.result.pipe(catchError(() => of(undefined))));
+        }));
+        if (!all.length) {
+            all.push(of(undefined));
+        }
+        return new Observable(subscriber => {
+            const subscription = forkJoin(all)
+                .pipe(map$1(() => undefined))
+                .subscribe(subscriber);
+            // Flush only after subscription process is finished
+            this.flusher.next();
+            return subscription;
+        });
+    }
+    /**
+     * Count of pending updates
+     */
+    get count() {
+        let count = 0;
+        this.allDebouncedUpdateCache.forEach(map => (count += map.size));
+        return count;
+    }
+    getMap(key) {
+        let debouncedUpdateCache = this.allDebouncedUpdateCache.get(key);
+        if (!debouncedUpdateCache) {
+            debouncedUpdateCache = new Map();
+            this.allDebouncedUpdateCache.set(key, debouncedUpdateCache);
+        }
+        return debouncedUpdateCache;
+    }
+    delete(key, id) {
+        const map = this.allDebouncedUpdateCache.get(key);
+        if (!map) {
+            return;
+        }
+        map.delete(id);
+        if (!map.size) {
+            this.allDebouncedUpdateCache.delete(key);
+        }
+    }
+}
+NaturalDebounceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDebounceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalDebounceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDebounceService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDebounceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 const enumTypeQuery = gql `
     query EnumType($name: String!) {
         __type(name: $name) {
@@ -4272,6 +4365,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.Apollo }]; } });
 
+const patterns = [
+    /^(?<day>\d{1,2})\.(?<month>\d{1,2})\.(?<year>\d{4}|\d{2})$/,
+    /^(?<day>\d{1,2})-(?<month>\d{1,2})-(?<year>\d{4}|\d{2})$/,
+    /^(?<day>\d{1,2})\/(?<month>\d{1,2})\/(?<year>\d{4}|\d{2})$/,
+    /^(?<day>\d{1,2})\\(?<month>\d{1,2})\\(?<year>\d{4}|\d{2})$/,
+    // strict ISO format
+    /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/,
+];
 class NaturalSwissParsingDateAdapter extends NativeDateAdapter {
     /**
      * Parse commonly accepted swiss format, such as:
@@ -4285,24 +4386,24 @@ class NaturalSwissParsingDateAdapter extends NativeDateAdapter {
             return new Date(value);
         }
         if (typeof value === 'string') {
-            let m = value.match(/(\d{1,2})\.(\d{1,2})\.(\d{4}|\d{2})/);
-            if (m) {
-                let year = +m[3];
-                // Assume year 2000 if only two digits
-                if (year < 100) {
-                    year += 2000;
+            const trimmed = value.trim();
+            for (const pattern of patterns) {
+                const m = trimmed.match(pattern);
+                if (m?.groups) {
+                    const year = +m.groups.year;
+                    const month = +m.groups.month;
+                    const day = +m.groups.day;
+                    return this.createDateIfValid(year, month, day);
                 }
-                return this.createDateIfValid(year, +m[2], +m[1]);
-            }
-            // Attempt strict ISO format
-            m = value.match(/(\d{4})-(\d{2})-(\d{2})/);
-            if (m) {
-                return this.createDateIfValid(+m[1], +m[2], +m[3]);
             }
         }
         return null;
     }
     createDateIfValid(year, month, date) {
+        // Assume year 2000 if only two digits
+        if (year < 100) {
+            year += 2000;
+        }
         month = month - 1;
         if (month >= 0 && month <= 11 && date >= 1 && date <= 31) {
             return this.createDate(year, month, date);
@@ -5947,10 +6048,10 @@ class NaturalSelectComponent extends AbstractSelect {
     }
 }
 NaturalSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectComponent, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</div\n    >\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"touch(); blur.emit()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"!loading && showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"21\"\n        [strokeWidth]=\"5\"\n        matPrefix\n        mode=\"indeterminate\"\n    ></mat-progress-spinner>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] });
+NaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectComponent, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</div\n    >\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"touch(); blur.emit()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"!loading && showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"21\"\n        [strokeWidth]=\"5\"\n        matPrefix\n        mode=\"indeterminate\"\n    ></mat-progress-spinner>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (click)=\"$event.stopPropagation()\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select', template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</div\n    >\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"touch(); blur.emit()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"!loading && showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"21\"\n        [strokeWidth]=\"5\"\n        matPrefix\n        mode=\"indeterminate\"\n    ></mat-progress-spinner>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
+            args: [{ selector: 'natural-select', template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n    [displayWith]=\"getDisplayFn()\"\n    panelWidth=\"auto !important\"\n>\n    <mat-option *ngFor=\"let item of items | async\" [value]=\"item\">\n        <ng-template\n            [ngTemplateOutletContext]=\"{item: item}\"\n            [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n        ></ng-template>\n    </mat-option>\n    <div *ngIf=\"moreNbItems > 0\" class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n        >{{ moreNbItems }} \u00E9l\u00E9ment(s) suppl\u00E9mentaire(s)</div\n    >\n</mat-autocomplete>\n\n<ng-template #defaultACItem let-item=\"item\">\n    <span>{{ getDisplayFn()(item) }}</span>\n</ng-template>\n\n<!-- Input for autocomplete -->\n<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <input\n        (blur)=\"touch(); blur.emit()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger.openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [errorStateMatcher]=\"matcher\"\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"!loading && showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"21\"\n        [strokeWidth]=\"5\"\n        matPrefix\n        mode=\"indeterminate\"\n    ></mat-progress-spinner>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (click)=\"$event.stopPropagation()\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!-- Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
         }], propDecorators: { autoTrigger: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
@@ -6787,10 +6888,10 @@ class NaturalGroupComponent {
     }
 }
 NaturalGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalGroupComponent, selector: "natural-group", inputs: { placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:none;display:inline-flex;margin-right:10px}:host natural-input:last-of-type{flex:1;margin-right:0;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets"], outputs: ["selectionChange", "cleared"] }] });
+NaturalGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalGroupComponent, selector: "natural-group", inputs: { placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets"], outputs: ["selectionChange", "cleared"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-group', template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:none;display:inline-flex;margin-right:10px}:host natural-input:last-of-type{flex:1;margin-right:0;min-width:250px}\n"] }]
+            args: [{ selector: 'natural-group', template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
         }], propDecorators: { newValueInput: [{
                 type: ViewChild,
                 args: ['newValueInput']
@@ -6859,10 +6960,10 @@ class NaturalSearchComponent {
     }
 }
 NaturalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSearchComponent, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <div *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\" class=\"groupWrapper\">\n            <natural-group\n                (selectionChange)=\"updateGroup($event, i)\"\n                [facets]=\"facets\"\n                [placeholder]=\"placeholder\"\n                [selections]=\"groupSelections\"\n            ></natural-group>\n\n            <div class=\"endOfRowButton\">\n                <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                    <natural-icon name=\"remove\"></natural-icon>\n                </button>\n            </div>\n\n            <div class=\"endOfRowButton\">\n                <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                    <natural-icon name=\"add\"></natural-icon>\n                </button>\n            </div>\n\n            <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n            <div *ngIf=\"!last\" class=\"spacer\"></div>\n        </div>\n    </div>\n\n    <div class=\"endOfRowButton\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px}:host .natural-search .groupWrapper natural-group{flex:1}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["placeholder", "facets", "selections"], outputs: ["selectionChange"] }] });
+NaturalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSearchComponent, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                        <natural-icon name=\"remove\"></natural-icon>\n                    </button>\n                </div>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                        <natural-icon name=\"add\"></natural-icon>\n                    </button>\n                </div>\n\n                <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n                <div *ngIf=\"!last\" class=\"spacer\"></div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton outOfGroup\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1;min-width:0}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}:host .natural-search .groupWrapper natural-group{flex:1;max-width:100%}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:10px}:host .natural-search mat-divider{margin:-10px 10px 10px 0}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["placeholder", "facets", "selections"], outputs: ["selectionChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-search', template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <div *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\" class=\"groupWrapper\">\n            <natural-group\n                (selectionChange)=\"updateGroup($event, i)\"\n                [facets]=\"facets\"\n                [placeholder]=\"placeholder\"\n                [selections]=\"groupSelections\"\n            ></natural-group>\n\n            <div class=\"endOfRowButton\">\n                <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                    <natural-icon name=\"remove\"></natural-icon>\n                </button>\n            </div>\n\n            <div class=\"endOfRowButton\">\n                <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                    <natural-icon name=\"add\"></natural-icon>\n                </button>\n            </div>\n\n            <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n            <div *ngIf=\"!last\" class=\"spacer\"></div>\n        </div>\n    </div>\n\n    <div class=\"endOfRowButton\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px}:host .natural-search .groupWrapper natural-group{flex:1}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center}\n"] }]
+            args: [{ selector: 'natural-search', template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                        <natural-icon name=\"remove\"></natural-icon>\n                    </button>\n                </div>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                        <natural-icon name=\"add\"></natural-icon>\n                    </button>\n                </div>\n\n                <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n                <div *ngIf=\"!last\" class=\"spacer\"></div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton outOfGroup\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1;min-width:0}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}:host .natural-search .groupWrapper natural-group{flex:1;max-width:100%}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:10px}:host .natural-search mat-divider{margin:-10px 10px 10px 0}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], facets: [{
@@ -7821,10 +7922,10 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
     }
 }
 NaturalSelectHierarchicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [{ token: NaturalHierarchicSelectorDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NaturalSelectHierarchicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectHierarchicComponent, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\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    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+NaturalSelectHierarchicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectHierarchicComponent, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\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    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (click)=\"$event.stopPropagation()\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-select-hierarchic', template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\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    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
+            args: [{ selector: 'natural-select-hierarchic', template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\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    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (click)=\"$event.stopPropagation()\"\n            mat-button\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"Naviguer vers\"\n        >\n            <natural-icon name=\"open_in_browser\"></natural-icon>\n        </button>\n    </div>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error>\n</mat-form-field>\n\n<!--    Additional (un)select/(un)link buttons for more visual cohesion with natural-relations --><!-- [clearLabel] and/or [selectLabel] has to be given as attribute input -->\n<div *ngIf=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: NaturalHierarchicSelectorDialogService }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -8068,6 +8169,17 @@ function createFileInput(document) {
     fileElem.type = 'file';
     return fileElem;
 }
+function isDirectory(file) {
+    return file
+        .slice(0, 1)
+        .text()
+        .then(text => {
+        // Firefox will return empty string for a folder, so we must check that special case.
+        // That means that any empty file will incorrectly be interpreted as a folder on all
+        // browsers, but that's tolerable because there is no real use-case to upload an empty file.
+        return text !== '';
+    }, () => false);
+}
 function stopEvent(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -8163,10 +8275,6 @@ class NaturalAbstractFile extends NaturalAbstractController {
         this.element = element;
         this.naturalFileService = naturalFileService;
         this.document = document;
-        this.validators = [
-            { name: 'accept', fn: this.acceptValidator },
-            { name: 'fileSize', fn: this.fileSizeValidator },
-        ];
         /**
          * Whether we should accept a single file or multiple files
          */
@@ -8263,8 +8371,7 @@ class NaturalAbstractFile extends NaturalAbstractController {
             valid: [],
             invalid: [],
         };
-        for (const file of files) {
-            const error = this.validate(file);
+        forkJoin(files.map(file => this.validate(file).pipe(tap$1(error => {
             if (error) {
                 selection.invalid.push({
                     file: file,
@@ -8274,17 +8381,18 @@ class NaturalAbstractFile extends NaturalAbstractController {
             else {
                 selection.valid.push(file);
             }
-        }
-        if (selection.valid.length) {
-            this.fileChange.emit(selection.valid[0]);
-        }
-        if (selection.valid.length || selection.invalid.length) {
-            this.filesChange.emit(selection);
-            if (this.broadcast) {
-                this.naturalFileService.filesChanged.next(selection);
+        })))).subscribe(() => {
+            if (selection.valid.length) {
+                this.fileChange.emit(selection.valid[0]);
             }
-        }
-        this.getFileElement().value = '';
+            if (selection.valid.length || selection.invalid.length) {
+                this.filesChange.emit(selection);
+                if (this.broadcast) {
+                    this.naturalFileService.filesChanged.next(selection);
+                }
+            }
+            this.getFileElement().value = '';
+        });
     }
     /**
      * Called when input has files
@@ -8331,18 +8439,18 @@ class NaturalAbstractFile extends NaturalAbstractController {
         this.handleFiles(files);
     }
     validate(file) {
-        for (const validator of this.validators) {
-            if (!validator.fn.call(this, file)) {
-                return validator.name;
+        return forkJoin({
+            accept: of(acceptType(this.accept, file.type, file.name)),
+            fileSize: of(!(this.maxSize && file.size > this.maxSize)),
+            directory: isDirectory(file),
+        }).pipe(map$1(result => {
+            for (const [key, value] of Object.entries(result)) {
+                if (!value) {
+                    return key;
+                }
             }
-        }
-        return null;
-    }
-    acceptValidator(item) {
-        return acceptType(this.accept, item.type, item.name);
-    }
-    fileSizeValidator(item) {
-        return !(this.maxSize && item.size > this.maxSize);
+            return null;
+        }));
     }
 }
 NaturalAbstractFile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalAbstractFile, deps: [{ token: i0.ElementRef }, { token: NaturalFileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
@@ -8694,9 +8802,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  */
 
 class NaturalFixedButtonDetailComponent {
-    constructor() {
+    constructor(route) {
+        this.canChange = true;
+        this.isCreation = false;
         this.create = new EventEmitter();
         this.delete = new EventEmitter();
+        route.params.subscribe(() => (this.canChange = true));
+    }
+    get model() {
+        return this._model;
+    }
+    set model(value) {
+        this._model = value;
+        if (this.canChange) {
+            this.isCreation = !this._model.id;
+        }
     }
     clickCreate() {
         if (this.form.enabled) {
@@ -8709,12 +8829,12 @@ class NaturalFixedButtonDetailComponent {
         }
     }
 }
-NaturalFixedButtonDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalFixedButtonDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"!model.id\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"model.id && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NaturalFixedButtonDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [{ token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+NaturalFixedButtonDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-fixed-button-detail', template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"!model.id\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"model.id && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n" }]
-        }], propDecorators: { model: [{
+            args: [{ selector: 'natural-fixed-button-detail', template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n" }]
+        }], ctorParameters: function () { return [{ type: i2$1.ActivatedRoute }]; }, propDecorators: { model: [{
                 type: Input
             }], form: [{
                 type: Input
@@ -9130,7 +9250,7 @@ class NaturalPanelsService {
  * And we cannot make it non-static, because `UrlMatcher` cannot be injected.
  */
 NaturalPanelsService._opened = false;
-NaturalPanelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPanelsService, deps: [{ token: i2$1.Router }, { token: i1.MatDialog }, { token: i0.Injector }, { token: PanelsHooksConfig }, { token: i3$2.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalPanelsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPanelsService, deps: [{ token: i2$1.Router }, { token: i1.MatDialog }, { token: i0.Injector }, { token: PanelsHooksConfig }, { token: i3$3.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable });
 NaturalPanelsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPanelsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPanelsService, decorators: [{
             type: Injectable,
@@ -9140,7 +9260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
         }], ctorParameters: function () { return [{ type: i2$1.Router }, { type: i1.MatDialog }, { type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PanelsHooksConfig]
-                }] }, { type: i3$2.MediaObserver }]; } });
+                }] }, { type: i3$3.MediaObserver }]; } });
 
 class NaturalPanelsComponent {
     // PanelsComponent is kind of a "ghost" component to respond to an url matcher in route config,
@@ -9724,12 +9844,12 @@ class NaturalSidenavService extends NaturalAbstractController {
         }
     }
 }
-NaturalSidenavService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavService, deps: [{ token: i3$2.MediaObserver }, { token: i2$1.Router }, { token: SESSION_STORAGE }, { token: NaturalSidenavStackService }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalSidenavService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavService, deps: [{ token: i3$3.MediaObserver }, { token: i2$1.Router }, { token: SESSION_STORAGE }, { token: NaturalSidenavStackService }], target: i0.ɵɵFactoryTarget.Injectable });
 NaturalSidenavService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i3$2.MediaObserver }, { type: i2$1.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i3$3.MediaObserver }, { type: i2$1.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SESSION_STORAGE]
                 }] }, { type: NaturalSidenavStackService }]; } });
@@ -9788,7 +9908,7 @@ class NaturalSidenavContainerComponent {
     }
 }
 NaturalSidenavContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalSidenavContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSidenavContainerComponent, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuContainer", first: true, predicate: MatSidenavContainer, descendants: true, static: true }, { propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-content>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$3.MatSidenavContent, selector: "mat-sidenav-content" }] });
+NaturalSidenavContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSidenavContainerComponent, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuContainer", first: true, predicate: MatSidenavContainer, descendants: true, static: true }, { propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-content>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.MatSidenavContent, selector: "mat-sidenav-content" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-content>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
@@ -10841,5 +10961,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarService, FileComponent, IconsConfigService, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_SEO_CONFIG, NaturalAbstractController, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertModule, NaturalAlertService, NaturalAvatarModule, NaturalCapitalizePipe, NaturalColumnsPickerColumnDirective, NaturalColumnsPickerComponent, NaturalColumnsPickerModule, NaturalCommonModule, NaturalConfirmComponent, NaturalDataSource, NaturalDetailHeaderComponent, NaturalDetailHeaderModule, NaturalDialogTriggerComponent, NaturalDialogTriggerModule, NaturalDropdownComponentsModule, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorModule, NaturalFileDropDirective, NaturalFileModule, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalFixedButtonDetailModule, NaturalFixedButtonModule, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorModule, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconComponent, NaturalIconModule, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoModule, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsModule, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalRelationsModule, NaturalSearchComponent, NaturalSearchModule, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSelectModule, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavModule, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalStampModule, NaturalSwissDatePipe, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTableButtonModule, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeSelectComponent, TypeTextComponent, available, cancellableTimeout, cleanSameValues, collectErrors, copyToClipboard, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, hasFilesAndProcessDate, ifValid, integer, localStorageFactory, localStorageProvider, lowerCaseFirstLetter, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, wrapLike };
+export { AvatarComponent, AvatarService, FileComponent, IconsConfigService, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_SEO_CONFIG, NaturalAbstractController, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertModule, NaturalAlertService, NaturalAvatarModule, NaturalCapitalizePipe, NaturalColumnsPickerColumnDirective, NaturalColumnsPickerComponent, NaturalColumnsPickerModule, NaturalCommonModule, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDetailHeaderModule, NaturalDialogTriggerComponent, NaturalDialogTriggerModule, NaturalDropdownComponentsModule, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorModule, NaturalFileDropDirective, NaturalFileModule, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalFixedButtonDetailModule, NaturalFixedButtonModule, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorModule, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconComponent, NaturalIconModule, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoModule, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsModule, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalRelationsModule, NaturalSearchComponent, NaturalSearchModule, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSelectModule, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavModule, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalStampModule, NaturalSwissDatePipe, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTableButtonModule, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeSelectComponent, TypeTextComponent, available, cancellableTimeout, cleanSameValues, collectErrors, copyToClipboard, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, hasFilesAndProcessDate, ifValid, integer, localStorageFactory, localStorageProvider, lowerCaseFirstLetter, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, sessionStorageFactory, sessionStorageProvider, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, urlValidator, validTlds, validateAllFormControls, wrapLike };
 //# sourceMappingURL=ecodev-natural.mjs.map