@ecodev/natural 42.4.2 → 43.0.0

package/fesm2020/ecodev-natural.mjs

@@ -1,7 +1,7 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
 import { Directive, Component, Inject, Injectable, HostBinding, HostListener, InjectionToken, Input, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, Pipe, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Self, ContentChild, PLATFORM_ID, ErrorHandler } from '@angular/core';
-import { Subject, BehaviorSubject, of, timer, EMPTY, Observable, ReplaySubject, forkJoin, merge as merge$1, asyncScheduler, catchError, first as first$1 } from 'rxjs';
+import { Subject, BehaviorSubject, of, timer, EMPTY, Observable, first as first$1, combineLatest, ReplaySubject, forkJoin, merge as merge$1, asyncScheduler, catchError } from 'rxjs';
 import * as i5 from '@angular/forms';
 import { FormGroup, FormArray, Validators, FormControl, FormsModule, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/router';
@@ -522,7 +522,7 @@ class NaturalQueryVariablesManager {
      */
     updateVariables() {
         const merged = {};
-        this.channels.forEach((channelVariables) => {
+        this.channels.forEach(channelVariables => {
             if (channelVariables.filter) {
                 // Merge filter's groups first
                 const groups = this.mergeGroupList(merged.filter && merged.filter.groups ? merged.filter.groups : [], channelVariables.filter.groups || []);
@@ -3672,13 +3672,15 @@ class NaturalAbstractModelService {
     getOne(id) {
         this.throwIfObservable(id);
         this.throwIfNotQuery(this.oneQuery);
-        const queryRef = this.apollo.watchQuery({
-            query: this.oneQuery,
-            variables: this.getVariablesForOne(id),
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-only',
-        });
-        return queryRef.valueChanges.pipe(filter(result => !!result.data), takeWhile(result => result.networkStatus !== NetworkStatus.ready, true), map(result => result.data[this.name]));
+        return this.getVariablesForOne(id).pipe(switchMap(variables => {
+            this.throwIfNotQuery(this.oneQuery);
+            return this.apollo.watchQuery({
+                query: this.oneQuery,
+                variables: variables,
+                fetchPolicy: 'cache-and-network',
+                nextFetchPolicy: 'cache-only',
+            }).valueChanges;
+        }), filter(result => !!result.data), takeWhile(result => result.networkStatus !== NetworkStatus.ready, true), map(result => result.data[this.name]));
     }
     /**
      * Get a collection of objects
@@ -3688,16 +3690,17 @@ class NaturalAbstractModelService {
      */
     getAll(queryVariablesManager) {
         this.throwIfNotQuery(this.allQuery);
-        // Copy manager to prevent to apply internal variables to external QueryVariablesManager
-        const manager = new NaturalQueryVariablesManager(queryVariablesManager);
-        manager.merge('partial-variables', this.getPartialVariablesForAll());
-        return this.apollo
-            .query({
-            query: this.allQuery,
-            variables: manager.variables.value,
-            fetchPolicy: 'network-only',
-        })
-            .pipe(this.mapAll());
+        return this.getPartialVariablesForAll().pipe(first$1(), switchMap(partialVariables => {
+            this.throwIfNotQuery(this.allQuery);
+            // Copy manager to prevent to apply internal variables to external QueryVariablesManager
+            const manager = new NaturalQueryVariablesManager(queryVariablesManager);
+            manager.merge('partial-variables', partialVariables);
+            return this.apollo.query({
+                query: this.allQuery,
+                variables: manager.variables.value,
+                fetchPolicy: 'network-only',
+            });
+        }), this.mapAll());
     }
     /**
      * Get a collection of objects
@@ -3711,16 +3714,19 @@ class NaturalAbstractModelService {
      */
     watchAll(queryVariablesManager, fetchPolicy = 'cache-and-network') {
         this.throwIfNotQuery(this.allQuery);
-        return queryVariablesManager.variables.pipe(
-        // Ignore very fast variable changes
-        debounceTime(20), 
-        // Wait for variables to be defined to prevent duplicate query: with and without variables
-        // Null is accepted value for "no variables"
-        filter(variables => typeof variables !== 'undefined'), switchMap(() => {
+        return combineLatest({
+            variables: queryVariablesManager.variables.pipe(
+            // Ignore very fast variable changes
+            debounceTime(20), 
+            // Wait for variables to be defined to prevent duplicate query: with and without variables
+            // Null is accepted value for "no variables"
+            filter(variables => typeof variables !== 'undefined')),
+            partialVariables: this.getPartialVariablesForAll(),
+        }).pipe(switchMap(result => {
             // Apply partial variables from service
             // Copy manager to prevent to apply internal variables to external QueryVariablesManager
             const manager = new NaturalQueryVariablesManager(queryVariablesManager);
-            manager.merge('partial-variables', this.getPartialVariablesForAll());
+            manager.merge('partial-variables', result.partialVariables);
             this.throwIfNotQuery(this.allQuery);
             return this.apollo
                 .watchQuery({
@@ -3937,22 +3943,22 @@ class NaturalAbstractModelService {
         const plural = makePlural(this.name);
         const queryName = 'Count' + upperCaseFirstLetter(plural);
         const filterType = upperCaseFirstLetter(this.name) + 'Filter';
-        // Copy manager to prevent to apply internal variables to external QueryVariablesManager
-        const manager = new NaturalQueryVariablesManager(queryVariablesManager);
-        manager.merge('partial-variables', this.getPartialVariablesForAll());
         const query = gql `
             query ${queryName} ($filter: ${filterType}) {
             count: ${plural} (filter: $filter, pagination: {pageSize: 0, pageIndex: 0}) {
             length
             }
             }`;
-        return this.apollo
-            .query({
-            query: query,
-            variables: manager.variables.value,
-            fetchPolicy: 'network-only',
-        })
-            .pipe(map(result => result.data.count.length));
+        return this.getPartialVariablesForAll().pipe(switchMap(partialVariables => {
+            // Copy manager to prevent to apply internal variables to external QueryVariablesManager
+            const manager = new NaturalQueryVariablesManager(queryVariablesManager);
+            manager.merge('partial-variables', partialVariables);
+            return this.apollo.query({
+                query: query,
+                variables: manager.variables.value,
+                fetchPolicy: 'network-only',
+            });
+        }), map(result => result.data.count.length));
     }
     /**
      * Return empty object with some default values from server perspective
@@ -4004,7 +4010,7 @@ class NaturalAbstractModelService {
      * This is typically a site or state ID, and is needed to get appropriate access rights
      */
     getPartialVariablesForOne() {
-        return {};
+        return of({});
     }
     /**
      * Returns additional variables to be used when getting multiple objects
@@ -4012,7 +4018,7 @@ class NaturalAbstractModelService {
      * This is typically a site or state ID, but it could be something else to further filter the query
      */
     getPartialVariablesForAll() {
-        return {};
+        return of({});
     }
     /**
      * Returns additional variables to be used when creating an object
@@ -4050,7 +4056,7 @@ class NaturalAbstractModelService {
      * Merge given ID with additional partial variables if there is any
      */
     getVariablesForOne(id) {
-        return merge({}, { id: id }, this.getPartialVariablesForOne());
+        return this.getPartialVariablesForOne().pipe(map(partialVariables => merge({}, { id: id }, partialVariables)));
     }
     /**
      * Throw exception to prevent executing null queries
@@ -4349,6 +4355,10 @@ class NaturalColumnsPickerColumnDirective {
          * Initial visibility state
          */
         this.hidden = false;
+        /**
+         * Localized label of column, if absent default to key
+         */
+        this.label = '';
     }
     /**
      * This must be the column key as defined in matColumnDef
@@ -4361,7 +4371,7 @@ class NaturalColumnsPickerColumnDirective {
         this.label = this.key;
     }
     ngAfterViewInit() {
-        this.label = this.elementRef.nativeElement.textContent;
+        this.label = this.elementRef.nativeElement.textContent ?? '';
     }
 }
 NaturalColumnsPickerColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalColumnsPickerColumnDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -4691,7 +4701,7 @@ class NaturalLinkableTabDirective extends NaturalAbstractController {
             }
         });
         // When mat-tab-groups selected tab change, update url
-        this.component.selectedTabChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe((event) => {
+        this.component.selectedTabChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(event => {
             const activatedTabName = getTabId(event.tab);
             const segments = this.route.snapshot.url;
             if (!segments.length) {
@@ -6631,6 +6641,8 @@ class NaturalInputComponent {
             configuration: facet.configuration,
         };
         const injector = Injector.create({ providers: this.createProviders(data), parent: this.injector });
+        // TODO replace by this when https://github.com/angular/angular/commit/d1e83e1b30f2cea9f2ed16bff2d3b969335072ab is released
+        // this.dropdownComponentRef = createComponent(facet.component, {environmentInjector: injector});
         const factory = this.componentFactoryResolver.resolveComponentFactory(facet.component);
         this.dropdownComponentRef = factory.create(injector);
         return this.dropdownComponentRef.instance;
@@ -9241,6 +9253,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
          * Observable variables/options for listing service usage and apollo watchQuery
          */
         this.variablesManager = new NaturalQueryVariablesManager();
+        this.removing = new Set();
     }
     /**
      * The filter used to filter relations
@@ -9274,7 +9287,11 @@ class NaturalRelationsComponent extends NaturalAbstractController {
      * Refetch result to display it in table
      */
     removeRelation(relation) {
-        this.linkMutationService.unlink(this.main, relation, this.otherName).subscribe();
+        this.removing.add(relation);
+        this.linkMutationService
+            .unlink(this.main, relation, this.otherName)
+            .pipe(finalize(() => this.removing.delete(relation)))
+            .subscribe(() => this.dataSource?.remove(relation));
     }
     /**
      * Link action
@@ -9351,10 +9368,10 @@ class NaturalRelationsComponent extends NaturalAbstractController {
     }
 }
 NaturalRelationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalRelationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalRelationsComponent, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table *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                    *ngIf=\"!disabled\"\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}\n"], components: [{ type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "filter", "disabled"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$2.MatCellDef, selector: "[matCellDef]" }, { type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NaturalRelationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalRelationsComponent, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table *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                    *ngIf=\"!disabled\"\n                    (click)=\"removeRelation(element)\"\n                    [disabled]=\"removing.has(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}\n"], components: [{ type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "filter", "disabled"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$2.MatCellDef, selector: "[matCellDef]" }, { type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: 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                    *ngIf=\"!disabled\"\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}\n"] }]
+            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                    *ngIf=\"!disabled\"\n                    (click)=\"removeRelation(element)\"\n                    [disabled]=\"removing.has(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}\n"] }]
         }], ctorParameters: function () { return [{ type: NaturalLinkMutationService }, { type: NaturalHierarchicSelectorDialogService }]; }, propDecorators: { select: [{
                 type: ViewChild,
                 args: [NaturalSelectComponent]
@@ -9732,9 +9749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }] }, { type: NaturalSidenavStackService }]; } });
 
 class NaturalSidenavContainerComponent {
-    constructor(sidenavService, element) {
+    constructor(sidenavService) {
         this.sidenavService = sidenavService;
-        this.element = element;
         /**
          * The side that the drawer is attached to
          */
@@ -9785,12 +9801,12 @@ class NaturalSidenavContainerComponent {
         this.sidenavService.toggleMinimized();
     }
 }
-NaturalSidenavContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NaturalSidenavContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component });
 NaturalSidenavContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalSidenavContainerComponent, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuContainer", first: true, predicate: MatSidenavContainer, descendants: true, static: true }, { propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-content>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], components: [{ type: i2$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i2$6.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-content>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: NaturalSidenavService }, { type: i0.ElementRef }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: NaturalSidenavService }]; }, propDecorators: { name: [{
                 type: Input
             }], position: [{
                 type: Input