@ecodev/natural 37.1.0 → 40.0.0

package/fesm2015/ecodev-natural.js

@@ -10,7 +10,7 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { switchMap, map, first, filter, finalize, takeUntil, take, takeWhile, debounceTime, tap, shareReplay, mergeMap, startWith, distinctUntilChanged, throttleTime } from 'rxjs/operators';
+import { switchMap, map, first, filter, finalize, takeUntil, take, tap, takeWhile, debounceTime, shareReplay, mergeMap, startWith, distinctUntilChanged, throttleTime } from 'rxjs/operators';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { DataSource, SelectionModel } from '@angular/cdk/collections';
 import * as i1$2 from 'apollo-angular';
@@ -87,7 +87,7 @@ class NaturalConfirmComponent {
 NaturalConfirmComponent.decorators = [
     { type: Component, args: [{
                 template: "<h2 mat-dialog-title>{{ data.title }}</h2>\n<mat-dialog-content\n    ><p class=\"mat-body\">{{ data.message }}</p></mat-dialog-content\n>\n<mat-dialog-actions>\n    <button [mat-dialog-close]=\"false\" mat-button>{{ data.cancelText }}</button>\n    <button [mat-dialog-close]=\"true\" mat-stroked-button cdkFocusInitial>{{ data.confirmText }}</button>\n</mat-dialog-actions>\n",
-                styles: ["mat-dialog-content{max-width:40em}mat-dialog-actions{display:flex;justify-content:flex-end}mat-dialog-actions>*{margin-left:10px}"]
+                styles: ["mat-dialog-content{max-width:40em}mat-dialog-actions{display:flex;justify-content:flex-end}mat-dialog-actions>*{margin-left:10px}\n"]
             },] }
 ];
 NaturalConfirmComponent.ctorParameters = () => [
@@ -2073,6 +2073,20 @@ function unique(fieldName, excludedId, modelService) {
         return timer(500).pipe(switchMap(() => modelService.count(qvm).pipe(map(count => (count > 0 ? { duplicateValue: count } : null)))));
     };
 }
+/**
+ * Returns an async validator function that checks that the form control value is available
+ *
+ * Similar to `unique` validator, but allows to use a custom query for when the client does
+ * not have permissions for `modelService.count()`.
+ */
+function available(getAvailableQuery, excludedId = null) {
+    return (control) => {
+        if (!control.value || !control.dirty) {
+            return of(null);
+        }
+        return timer(500).pipe(switchMap(() => getAvailableQuery(control.value, excludedId).pipe(map(isAvailable => (isAvailable ? null : { available: true })))));
+    };
+}
 /**
  * Return all errors recursively for the given Form or control
  */
@@ -2927,7 +2941,7 @@ function unwrapNavigable(item) {
  * Components inheriting from this class can be used as standalone with input attributes.
  *
  * Usage :
- * <natural-my-listing [forcedVariables]="{filter:...}" [initialColumns]="['col1']" [persistSearch]="false">
+ * <natural-my-listing [forcedVariables]="{filter:...}" [selectedColumns]="['col1']" [persistSearch]="false">
  */
 // @dynamic
 class NaturalAbstractList extends NaturalAbstractPanel {
@@ -2942,7 +2956,7 @@ class NaturalAbstractList extends NaturalAbstractPanel {
         /**
          * Columns list after interaction with <natural-columns-picker>
          */
-        this._selectedColumns = [];
+        this.columnsForTable = [];
         /**
          * The default column selection that automatically happened after <natural-columns-picker> initialization
          */
@@ -3007,11 +3021,13 @@ class NaturalAbstractList extends NaturalAbstractPanel {
     /**
      * Persist search and then launch whatever is required to refresh the list
      */
-    search(naturalSearchSelections, navigationExtras) {
+    search(naturalSearchSelections, navigationExtras, resetPagination = true) {
         // Reset page index to restart the pagination (preserve pageSize)
-        this.variablesManager.merge('pagination', {
-            pagination: pick(this.defaultPagination, ['offset', 'pageIndex']),
-        });
+        if (resetPagination) {
+            this.variablesManager.merge('pagination', {
+                pagination: pick(this.defaultPagination, ['offset', 'pageIndex']),
+            });
+        }
         // Persist if activated
         // Two parallel navigations conflict. We first persist the search, then the pagination
         if (this.persistSearch && !this.isPanel) {
@@ -3183,7 +3199,7 @@ class NaturalAbstractList extends NaturalAbstractPanel {
      * Uses data provided by router such as:
      *
      * - `route.data.forcedVariables`
-     * - `route.data.initialColumns`
+     * - `route.data.selectedColumns`
      */
     initFromRoute() {
         // Variables
@@ -3191,8 +3207,8 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             this.applyForcedVariables(this.route.snapshot.data.forcedVariables);
         }
         // Columns
-        if (this.route.snapshot.data.initialColumns) {
-            this.initialColumns = this.route.snapshot.data.initialColumns;
+        if (this.route.snapshot.data.selectedColumns) {
+            this.selectedColumns = this.route.snapshot.data.selectedColumns;
         }
     }
     getDataObservable() {
@@ -3218,6 +3234,11 @@ class NaturalAbstractList extends NaturalAbstractPanel {
         if (sorting) {
             this.variablesManager.set('sorting', { sorting });
         }
+        // Columns
+        const persistedColumns = this.persistenceService.get('col', this.route, storageKey);
+        if (typeof persistedColumns === 'string') {
+            this.selectedColumns = persistedColumns.split(',');
+        }
         // Natural search : ns
         this.naturalSearchSelections = fromUrl(this.persistenceService.get('ns', this.route, storageKey));
         this.translateSearchAndRefreshList(this.naturalSearchSelections, true);
@@ -3273,23 +3294,14 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             this.variablesManager.set('sorting', { sorting: variables.sorting });
         }
     }
-    get selectedColumns() {
-        return this._selectedColumns;
-    }
-    set selectedColumns(columns) {
-        this._selectedColumns = columns;
+    selectColumns(columns) {
+        this.columnsForTable = columns;
         if (!this.persistSearch || this.isPanel) {
             return;
         }
         // The first selection we receive is the default one made by <natural-columns-picker>
         if (!this.defaultSelectedColumns) {
             this.defaultSelectedColumns = columns;
-            // Now that we know the defaults, we can try to reload from persistence
-            const storageKey = this.getStorageKey();
-            const persistedColumns = this.persistenceService.get('col', this.route, storageKey);
-            if (typeof persistedColumns === 'string') {
-                this.selectedColumns = persistedColumns.split(',');
-            }
         }
         else {
             // Persist only if wanted columns are different from default selection
@@ -3307,7 +3319,7 @@ NaturalAbstractList.ctorParameters = () => [
 ];
 NaturalAbstractList.propDecorators = {
     persistSearch: [{ type: Input }],
-    initialColumns: [{ type: Input }],
+    selectedColumns: [{ type: Input }],
     forcedVariables: [{ type: Input }]
 };
 
@@ -3325,6 +3337,7 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
          * Name of filter for child items to access ancestor item
          */
         this.ancestorRelationName = 'parent';
+        this.oldAncertorId = null;
         this.breadcrumbs = [];
     }
     ngOnInit() {
@@ -3333,27 +3346,30 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
         // "na" is a trailing param, and should be considered only when there is no search
         this.route.params.subscribe(params => {
             // "ns" stands for natural-search to be shorter in url
-            if (!params['ns']) {
-                let navigationConditionValue = null;
-                // "na" stands for "navigation" (relation) in url
-                if (params['na']) {
-                    navigationConditionValue = { have: { values: [params['na']] } };
-                    this.service.getOne(params['na']).subscribe(
-                    // TODO casting should disappear and instead this class should enforce
-                    // the service to support Tone with a new generic
-                    (ancestor) => (this.breadcrumbs = this.getBreadcrumb(ancestor)));
-                    this.clearSearch();
-                }
-                else {
-                    navigationConditionValue = { empty: {} };
-                    this.breadcrumbs = [];
-                }
-                const condition = {};
-                condition[this.ancestorRelationName] = navigationConditionValue;
-                const variables = { filter: { groups: [{ conditions: [condition] }] } };
-                // todo : check why without "as Vall" it errors. Vall is supposed to be QueryVariables, and filter too.
-                this.variablesManager.set('navigation', variables);
+            if (params['ns']) {
+                return;
+            }
+            let navigationConditionValue = null;
+            // "na" stands for "navigation" (relation) in url
+            if (params['na']) {
+                navigationConditionValue = { have: { values: [params['na']] } };
+                this.service.getOne(params['na']).subscribe(
+                // TODO casting should disappear and instead this class should enforce
+                // the service to support Tone with a new generic
+                (ancestor) => (this.breadcrumbs = this.getBreadcrumb(ancestor)));
+                const hasAncestorChanged = params['na'] !== this.oldAncertorId;
+                this.oldAncertorId = params['na'];
+                this.clearSearch(hasAncestorChanged);
+            }
+            else {
+                navigationConditionValue = { empty: {} };
+                this.breadcrumbs = [];
             }
+            const condition = {};
+            condition[this.ancestorRelationName] = navigationConditionValue;
+            const variables = { filter: { groups: [{ conditions: [condition] }] } };
+            // todo : check why without "as Vall" it errors. Vall is supposed to be QueryVariables, and filter too.
+            this.variablesManager.set('navigation', variables);
         });
         super.ngOnInit();
     }
@@ -3385,11 +3401,16 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
         }
         super.translateSearchAndRefreshList(naturalSearchSelections);
     }
-    clearSearch() {
+    clearSearch(resetPagination = true) {
         this.naturalSearchSelections = [[]];
-        this.search([[]]);
+        super.search([[]], undefined, resetPagination);
         this.persistenceService.persistInStorage('ns', null, this.getStorageKey());
     }
+    search(naturalSearchSelections, navigationExtras, resetPagination = true) {
+        this.persistenceService.persistInUrl('na', null, this.route).then(() => {
+            super.search(naturalSearchSelections, navigationExtras, resetPagination);
+        });
+    }
     /**
      * Return an array for router link usage
      */
@@ -3487,6 +3508,17 @@ function cancellableTimeout(canceller, milliSeconds = 0) {
         return;
     }));
 }
+/**
+ * For debugging purpose only, will dump in console everything that happen to
+ * the observable
+ */
+function debug(debugName) {
+    return tap({
+        next: value => console.log('NEXT', debugName, value),
+        error: error => console.log('ERROR', debugName, error),
+        complete: () => console.log('COMPLETE', debugName),
+    });
+}
 
 class NaturalAbstractModelService {
     constructor(apollo, name, oneQuery, allQuery, createMutation, updateMutation, deleteMutation) {
@@ -4306,19 +4338,37 @@ class NaturalColumnsPickerComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
         /**
-         * Emit a list of column keys whenever the selection changes
+         * Emit a list of valid and selected column keys whenever the selection changes
          */
         this.selectionChange = new EventEmitter();
-        this.defaultSelectionChange = new EventEmitter();
+        /**
+         * Available columns are defined by options in the template
+         */
         this.availableColumns = null;
+        /**
+         * Displayed options in the dropdown menu
+         */
         this.displayedColumns = [];
         this.ngUnsubscribe = new Subject();
     }
-    set selection(columns) {
+    /**
+     * Set the columns that are wanted but might be unavailable.
+     *
+     * If a column is unavailable it will be ignored silently. To know what columns were actually applied
+     * you should use `selectionChange`.
+     *
+     * It is often set once on component initialization, but it can also be set again later in the lifespan of the component.
+     */
+    set selections(columns) {
         var _a;
+        this._selections = columns;
+        if (!columns || !this.availableColumns) {
+            return;
+        }
         (_a = this.availableColumns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
             col.checked = columns.includes(col.key);
         });
+        this.updateColumns();
     }
     ngAfterViewInit() {
         cancellableTimeout(this.ngUnsubscribe).subscribe(() => {
@@ -4330,8 +4380,10 @@ class NaturalColumnsPickerComponent {
     initColumns() {
         var _a, _b, _c;
         (_a = this.availableColumns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
-            col.checked = this.initialSelection ? this.initialSelection.includes(col.key) : col.checked;
+            var _a;
+            col.checked = ((_a = this._selections) === null || _a === void 0 ? void 0 : _a.length) ? this._selections.includes(col.key) : col.checked;
         });
+        // Show options only for columns that are not hidden
         this.displayedColumns = (_c = (_b = this.availableColumns) === null || _b === void 0 ? void 0 : _b.filter(col => !col.hidden)) !== null && _c !== void 0 ? _c : [];
     }
     updateColumns() {
@@ -4355,10 +4407,8 @@ NaturalColumnsPickerComponent.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 NaturalColumnsPickerComponent.propDecorators = {
-    selection: [{ type: Input }],
+    selections: [{ type: Input }],
     selectionChange: [{ type: Output }],
-    defaultSelectionChange: [{ type: Output }],
-    initialSelection: [{ type: Input }],
     availableColumns: [{ type: ContentChildren, args: [NaturalColumnsPickerColumnDirective,] }]
 };
 
@@ -4415,7 +4465,7 @@ NaturalIconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-icon',
                 template: "<mat-icon *ngIf=\"icon?.font\" [class]=\"icon?.class\" data-nosnippet>{{ icon?.font }}</mat-icon>\n<mat-icon *ngIf=\"icon?.svg\" [class]=\"icon?.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n",
-                styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translateX(-50%)}:host .label.top-right{top:0;right:0;transform:translateX(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translateX(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translateX(50%)}"]
+                styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"]
             },] }
 ];
 NaturalIconComponent.ctorParameters = () => [
@@ -4929,7 +4979,7 @@ NaturalDetailHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-detail-header',
                 template: "<div class=\"breadcrumb\">\n    <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n        rootLabel || label\n    }}</a>\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <natural-icon [name]=\"icon\"></natural-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline no-margin label\">{{ model?.name || model?.fullName || label }}</div>\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n",
-                styles: [":host{display:flex;flex-direction:column}:host .body,:host .breadcrumb{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width:600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>:not(:last-child){margin-bottom:10px!important}:host .body natural-icon{display:none}}"]
+                styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body natural-icon{display:none}}\n"]
             },] }
 ];
 NaturalDetailHeaderComponent.propDecorators = {
@@ -5072,7 +5122,7 @@ NaturalDropdownContainerComponent.decorators = [
                 encapsulation: ViewEncapsulation.None,
                 preserveWhitespaces: false,
                 animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems],
-                styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}"]
+                styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"]
             },] }
 ];
 NaturalDropdownContainerComponent.ctorParameters = () => [
@@ -5543,7 +5593,7 @@ class TypeTextComponent {
 TypeTextComponent.decorators = [
     { type: Component, args: [{
                 template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\n</mat-form-field>\n",
-                styles: [":host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
+                styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
             },] }
 ];
 TypeTextComponent.ctorParameters = () => [
@@ -5634,7 +5684,7 @@ class TypeNumberComponent {
 TypeNumberComponent.decorators = [
     { type: Component, args: [{
                 template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\n        />\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n    </mat-form-field>\n</form>\n",
-                styles: [":host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
+                styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"]
             },] }
 ];
 TypeNumberComponent.ctorParameters = () => [
@@ -6008,7 +6058,7 @@ class FacetSelectorComponent {
 FacetSelectorComponent.decorators = [
     { type: Component, args: [{
                 template: "<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a matLine>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n",
-                styles: [":host .mat-nav-list{padding:0}"]
+                styles: [":host .mat-nav-list{padding:0}\n"]
             },] }
 ];
 FacetSelectorComponent.ctorParameters = () => [
@@ -6042,7 +6092,7 @@ 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}"]
+                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"]
             },] }
 ];
 NaturalGroupComponent.propDecorators = {
@@ -6276,7 +6326,7 @@ class NaturalInputComponent {
         };
         const injectorTokens = this.createProviders(data);
         this.dropdownRef = this.dropdownService.open(FacetSelectorComponent, this.element, injectorTokens, false);
-        this.dropdownRef.closed.subscribe((result) => {
+        this.dropdownRef.closed.subscribe(result => {
             this.dropdownRef = null;
             if (result !== undefined) {
                 if (result.facet) {
@@ -6300,7 +6350,7 @@ class NaturalInputComponent {
         const injectorTokens = this.createProviders(data);
         const component = dropdownFacet.component;
         this.dropdownRef = this.dropdownService.open(component, this.element, injectorTokens, dropdownFacet.showValidateButton || false);
-        this.dropdownRef.closed.subscribe((result) => {
+        this.dropdownRef.closed.subscribe(result => {
             this.dropdownRef = null;
             if (result !== undefined) {
                 this.setValue(result);
@@ -6341,7 +6391,7 @@ NaturalInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-input',
                 template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    <!-- TODO : replace this void button -->\n    <div *ngIf=\"!facet && !selection\" class=\"search-icon\" matPrefix>\n        <natural-icon name=\"search\"></natural-icon>\n    </div>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"close\"></natural-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"undo\"></natural-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n",
-                styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}:host .hide{color:#0000;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon natural-icon{margin:5px auto 0}"]
+                styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,\"Helvetica Neue\",sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon natural-icon{margin:5px auto 0}\n"]
             },] }
 ];
 NaturalInputComponent.ctorParameters = () => [
@@ -6420,7 +6470,7 @@ 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}"]
+                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"]
             },] }
 ];
 NaturalSearchComponent.propDecorators = {
@@ -6482,7 +6532,7 @@ class NaturalHierarchicSelectorDialogComponent {
 NaturalHierarchicSelectorDialogComponent.decorators = [
     { type: Component, args: [{
                 template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n    <natural-hierarchic-selector\n        (selectionChange)=\"config.hierarchicSelection = $event\"\n        [selected]=\"config.hierarchicSelection ?? {}\"\n        [config]=\"config.hierarchicConfig\"\n        [filters]=\"config.hierarchicFilters\"\n        [multiple]=\"config.multiple ?? false\"\n        [allowUnselect]=\"config.allowUnselect ?? true\"\n        [searchFacets]=\"config.searchFacets ?? []\"\n        [searchSelections]=\"config.searchSelections ?? []\"\n        (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n    ></natural-hierarchic-selector>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n    <button [mat-dialog-close] i18n mat-button>Annuler</button>\n    <button (click)=\"close(config.hierarchicSelection)\" color=\"primary\" mat-raised-button\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n",
-                styles: [":host mat-dialog-actions{display:flex;flex-direction:row;justify-content:flex-end}"]
+                styles: [":host mat-dialog-actions{display:flex;flex-direction:row;justify-content:flex-end}\n"]
             },] }
 ];
 NaturalHierarchicSelectorDialogComponent.ctorParameters = () => [
@@ -7087,7 +7137,7 @@ NaturalHierarchicSelectorComponent.decorators = [
                 selector: 'natural-hierarchic-selector',
                 template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                    style=\"margin: 8px\"\n                ></mat-progress-spinner>\n\n                <natural-icon\n                    *ngIf=\"!node.loading\"\n                    [name]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                >\n                </natural-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <natural-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [name]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></natural-icon>\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-list aria-orientation=\"vertical\" class=\"mat-chip-list-stacked\">\n        <mat-chip\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <natural-icon *ngIf=\"node.config.icon\" [name]=\"node.config.icon\"></natural-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <natural-icon matChipRemove name=\"cancel\"></natural-icon>\n        </mat-chip>\n    </mat-chip-list>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\n",
                 providers: [NaturalHierarchicSelectorService],
-                styles: [":host{display:block}:host li,:host ul{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host natural-icon{width:18px;height:18px;font-size:18px;margin-right:5px}:host .mat-tree-node.leaf{margin-left:40px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-list{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-list{margin-left:10px}:host mat-chip{display:flex;flex-direction:row;height:auto!important}:host mat-chip .chip-label{flex:1}"]
+                styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host natural-icon{width:18px;height:18px;font-size:18px;margin-right:5px}:host .mat-tree-node.leaf{margin-left:40px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-list{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-list{margin-left:10px}:host mat-chip{display:flex;flex-direction:row;height:auto!important}:host mat-chip .chip-label{flex:1}\n"]
             },] }
 ];
 NaturalHierarchicSelectorComponent.ctorParameters = () => [
@@ -7430,7 +7480,7 @@ 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 .external-buttons,:host .suffix-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>:not(:last-child){margin-right:10px}"]
+                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"]
             },] }
 ];
 NaturalSelectHierarchicComponent.ctorParameters = () => [
@@ -7614,7 +7664,7 @@ 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 .external-buttons,:host .suffix-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>:not(:last-child){margin-right:10px}"]
+                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"]
             },] }
 ];
 NaturalSelectComponent.propDecorators = {
@@ -8150,9 +8200,7 @@ class NaturalFileDropDirective extends NaturalAbstractFile {
         this.closeDrags();
     }
     hasObservers() {
-        return (this.fileChange.observers.length > 0 ||
-            this.filesChange.observers.length > 0 ||
-            this.naturalFileService.filesChanged.observers.length > 0);
+        return this.fileChange.observed || this.filesChange.observed || this.naturalFileService.filesChanged.observed;
     }
 }
 NaturalFileDropDirective.decorators = [
@@ -8300,7 +8348,7 @@ FileComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-file',
                 template: "<a\n    (fileChange)=\"upload($event)\"\n    naturalFileDrop\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <natural-icon [size]=\"height * 0.33\" name=\"attachment\"></natural-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <natural-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" name=\"cloud_upload\"></natural-icon>\n        <natural-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" name=\"get_app\"></natural-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n",
-                styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}:host>a{position:relative;flex:1;background-position:50%;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action.natural-file-over .action-overlay,:host>a.has-action:hover .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}"]
+                styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}\n"]
             },] }
 ];
 FileComponent.ctorParameters = () => [
@@ -8345,7 +8393,7 @@ NaturalFixedButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-fixed-button',
                 template: "<button\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [routerLink]=\"link\"\n    class=\"floating-button bottom-right\"\n    mat-fab\n    mat-raised-button\n>\n    <natural-icon [name]=\"icon\"></natural-icon>\n</button>\n",
-                styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}"]
+                styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"]
             },] }
 ];
 NaturalFixedButtonComponent.ctorParameters = () => [];
