@ecodev/natural 37.1.0 → 40.0.0

package/bundles/ecodev-natural.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/localize/init'), require('@angular/core'), require('rxjs'), require('@angular/forms'), require('@angular/router'), require('lodash-es'), require('@angular/material/dialog'), require('@angular/material/snack-bar'), require('rxjs/operators'), require('@angular/material/table'), require('@angular/cdk/collections'), require('apollo-angular'), require('@apollo/client/core'), require('@angular/material/core'), require('@angular/cdk/platform'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/menu'), require('@angular/material/icon'), require('@angular/platform-browser'), require('@angular/material/tooltip'), require('@angular/material/tabs'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/list'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/a11y'), require('@angular/animations'), require('@angular/material/datepicker'), require('@angular/cdk/tree'), require('@angular/material/chips'), require('@angular/material/progress-spinner'), require('@angular/material/tree'), require('@angular/material/autocomplete'), require('@angular/cdk/coercion'), require('@angular/flex-layout'), require('@angular/flex-layout/core'), require('@angular/material/paginator'), require('@angular/material/sidenav'), require('ts-md5')) :
     typeof define === 'function' && define.amd ? define('@ecodev/natural', ['exports', '@angular/localize/init', '@angular/core', 'rxjs', '@angular/forms', '@angular/router', 'lodash-es', '@angular/material/dialog', '@angular/material/snack-bar', 'rxjs/operators', '@angular/material/table', '@angular/cdk/collections', 'apollo-angular', '@apollo/client/core', '@angular/material/core', '@angular/cdk/platform', '@angular/common', '@angular/material/button', '@angular/material/checkbox', '@angular/material/menu', '@angular/material/icon', '@angular/platform-browser', '@angular/material/tooltip', '@angular/material/tabs', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/list', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/a11y', '@angular/animations', '@angular/material/datepicker', '@angular/cdk/tree', '@angular/material/chips', '@angular/material/progress-spinner', '@angular/material/tree', '@angular/material/autocomplete', '@angular/cdk/coercion', '@angular/flex-layout', '@angular/flex-layout/core', '@angular/material/paginator', '@angular/material/sidenav', 'ts-md5'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev.natural = {}), global.ng.localize.init, global.ng.core, global.rxjs, global.ng.forms, global.ng.router, global['lodash-es'], global.ng.material.dialog, global.ng.material.snackBar, global.rxjs.operators, global.ng.material.table, global.ng.cdk.collections, global['apollo-angular'], global.core, global.ng.material.core, global.ng.cdk.platform, global.ng.common, global.ng.material.button, global.ng.material.checkbox, global.ng.material.menu, global.ng.material.icon, global.ng.platformBrowser, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.list, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.animations, global.ng.material.datepicker, global.ng.cdk.tree, global.ng.material.chips, global.ng.material.progressSpinner, global.ng.material.tree, global.ng.material.autocomplete, global.ng.cdk.coercion, global.ng.flexLayout, global.ng.flexLayout.core, global.ng.material.paginator, global.ng.material.sidenav, global.tsMd5));
