@ecodev/natural 36.1.5 → 38.0.1

package/fesm2015/ecodev-natural.js

@@ -49,6 +49,7 @@ import { MediaObserver } from '@angular/flex-layout';
 import * as i4 from '@angular/flex-layout/core';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSidenavContainer, MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { __rest } from 'tslib';
 import { Md5 } from 'ts-md5';
 
 // tslint:disable:directive-class-suffix
@@ -86,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 = () => [
@@ -194,6 +195,8 @@ NaturalAbstractPanel.propDecorators = {
 
 /**
  * Very basic formatting to get only date, without time and ignoring entirely the timezone
+ *
+ * So something like: "2021-09-23"
  */
 function formatIsoDate(date) {
     if (!date) {
@@ -204,6 +207,35 @@ function formatIsoDate(date) {
     const d = date.getDate();
     return y + '-' + (m < 10 ? '0' : '') + m + '-' + (d < 10 ? '0' : '') + d;
 }
+/**
+ * Format a date and time in a way that will preserve the local time zone.
+ * This allow the server side to know the day (without time) that was selected on client side.
+ *
+ * So something like: "2021-09-23T17:57:16+09:00"
+ */
+function formatIsoDateTime(date) {
+    const timezoneOffsetInMinutes = date.getTimezoneOffset();
+    const timezoneOffsetInHours = -Math.trunc(timezoneOffsetInMinutes / 60); // UTC minus local time
+    const sign = timezoneOffsetInHours >= 0 ? '+' : '-';
+    const hoursLeadingZero = Math.abs(timezoneOffsetInHours) < 10 ? '0' : '';
+    const remainderMinutes = -(timezoneOffsetInMinutes % 60);
+    const minutesLeadingZero = Math.abs(remainderMinutes) < 10 ? '0' : '';
+    // It's a bit unfortunate that we need to construct a new Date instance,
+    // but we don't want the original Date instance to be modified
+    const correctedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+    correctedDate.setHours(date.getHours() + timezoneOffsetInHours);
+    const iso = correctedDate
+        .toISOString()
+        .replace(/\.\d{3}Z/, '')
+        .replace('Z', '');
+    return (iso +
+        sign +
+        hoursLeadingZero +
+        Math.abs(timezoneOffsetInHours).toString() +
+        ':' +
+        minutesLeadingZero +
+        remainderMinutes);
+}
 /**
  * Relations to full objects are converted to their IDs only.
  *
@@ -2093,7 +2125,7 @@ function ifValid(control) {
 // - is too lax because it accepts pretty much anything else
 //
 // but the TLD will be validated against a whitelist so that should make the whole thing acceptable
-const RFC_5322 = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[^@]+\.[^@]+$/u;
+const RFC_5322 = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[^@ ]+\.[^@]+$/u;
 /**
  * Validate an email address according to RFC, and also that it is publicly deliverable (not "root@localhost" or "root@127.0.0.1")
  *
@@ -2975,11 +3007,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) {
@@ -3293,6 +3327,7 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
          * Name of filter for child items to access ancestor item
          */
         this.ancestorRelationName = 'parent';
+        this.oldAncertorId = null;
         this.breadcrumbs = [];
     }
     ngOnInit() {
@@ -3301,27 +3336,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();
     }
@@ -3353,11 +3391,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
      */
@@ -3392,35 +3435,6 @@ NaturalAbstractNavigableList.propDecorators = {
     ancestorRelationName: [{ type: Input }]
 };
 
-/**
- * Replace native toJSON() function by our own implementation that will preserve the local time zone.
- * This allow the server side to know the day (without time) that was selected on client side.
- */
-function replaceToJSON(date) {
-    date.toJSON = () => {
-        const timezoneOffsetInMinutes = date.getTimezoneOffset();
-        const timezoneOffsetInHours = -Math.trunc(timezoneOffsetInMinutes / 60); // UTC minus local time
-        const sign = timezoneOffsetInHours >= 0 ? '+' : '-';
-        const hoursLeadingZero = Math.abs(timezoneOffsetInHours) < 10 ? '0' : '';
-        const remainderMinutes = -(timezoneOffsetInMinutes % 60);
-        const minutesLeadingZero = Math.abs(remainderMinutes) < 10 ? '0' : '';
-        // It's a bit unfortunate that we need to construct a new Date instance
-        // (we don't want _this_ Date instance to be modified)
-        const correctedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
-        correctedDate.setHours(date.getHours() + timezoneOffsetInHours);
-        const iso = correctedDate
-            .toISOString()
-            .replace(/\.\d{3}Z/, '')
-            .replace('Z', '');
-        return (iso +
-            sign +
-            hoursLeadingZero +
-            Math.abs(timezoneOffsetInHours).toString() +
-            ':' +
-            minutesLeadingZero +
-            remainderMinutes);
-    };
-}
 function isFile(value) {
     return ((typeof File !== 'undefined' && value instanceof File) ||
         (typeof Blob !== 'undefined' && value instanceof Blob) ||
@@ -3438,7 +3452,8 @@ function hasFilesAndProcessDate(variables) {
     Object.keys(variables).forEach(key => {
         const value = variables[key];
         if (value instanceof Date) {
-            replaceToJSON(value);
+            // Replace native toJSON() function by our own implementation
+            value.toJSON = () => formatIsoDateTime(value);
         }
         if (isFile(value)) {
             fileFound = true;
@@ -4411,7 +4426,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 = () => [
@@ -4925,7 +4940,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 = {
@@ -5068,7 +5083,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 = () => [
@@ -5539,7 +5554,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 = () => [
@@ -5630,7 +5645,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 = () => [
@@ -6004,7 +6019,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 = () => [
@@ -6038,7 +6053,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 = {
@@ -6272,7 +6287,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) {
@@ -6296,7 +6311,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);
@@ -6337,7 +6352,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 = () => [
@@ -6416,7 +6431,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 = {
@@ -6478,7 +6493,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 = () => [
@@ -7083,7 +7098,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 = () => [
@@ -7426,7 +7441,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 = () => [
@@ -7610,7 +7625,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 = {
@@ -8146,9 +8161,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 = [
@@ -8296,7 +8309,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 = () => [
@@ -8341,7 +8354,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 = () => [];
@@ -9022,7 +9035,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 = () => [
@@ -9370,6 +9383,10 @@ class NaturalSidenavContainerComponent {
     constructor(sidenavService, element) {
         this.sidenavService = sidenavService;
         this.element = element;
+        /**
+         * The side that the drawer is attached to
+         */
+        this.position = 'start';
         /**
          * If true listens to route changes to close side nav after a route change if mobile view is active
          * Actually a navigation to current route does not emit a route change, and the sidenav don't close.
@@ -9419,9 +9436,9 @@ class NaturalSidenavContainerComponent {
 NaturalSidenavContainerComponent.decorators = [
     { type: Component, args: [{
                 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=\"start\"\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",
+                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 = () => [
@@ -9430,6 +9447,7 @@ NaturalSidenavContainerComponent.ctorParameters = () => [
 ];
 NaturalSidenavContainerComponent.propDecorators = {
     name: [{ type: Input }],
+    position: [{ type: Input }],
     mobileAutoClose: [{ type: Input }],
     minimizedWidth: [{ type: Input }],
     noScroll: [{ type: HostBinding, args: ['attr.no-scroll',] }, { type: Input }],
@@ -9444,7 +9462,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 = () => [];
@@ -9521,7 +9539,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 = () => [];
@@ -9560,9 +9578,12 @@ class NaturalDialogTriggerComponent {
         // Data from activated route
         this.triggerConfig = this.route.snapshot.data.trigger;
         // Get data relative to dialog service configuration
-        const dialogConfig = Object.assign({}, this.triggerConfig.dialogConfig);
-        // Set data accessible into component instantiated by the dialog service
-        dialogConfig.data = Object.assign(Object.assign({}, dialogConfig.data), { activatedRoute: this.route });
+        const _a = this.triggerConfig.dialogConfig, { data } = _a, config = __rest(_a, ["data"]);
+        const dialogConfig = Object.assign(Object.assign({}, config), { data: {
+                data: data,
+                // Set data accessible into component instantiated by the dialog service
+                activatedRoute: this.route,
+            } });
         this.dialogRef = this.dialog.open(this.triggerConfig.component, dialogConfig);
         // Redirect on closing (if applicable)
         this.dialogRef.beforeClosed().subscribe(exitValue => this.redirect(exitValue));
@@ -9660,7 +9681,7 @@ function isRetina() {
 class Gravatar extends Source {
     getAvatar(size) {
         const value = this.getValue();
-        const md5 = value.match('^[a-f0-9]{32}$') ? value : Md5.hashStr(value).toString();
+        const md5 = value.match('^[a-f0-9]{32}$') ? value : Md5.hashStr(value.trim().toLowerCase()).toString();
         const avatarSize = isRetina() ? size * 2 : size;
         return `https://secure.gravatar.com/avatar/${md5}?s=${avatarSize}&d=404`;
     }
@@ -10056,5 +10077,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, 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, 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 };
 //# sourceMappingURL=ecodev-natural.js.map