@@ -9026,7 +9074,7 @@ NaturalRelationsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-relations',
                 template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n        <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n        <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n        <ng-container matColumnDef=\"name\">\n            <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n            <td *matCellDef=\"let item\" mat-cell>\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n                ></ng-template>\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                <button\n                    (click)=\"removeRelation(element)\"\n                    color=\"warn\"\n                    mat-icon-button\n                    i18n-matTooltip\n                    matTooltip=\"Dissocier\"\n                >\n                    <natural-icon name=\"link_off\"></natural-icon>\n                </button>\n            </td>\n        </ng-container>\n    </table>\n\n    <mat-paginator\n        (page)=\"pagination($event)\"\n        *ngIf=\"dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)\"\n        [length]=\"dataSource?.data?.length || 0\"\n        [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [pageSize]=\"dataSource?.data?.pageSize || 0\"\n    ></mat-paginator>\n\n    <div *ngIf=\"!loading && dataSource?.data?.length === 0\" class=\"margin-v mat-body\">\n        <span i18n>Aucun r\u00E9sultat</span>\n    </div>\n\n    <mat-progress-spinner *ngIf=\"loading\" [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\"></mat-progress-spinner>\n</div>\n\n<natural-select\n    #select\n    (selectionChange)=\"addRelations([$any($event)])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"getDisplayFn()\"\n    [filter]=\"autocompleteSelectorFilter\"\n    [placeholder]=\"placeholder\"\n    [service]=\"service\"\n    [showIcon]=\"false\"\n></natural-select>\n\n<div *ngIf=\"hierarchicSelectorConfig && !disabled\">\n    <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n</div>\n",