-}(this, (function (exports, init, i0, rxjs, forms, i1$1, lodashEs, i1, i2, operators, table, collections, i1$2, core, i1$3, i2$1, i1$4, button, checkbox, menu, icon, i2$2, tooltip, tabs, formField, input, select, list, i1$5, portal, a11y, animations, datepicker, tree$1, chips, progressSpinner, tree, autocomplete, coercion, flexLayout, i4, paginator, sidenav, tsMd5) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ecodev = global.ecodev || {}, global.ecodev.natural = {}), global.ng.localize.init, global.ng.core, global.rxjs, global.ng.forms, global.ng.router, global["lodash-es"], global.ng.material.dialog, global.ng.material.snackBar, global.rxjs.operators, global.ng.material.table, global.ng.cdk.collections, global["apollo-angular"], global.core, global.ng.material.core, global.ng.cdk.platform, global.ng.common, global.ng.material.button, global.ng.material.checkbox, global.ng.material.menu, global.ng.material.icon, global.ng.platformBrowser, global.ng.material.tooltip, global.ng.material.tabs, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.list, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.a11y, global.ng.animations, global.ng.material.datepicker, global.ng.cdk.tree, global.ng.material.chips, global.ng.material.progressSpinner, global.ng.material.tree, global.ng.material.autocomplete, global.ng.cdk.coercion, global.ng.flexLayout, global.ng.flexLayout.core, global.ng.material.paginator, global.ng.material.sidenav, global.tsMd5));
+})(this, (function (exports, init, i0, rxjs, forms, i1$1, lodashEs, i1, i2, operators, table, collections, i1$2, core, i1$3, i2$1, i1$4, button, checkbox, menu, icon, i2$2, tooltip, tabs, formField, input, select, list, i1$5, portal, a11y, animations, datepicker, tree$1, chips, progressSpinner, tree, autocomplete, coercion, flexLayout, i4, paginator, sidenav, tsMd5) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -299,7 +297,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -391,7 +389,7 @@
     NaturalConfirmComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -2386,6 +2384,21 @@
             return rxjs.timer(500).pipe(operators.switchMap(function () { return modelService.count(qvm).pipe(operators.map(function (count) { return (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) {
+        if (excludedId === void 0) { excludedId = null; }
+        return function (control) {
+            if (!control.value || !control.dirty) {
+                return rxjs.of(null);
+            }
+            return rxjs.timer(500).pipe(operators.switchMap(function () { return getAvailableQuery(control.value, excludedId).pipe(operators.map(function (isAvailable) { return (isAvailable ? null : { available: true }); })); }));
+        };
+    }
     /**
      * Return all errors recursively for the given Form or control
      */
@@ -3359,7 +3372,7 @@
      * 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
     var NaturalAbstractList = /** @class */ (function (_super) {
@@ -3375,7 +3388,7 @@
             /**
              * Columns list after interaction with <natural-columns-picker>
              */
-            _this._selectedColumns = [];
+            _this.columnsForTable = [];
             /**
              * The default column selection that automatically happened after <natural-columns-picker> initialization
              */
@@ -3445,11 +3458,14 @@
         /**
          * Persist search and then launch whatever is required to refresh the list
          */
-        NaturalAbstractList.prototype.search = function (naturalSearchSelections, navigationExtras) {
+        NaturalAbstractList.prototype.search = function (naturalSearchSelections, navigationExtras, resetPagination) {
+            if (resetPagination === void 0) { resetPagination = true; }
             // Reset page index to restart the pagination (preserve pageSize)
-            this.variablesManager.merge('pagination', {
-                pagination: lodashEs.pick(this.defaultPagination, ['offset', 'pageIndex']),
-            });
+            if (resetPagination) {
+                this.variablesManager.merge('pagination', {
+                    pagination: lodashEs.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) {
@@ -3623,7 +3639,7 @@
          * Uses data provided by router such as:
          *
          * - `route.data.forcedVariables`
-         * - `route.data.initialColumns`
+         * - `route.data.selectedColumns`
          */
         NaturalAbstractList.prototype.initFromRoute = function () {
             // Variables
@@ -3631,8 +3647,8 @@
                 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;
             }
         };
         NaturalAbstractList.prototype.getDataObservable = function () {
@@ -3658,6 +3674,11 @@
             if (sorting) {
                 this.variablesManager.set('sorting', { sorting: sorting });
             }
+            // Columns
+            var 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);
@@ -3715,34 +3736,21 @@
                 this.variablesManager.set('sorting', { sorting: variables.sorting });
             }
         };
-        Object.defineProperty(NaturalAbstractList.prototype, "selectedColumns", {
-            get: function () {
-                return this._selectedColumns;
-            },
-            set: function (columns) {
-                this._selectedColumns = 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
-                    var storageKey = this.getStorageKey();
-                    var 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
-                    var value = lodashEs.isEqual(this.defaultSelectedColumns, columns) ? null : columns.join(',');
-                    this.persistenceService.persist('col', value, this.route, this.getStorageKey());
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
+        NaturalAbstractList.prototype.selectColumns = function (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;
+            }
+            else {
+                // Persist only if wanted columns are different from default selection
+                var value = lodashEs.isEqual(this.defaultSelectedColumns, columns) ? null : columns.join(',');
+                this.persistenceService.persist('col', value, this.route, this.getStorageKey());
+            }
+        };
         return NaturalAbstractList;
     }(NaturalAbstractPanel));
     NaturalAbstractList.decorators = [
@@ -3754,7 +3762,7 @@
     ]; };
     NaturalAbstractList.propDecorators = {
         persistSearch: [{ type: i0.Input }],
-        initialColumns: [{ type: i0.Input }],
+        selectedColumns: [{ type: i0.Input }],
         forcedVariables: [{ type: i0.Input }]
     };
     var templateObject_1$6, templateObject_2$1, templateObject_3$1, templateObject_4$1;
@@ -3773,6 +3781,7 @@
              * Name of filter for child items to access ancestor item
              */
             _this.ancestorRelationName = 'parent';
+            _this.oldAncertorId = null;
             _this.breadcrumbs = [];
             return _this;
         }
@@ -3783,27 +3792,30 @@
             // "na" is a trailing param, and should be considered only when there is no search
             this.route.params.subscribe(function (params) {
                 // "ns" stands for natural-search to be shorter in url
-                if (!params['ns']) {
-                    var 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
-                        function (ancestor) { return (_this.breadcrumbs = _this.getBreadcrumb(ancestor)); });
-                        _this.clearSearch();
-                    }
-                    else {
-                        navigationConditionValue = { empty: {} };
-                        _this.breadcrumbs = [];
-                    }
-                    var condition = {};
-                    condition[_this.ancestorRelationName] = navigationConditionValue;
-                    var 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;
+                }
+                var 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
+                    function (ancestor) { return (_this.breadcrumbs = _this.getBreadcrumb(ancestor)); });
+                    var hasAncestorChanged = params['na'] !== _this.oldAncertorId;
+                    _this.oldAncertorId = params['na'];
+                    _this.clearSearch(hasAncestorChanged);
                 }
+                else {
+                    navigationConditionValue = { empty: {} };
+                    _this.breadcrumbs = [];
+                }
+                var condition = {};
+                condition[_this.ancestorRelationName] = navigationConditionValue;
+                var 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.prototype.ngOnInit.call(this);
         };
@@ -3836,11 +3848,19 @@
             }
             _super.prototype.translateSearchAndRefreshList.call(this, naturalSearchSelections);
         };
-        NaturalAbstractNavigableList.prototype.clearSearch = function () {
+        NaturalAbstractNavigableList.prototype.clearSearch = function (resetPagination) {
+            if (resetPagination === void 0) { resetPagination = true; }
             this.naturalSearchSelections = [[]];
-            this.search([[]]);
+            _super.prototype.search.call(this, [[]], undefined, resetPagination);
             this.persistenceService.persistInStorage('ns', null, this.getStorageKey());
         };
+        NaturalAbstractNavigableList.prototype.search = function (naturalSearchSelections, navigationExtras, resetPagination) {
+            var _this = this;
+            if (resetPagination === void 0) { resetPagination = true; }
+            this.persistenceService.persistInUrl('na', null, this.route).then(function () {
+                _super.prototype.search.call(_this, naturalSearchSelections, navigationExtras, resetPagination);
+            });
+        };
         /**
          * Return an array for router link usage
          */
@@ -3940,6 +3960,17 @@
             return;
         }));
     }
+    /**
+     * For debugging purpose only, will dump in console everything that happen to
+     * the observable
+     */
+    function debug(debugName) {
+        return operators.tap({
+            next: function (value) { return console.log('NEXT', debugName, value); },
+            error: function (error) { return console.log('ERROR', debugName, error); },
+            complete: function () { return console.log('COMPLETE', debugName); },
+        });
+    }
 
     var NaturalAbstractModelService = /** @class */ (function () {
         function NaturalAbstractModelService(apollo, name, oneQuery, allQuery, createMutation, updateMutation, deleteMutation) {
@@ -4831,20 +4862,38 @@
         function NaturalColumnsPickerComponent(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 i0.EventEmitter();
-            this.defaultSelectionChange = new i0.EventEmitter();
+            /**
+             * Available columns are defined by options in the template
+             */
             this.availableColumns = null;
+            /**
+             * Displayed options in the dropdown menu
+             */
             this.displayedColumns = [];
             this.ngUnsubscribe = new rxjs.Subject();
         }
-        Object.defineProperty(NaturalColumnsPickerComponent.prototype, "selection", {
+        Object.defineProperty(NaturalColumnsPickerComponent.prototype, "selections", {
+            /**
+             * 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: function (columns) {
                 var _a;
+                this._selections = columns;
+                if (!columns || !this.availableColumns) {
+                    return;
+                }
                 (_a = this.availableColumns) === null || _a === void 0 ? void 0 : _a.forEach(function (col) {
                     col.checked = columns.includes(col.key);
                 });
+                this.updateColumns();
             },
             enumerable: false,
             configurable: true
@@ -4861,8 +4910,10 @@
             var _this = this;
             var _a, _b, _c;
             (_a = this.availableColumns) === null || _a === void 0 ? void 0 : _a.forEach(function (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(function (col) { return !col.hidden; })) !== null && _c !== void 0 ? _c : [];
         };
         NaturalColumnsPickerComponent.prototype.updateColumns = function () {
@@ -4887,10 +4938,8 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     NaturalColumnsPickerComponent.propDecorators = {
-        selection: [{ type: i0.Input }],
+        selections: [{ type: i0.Input }],
         selectionChange: [{ type: i0.Output }],
-        defaultSelectionChange: [{ type: i0.Output }],
-        initialSelection: [{ type: i0.Input }],
         availableColumns: [{ type: i0.ContentChildren, args: [NaturalColumnsPickerColumnDirective,] }]
     };
 
@@ -4967,7 +5016,7 @@
         { type: i0.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 = function () { return [
@@ -5519,7 +5568,7 @@
         { type: i0.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 = {
@@ -5668,7 +5717,7 @@
                     encapsulation: i0.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 = function () { return [
@@ -6163,7 +6212,7 @@
     TypeTextComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -6268,7 +6317,7 @@
     TypeNumberComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -6668,7 +6717,7 @@
     FacetSelectorComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -6707,7 +6756,7 @@
         { type: i0.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 = {
@@ -7014,7 +7063,7 @@
         { type: i0.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 = function () { return [
@@ -7099,7 +7148,7 @@
         { type: i0.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 = {
@@ -7166,7 +7215,7 @@
     NaturalHierarchicSelectorDialogComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -7895,7 +7944,7 @@
                     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 = function () { return [
@@ -8260,7 +8309,7 @@
         { type: i0.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 = function () { return [
@@ -8459,7 +8508,7 @@
         { type: i0.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 = {
@@ -9033,9 +9082,7 @@
             this.closeDrags();
         };
         NaturalFileDropDirective.prototype.hasObservers = function () {
-            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;
         };
         return NaturalFileDropDirective;
     }(NaturalAbstractFile));
@@ -9190,7 +9237,7 @@
         { type: i0.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 = function () { return [
@@ -9239,7 +9286,7 @@
         { type: i0.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 = function () { return []; };
@@ -9981,7 +10028,7 @@
         { type: i0.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 = function () { return [
@@ -10351,7 +10398,7 @@
             this.sidenavService = sidenavService;
             this.element = element;
             /**
-             * Unique identifier used for the local storage
+             * The side that the drawer is attached to
              */
             this.position = 'start';
             /**
@@ -10414,7 +10461,7 @@
                     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 = function () { return [
@@ -10440,7 +10487,7 @@
         { type: i0.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 = function () { return []; };
@@ -10529,7 +10576,7 @@
                     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: i0.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 = function () { return []; };
@@ -11185,9 +11232,11 @@
     exports.TypeNumberComponent = TypeNumberComponent;
     exports.TypeSelectComponent = TypeSelectComponent;
     exports.TypeTextComponent = TypeTextComponent;
+    exports.available = available;
     exports.cancellableTimeout = cancellableTimeout;
     exports.cleanSameValues = cleanSameValues;
     exports.collectErrors = collectErrors;
+    exports.debug = debug;
     exports.decimal = decimal;
     exports.deliverableEmail = deliverableEmail;
     exports.ensureHttpPrefix = ensureHttpPrefix;
@@ -11223,18 +11272,18 @@
     exports.validTlds = validTlds;
     exports.validateAllFormControls = validateAllFormControls;
     exports.wrapLike = wrapLike;
-    exports.ɵa = NaturalAbstractFile;
-    exports.ɵb = NaturalDropdownService;
-    exports.ɵc = AbstractAssociationSelectComponent;
-    exports.ɵd = NATURAL_DROPDOWN_CONTAINER_DATA;
-    exports.ɵe = NaturalDropdownContainerComponent;
-    exports.ɵf = naturalDropdownAnimations;
-    exports.ɵg = AbstractSelect;
-    exports.ɵh = NaturalGroupComponent;
-    exports.ɵi = NaturalInputComponent;
-    exports.ɵj = FacetSelectorComponent;
+    exports["ɵa"] = NaturalAbstractFile;
+    exports["ɵb"] = NaturalDropdownService;
+    exports["ɵc"] = AbstractAssociationSelectComponent;
+    exports["ɵd"] = NATURAL_DROPDOWN_CONTAINER_DATA;
+    exports["ɵe"] = NaturalDropdownContainerComponent;
+    exports["ɵf"] = naturalDropdownAnimations;
+    exports["ɵg"] = AbstractSelect;
+    exports["ɵh"] = NaturalGroupComponent;
+    exports["ɵi"] = NaturalInputComponent;
+    exports["ɵj"] = FacetSelectorComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ecodev-natural.umd.js.map