@ecodev/natural 47.2.0 → 47.3.1

package/fesm2020/ecodev-natural.mjs

@@ -2494,6 +2494,8 @@ class NaturalAbstractEditableList extends NaturalAbstractController {
      *  - AbstractModelService.getPartialVariablesForCreation()
      *  - AbstractModelService.getPartialVariablesForUpdate()
      *  - some other required treatment.
+     *
+     * TODO return type is incorrect and should be closer to `Partial<T>[]` or an even looser type, because we don't really know what fields exists in the form. When we fix this, we should also remove type coercing in unit tests.
      */
     getItems() {
         return this.formArray.getRawValue();
@@ -6460,28 +6462,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
 
 /**
  * Default usage:
- * <natural-select [service]="amazingServiceInstance" [(model)]="amazingModel" (modelChange)=amazingChangeFn($event)></natural-select>
+ * ```html
+ * <natural-select [service]="myServiceInstance" [(model)]="myModel" (modelChange)=myChangeFn($event)></natural-select>
+ * ```
  *
  * Custom template usage :
+ * ```html
  * <natural-select [service]="svc" [(ngModel)]="model">
  *     <ng-template let-item="item">
  *         <span>{{ item.xxx }}</span>
  *     </ng-template>
  * </natural-select>
+ * ```
  *
- * [(ngModel)] and (ngModelChange) are optional
+ * `[(ngModel)]` and `(ngModelChange)` are optional.
  *
  * Placeholder :
- * <natural-select placeholder="amazing placeholder">
+ * ```html
+ * <natural-select placeholder="my placeholder"></natural-select>
+ * ```
  *
  * Never float placeholder :
- * <natural-select placeholder="amazing placeholder" floatPlaceholder="never">
+ * ```html
+ * <natural-select placeholder="my placeholder" floatPlaceholder="never"></natural-select>
+ * ```
  *
- * Search with like %xxx% on specified attribute name instead of custom filter on whole object
- * <natural-select [searchField]="string">
+ * Search with like %xxx% on specified field `name` instead of custom filter on whole object
+ * ```html
+ * <natural-select searchField="name"></natural-select>
+ * ```
  *
  * Allows to input free string without selecting an option from autocomplete suggestions
- * <natural-select [optionRequired]="false">
+ * ```html
+ * <natural-select [optionRequired]="false"></natural-select>
+ * ```
  */
 class NaturalSelectComponent extends AbstractSelect {
     constructor() {
@@ -6491,15 +6505,19 @@ class NaturalSelectComponent extends AbstractSelect {
          */
         this.optionRequired = true;
         /**
-         * The filter attribute to bind when searching for a term
+         * The field on which to search for, default to 'custom'.
          */
         this.searchField = 'custom';
+        /**
+         * The operator with which to search for, default to 'search' if `searchField` is 'custom', else 'like'.
+         */
+        this.searchOperator = null;
         /**
          * Items returned by server to show in listing
          */
         this.items = null;
         /**
-         * Whether a we are searching something
+         * Whether we are searching something
          */
         this.loading = false;
         /**
@@ -6614,18 +6632,34 @@ class NaturalSelectComponent extends AbstractSelect {
         return this.internalCtrl?.enabled && !!this.clearLabel && !!this.internalCtrl.value;
     }
     getSearchFilter(term) {
-        let field = {};
-        if (this.searchField === 'custom') {
-            field = { custom: term ? { search: { value: term } } : null };
-        }
-        else if (term) {
-            field[this.searchField] = { like: { value: '%' + term + '%' } };
+        const searchOperator = this.searchOperator ?? (this.searchField === 'custom' ? 'search' : 'like');
+        if (term && searchOperator === 'like') {
+            term = '%' + term + '%';
         }
-        return { filter: { groups: [{ conditions: [field] }] } };
+        return {
+            filter: {
+                groups: [
+                    {
+                        conditions: [
+                            {
+                                [this.searchField]: term
+                                    ? {
+                                        [searchOperator]: { value: term },
+                                    }
+                                    : null,
+                            },
+                        ],
+                    },
+                ],
+            },
+        };
+    }
+    getVariablesForDebug() {
+        return this.variablesManager.variables.value;
     }
 }
 NaturalSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalSelectComponent, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatLegacyAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, 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            (click)=\"$event.stopPropagation()\"\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 .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"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$3.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatLegacyButton, 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"] }, { kind: "directive", type: i4$2.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] });
+NaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalSelectComponent, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatLegacyAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, 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            (click)=\"$event.stopPropagation()\"\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 .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"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.MatLegacyAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$3.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatLegacyButton, 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"] }, { kind: "directive", type: i4$2.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: 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            (click)=\"$event.stopPropagation()\"\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 .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"] }]
@@ -6641,6 +6675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
                 type: Input
             }], searchField: [{
                 type: Input
+            }], searchOperator: [{
+                type: Input
             }], filter: [{
                 type: Input
             }], disabled: [{
@@ -6669,7 +6705,7 @@ class TypeNaturalSelectComponent extends AbstractAssociationSelectComponent {
     }
 }
 TypeNaturalSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TypeNaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: TypeNaturalSelectComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; 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    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "filter", "disabled"] }] });
+TypeNaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: TypeNaturalSelectComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; 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    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: TypeNaturalSelectComponent, decorators: [{
             type: Component,
             args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; 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    <natural-select\n        style=\"display: inline\"\n        *ngIf=\"configuration && requireValueCtrl\"\n        [formControl]=\"valueCtrl\"\n        [placeholder]=\"configuration.placeholder\"\n        [service]=\"configuration.service\"\n        [filter]=\"configuration.filter\"\n    ></natural-select>\n</form>\n" }]
@@ -9842,7 +9878,12 @@ class NaturalRelationsComponent extends NaturalAbstractController {
      * TODO : could maybe use "update" attribute of apollo.mutate function to update table faster (but hard to do it here)
      */
     addRelations(relations) {
-        const observables = relations.map(relation => this.linkMutationService.link(this.main, relation, this.otherName));
+        const observables = [
+            of(null),
+            ...relations
+                .filter((relation) => !!relation && typeof relation === 'object')
+                .map(relation => this.linkMutationService.link(this.main, relation, this.otherName)),
+        ];
         forkJoin(observables).subscribe(() => {
             this.selectionChange.emit();
             if (this.select) {
@@ -9865,7 +9906,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
         if (this.displayWith) {
             return this.displayWith;
         }
-        return item => (item ? item.fullName || item.name : '');
+        return (item) => (item ? item.fullName || item.name : '');
     }
     openNaturalHierarchicSelector() {
         const selectAtKey = this.getSelectKey();
@@ -9914,10 +9955,10 @@ class NaturalRelationsComponent extends NaturalAbstractController {
     }
 }
 NaturalRelationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalRelationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", 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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatLegacyButton, 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"] }, { kind: "component", type: i7$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "component", type: i7$3.MatLegacyTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$3.MatLegacyHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$3.MatLegacyHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$3.MatLegacyColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$3.MatLegacyCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$3.MatLegacyRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$3.MatLegacyHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$3.MatLegacyCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$3.MatLegacyHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$3.MatLegacyRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "filter", "disabled"] }, { kind: "component", type: i9.MatLegacyPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NaturalRelationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", 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    (selectionChange)=\"addRelations([$event])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"$any(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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatLegacyButton, 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"] }, { kind: "component", type: i7$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "component", type: i7$3.MatLegacyTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$3.MatLegacyHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$3.MatLegacyHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$3.MatLegacyColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$3.MatLegacyCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$3.MatLegacyRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$3.MatLegacyHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$3.MatLegacyCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$3.MatLegacyHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$3.MatLegacyRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }, { kind: "component", type: i9.MatLegacyPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7$1.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", 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                    [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"] }]
+            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    (selectionChange)=\"addRelations([$event])\"\n    *ngIf=\"!hierarchicSelectorConfig && service && !disabled\"\n    [displayWith]=\"$any(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]