@ecodev/natural 56.0.1 → 56.0.3

package/fesm2022/ecodev-natural.mjs

@@ -4407,7 +4407,7 @@ class NaturalAbstractModelService {
      * If available it will emit object from cache immediately, then it
      * will **always** fetch from network and then the observable will be completed
      */
-    getOne(id) {
+    getOne(id, fetchPolicy = 'cache-and-network') {
         this.throwIfObservable(id);
         this.throwIfNotQuery(this.oneQuery);
         return this.getVariablesForOne(id).pipe(switchMap(variables => {
@@ -4415,7 +4415,7 @@ class NaturalAbstractModelService {
             return this.apollo.watchQuery({
                 query: this.oneQuery,
                 variables: variables,
-                fetchPolicy: 'cache-and-network',
+                fetchPolicy: fetchPolicy,
                 nextFetchPolicy: 'cache-only',
             }).valueChanges;
         }), filter(result => !!result.data), takeWhile(result => result.networkStatus !== NetworkStatus.ready, true), map(result => result.data[this.name]));
@@ -4595,7 +4595,7 @@ class NaturalAbstractModelService {
         this.throwIfNotQuery(this.deleteMutation);
         const ids = objects.map(o => {
             // Cancel pending update
-            this.naturalDebounceService.cancel(this, o.id);
+            this.naturalDebounceService.cancelOne(this, o.id);
             return o.id;
         });
         const variables = merge({
@@ -4614,13 +4614,15 @@ class NaturalAbstractModelService {
         }));
     }
     /**
-     * Resolve model and items related to the model, if the id is provided, in order to show a form
+     * Resolve model from server (never from cache) and items related to the model, if the id is provided, in order to show a form
      */
     resolve(id) {
         // Load model if id is given
         let observable;
         if (id) {
-            observable = this.getOne(id);
+            observable = this.naturalDebounceService
+                .flushOne(this, id)
+                .pipe(switchMap(() => this.getOne(id, 'network-only')));
         }
         else {
             observable = of(this.getDefaultForServer());
@@ -4800,7 +4802,6 @@ class NaturalAbstractModelService {
  */
 class NaturalDebounceService {
     constructor() {
-        this.flusher = new Subject();
         /**
          * Stores the debounced update function
          */
@@ -4829,12 +4830,14 @@ class NaturalDebounceService {
                 canceller.complete();
                 this.delete(key, id);
             });
+            const flusher = new Subject();
             debounced = {
                 debouncer,
                 canceller,
+                flusher,
                 source,
                 result: debouncer.pipe(debounceTime$1(2000), // Wait 2 seconds...
-                raceWith(this.flusher), // ...unless flusher is triggered
+                raceWith(flusher), // ...unless flusher is triggered
                 take$1(1), mergeMap(() => {
                     this.delete(key, id);
                     if (wasCancelled || !debounced) {
@@ -4850,10 +4853,21 @@ class NaturalDebounceService {
         // Return and observable that is updated when mutation is done
         return debounced.result;
     }
-    cancel(key, id) {
+    cancelOne(key, id) {
         const debounced = this.allDebouncedUpdateCache.get(key)?.get(id);
         debounced?.canceller.next();
     }
+    /**
+     * Immediately execute the pending update, if any.
+     *
+     * It should typically be called before resolving the object, to mutate it before re-fetching it from server.
+     *
+     * The returned observable will complete when the update completes, even if it errors.
+     */
+    flushOne(key, id) {
+        const debounced = this.allDebouncedUpdateCache.get(key)?.get(id);
+        return this.internalFlush(debounced ? [debounced] : []);
+    }
     /**
      * Immediately execute all pending updates.
      *
@@ -4863,9 +4877,16 @@ class NaturalDebounceService {
      */
     flush() {
         const all = [];
-        this.allDebouncedUpdateCache.forEach(map => map.forEach(debounced => {
+        this.allDebouncedUpdateCache.forEach(map => map.forEach(debounced => all.push(debounced)));
+        return this.internalFlush(all);
+    }
+    internalFlush(debounceds) {
+        const all = [];
+        const allFlusher = [];
+        debounceds.forEach(debounced => {
             all.push(debounced.result.pipe(catchError(() => of(undefined))));
-        }));
+            allFlusher.push(debounced.flusher);
+        });
         if (!all.length) {
             all.push(of(undefined));
         }
@@ -4874,7 +4895,7 @@ class NaturalDebounceService {
                 .pipe(map$1(() => undefined))
                 .subscribe(subscriber);
             // Flush only after subscription process is finished
-            this.flusher.next();
+            allFlusher.forEach(flusher => flusher.next());
             return subscription;
         });
     }
@@ -9885,7 +9906,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
         return this.hierarchicSelectorConfig.filter(c => !!c.selectableAtKey)[0].selectableAtKey;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NaturalRelationsComponent, isStandalone: true, 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    @if (dataSource) {\n        <table [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            <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                    />\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"unlink\">\n                <th *matHeaderCellDef mat-header-cell></th>\n                <td *matCellDef=\"let element\" mat-cell>\n                    @if (!disabled) {\n                        <button\n                            (click)=\"removeRelation(element)\"\n                            [disabled]=\"removing.has(element)\"\n                            color=\"warn\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Dissocier\"\n                        >\n                            <mat-icon naturalIcon=\"link_off\" />\n                        </button>\n                    }\n                </td>\n            </ng-container>\n        </table>\n    }\n\n    @if (dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource?.data?.length || 0\"\n            [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource?.data?.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource?.data?.length === 0) {\n        <div class=\"margin-v mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!hierarchicSelectorConfig && service && !disabled) {\n    <natural-select\n        (selectionChange)=\"addRelations([$event])\"\n        [displayWith]=\"$any(getDisplayFn())\"\n        [filter]=\"autocompleteSelectorFilter\"\n        [placeholder]=\"placeholder\"\n        [service]=\"service\"\n        [showIcon]=\"false\"\n    />\n}\n\n@if (hierarchicSelectorConfig && !disabled) {\n    <div>\n        <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n    </div>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NaturalRelationsComponent, isStandalone: true, 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    @if (dataSource) {\n        <table [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                    />\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                    @if (!disabled) {\n                        <button\n                            (click)=\"removeRelation(element)\"\n                            [disabled]=\"removing.has(element)\"\n                            color=\"warn\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Dissocier\"\n                        >\n                            <mat-icon naturalIcon=\"link_off\" />\n                        </button>\n                    }\n                </td>\n            </ng-container>\n        </table>\n    }\n\n    @if (dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource?.data?.length || 0\"\n            [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource?.data?.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource?.data?.length === 0) {\n        <div class=\"margin-v mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!hierarchicSelectorConfig && service && !disabled) {\n    <natural-select\n        (selectionChange)=\"addRelations([$event])\"\n        [displayWith]=\"$any(getDisplayFn())\"\n        [filter]=\"autocompleteSelectorFilter\"\n        [placeholder]=\"placeholder\"\n        [service]=\"service\"\n        [showIcon]=\"false\"\n    />\n}\n\n@if (hierarchicSelectorConfig && !disabled) {\n    <div>\n        <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n    </div>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
             type: Component,
@@ -9899,7 +9920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         MatPaginatorModule,
                         MatProgressSpinnerModule,
                         NaturalSelectComponent,
-                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    @if (dataSource) {\n        <table [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            <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                    />\n                </td>\n            </ng-container>\n            <ng-container matColumnDef=\"unlink\">\n                <th *matHeaderCellDef mat-header-cell></th>\n                <td *matCellDef=\"let element\" mat-cell>\n                    @if (!disabled) {\n                        <button\n                            (click)=\"removeRelation(element)\"\n                            [disabled]=\"removing.has(element)\"\n                            color=\"warn\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Dissocier\"\n                        >\n                            <mat-icon naturalIcon=\"link_off\" />\n                        </button>\n                    }\n                </td>\n            </ng-container>\n        </table>\n    }\n\n    @if (dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource?.data?.length || 0\"\n            [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource?.data?.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource?.data?.length === 0) {\n        <div class=\"margin-v mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!hierarchicSelectorConfig && service && !disabled) {\n    <natural-select\n        (selectionChange)=\"addRelations([$event])\"\n        [displayWith]=\"$any(getDisplayFn())\"\n        [filter]=\"autocompleteSelectorFilter\"\n        [placeholder]=\"placeholder\"\n        [service]=\"service\"\n        [showIcon]=\"false\"\n    />\n}\n\n@if (hierarchicSelectorConfig && !disabled) {\n    <div>\n        <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n    </div>\n}\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"] }]
+                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    @if (dataSource) {\n        <table [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                    />\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                    @if (!disabled) {\n                        <button\n                            (click)=\"removeRelation(element)\"\n                            [disabled]=\"removing.has(element)\"\n                            color=\"warn\"\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Dissocier\"\n                        >\n                            <mat-icon naturalIcon=\"link_off\" />\n                        </button>\n                    }\n                </td>\n            </ng-container>\n        </table>\n    }\n\n    @if (dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)) {\n        <mat-paginator\n            (page)=\"pagination($event)\"\n            [length]=\"dataSource?.data?.length || 0\"\n            [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource?.data?.pageSize || 0\"\n        />\n    }\n\n    @if (!loading && dataSource?.data?.length === 0) {\n        <div class=\"margin-v mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n    }\n</div>\n\n@if (!hierarchicSelectorConfig && service && !disabled) {\n    <natural-select\n        (selectionChange)=\"addRelations([$event])\"\n        [displayWith]=\"$any(getDisplayFn())\"\n        [filter]=\"autocompleteSelectorFilter\"\n        [placeholder]=\"placeholder\"\n        [service]=\"service\"\n        [showIcon]=\"false\"\n    />\n}\n\n@if (hierarchicSelectorConfig && !disabled) {\n    <div>\n        <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n    </div>\n}\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: () => [{ type: NaturalLinkMutationService }, { type: NaturalHierarchicSelectorDialogService }], propDecorators: { select: [{
                 type: ViewChild,
                 args: [NaturalSelectComponent]