-                styles: [":host{display:flex;flex-direction:column}:host>:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}"]
+                styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"]
             },] }
 ];
 NaturalRelationsComponent.ctorParameters = () => [
@@ -9375,7 +9423,7 @@ class NaturalSidenavContainerComponent {
         this.sidenavService = sidenavService;
         this.element = element;
         /**
-         * Unique identifier used for the local storage
+         * The side that the drawer is attached to
          */
         this.position = 'start';
         /**
@@ -9429,7 +9477,7 @@ NaturalSidenavContainerComponent.decorators = [
                 selector: 'natural-sidenav-container',
                 template: "<mat-sidenav-container>\n    <mat-sidenav\n        (openedChange)=\"sidenavService.setOpened($event)\"\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",
                 providers: [NaturalSidenavService],
-                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}"]
+                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"]
             },] }
 ];
 NaturalSidenavContainerComponent.ctorParameters = () => [
@@ -9453,7 +9501,7 @@ NaturalSidenavContentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'natural-sidenav-content',
                 template: '<ng-content></ng-content>',
-                styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}"]
+                styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"]
             },] }
 ];
 NaturalSidenavContentComponent.ctorParameters = () => [];
@@ -9530,7 +9578,7 @@ NaturalTableButtonComponent.decorators = [
                 selector: 'natural-table-button',
                 template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"!href && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"!href && !label\"\n        [color]=\"color\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [queryParams]=\"queryParams\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"href && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"href && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"!href && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"!href && !label\"\n        [color]=\"color\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [queryParams]=\"queryParams\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"href && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"href && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button mat-raised-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["natural-table-button,natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button .mat-button-wrapper,natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}"]
+                styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}\n"]
             },] }
 ];
 NaturalTableButtonComponent.ctorParameters = () => [];
@@ -10068,5 +10116,5 @@ NaturalMatomoService.ctorParameters = () => [
  * 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, NaturalFileDropDirective, NaturalFileModule, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalFixedButtonDetailModule, NaturalFixedButtonModule, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorModule, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconComponent, NaturalIconModule, NaturalLinkMutationService, NaturalLinkableTabDirective, 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, ReactiveAsteriskDirective, SESSION_STORAGE, SortingOrder, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeSelectComponent, TypeTextComponent, cancellableTimeout, cleanSameValues, collectErrors, decimal, 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, NaturalAbstractFile as ɵa, NaturalDropdownService as ɵb, AbstractAssociationSelectComponent as ɵc, NATURAL_DROPDOWN_CONTAINER_DATA as ɵd, NaturalDropdownContainerComponent as ɵe, naturalDropdownAnimations as ɵf, AbstractSelect as ɵg, NaturalGroupComponent as ɵh, NaturalInputComponent as ɵi, FacetSelectorComponent as ɵj };
+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, NaturalFileDropDirective, NaturalFileModule, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalFixedButtonDetailModule, NaturalFixedButtonModule, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorModule, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconComponent, NaturalIconModule, NaturalLinkMutationService, NaturalLinkableTabDirective, 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, ReactiveAsteriskDirective, SESSION_STORAGE, SortingOrder, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeSelectComponent, TypeTextComponent, available, cancellableTimeout, cleanSameValues, collectErrors, debug, decimal, 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, NaturalAbstractFile as ɵa, NaturalDropdownService as ɵb, AbstractAssociationSelectComponent as ɵc, NATURAL_DROPDOWN_CONTAINER_DATA as ɵd, NaturalDropdownContainerComponent as ɵe, naturalDropdownAnimations as ɵf, AbstractSelect as ɵg, NaturalGroupComponent as ɵh, NaturalInputComponent as ɵi, FacetSelectorComponent as ɵj };
 //# sourceMappingURL=ecodev-natural.js.map