@ecodev/natural 45.4.2 → 46.0.0

package/fesm2015/ecodev-natural.mjs

@@ -1,9 +1,9 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
-import { Directive, Component, Inject, Injectable, HostBinding, HostListener, InjectionToken, Optional, Input, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, Pipe, TemplateRef, ViewEncapsulation, ViewChild, Injector, Self, ContentChild, createEnvironmentInjector, createComponent, PLATFORM_ID, ErrorHandler } from '@angular/core';
-import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith, last, EMPTY, Observable, first as first$1, combineLatest, catchError, ReplaySubject, debounceTime as debounceTime$1, raceWith, take as take$1, mergeMap, shareReplay as shareReplay$1, forkJoin, map as map$1, merge as merge$1, tap as tap$1, asyncScheduler, takeUntil as takeUntil$1 } from 'rxjs';
+import { Directive, Component, Inject, Injectable, HostBinding, HostListener, InjectionToken, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Input, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, Pipe, Self, ContentChild, createEnvironmentInjector, createComponent, PLATFORM_ID, ErrorHandler } from '@angular/core';
+import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith, last, EMPTY, merge as merge$1, Observable, first as first$1, combineLatest, catchError, ReplaySubject, debounceTime as debounceTime$1, raceWith, take as take$1, mergeMap, shareReplay as shareReplay$1, forkJoin, map as map$1, tap as tap$1, asyncScheduler, takeUntil as takeUntil$1 } from 'rxjs';
 import * as i3 from '@angular/forms';
-import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, UntypedFormControl, FormsModule, FormControl, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, UntypedFormControl, FormsModule, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/router';
 import { Router, ActivatedRoute, NavigationStart, NavigationEnd, RouterModule, NavigationError, DefaultUrlSerializer } from '@angular/router';
 import { merge, isObject, isArray, pickBy, isEmpty, cloneDeep, uniq, groupBy, mergeWith, defaultsDeep, omit, kebabCase, clone, pick, isEqual, defaults, intersection, flatten, differenceWith } from 'lodash-es';
@@ -14,53 +14,53 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { switchMap, first, map, filter, finalize, takeUntil, take, tap, takeWhile, debounceTime, shareReplay, startWith, distinctUntilChanged, throttleTime } from 'rxjs/operators';
-import * as i7$2 from '@angular/material/table';
+import * as i7$3 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { DataSource, SelectionModel } from '@angular/cdk/collections';
-import * as i1$1 from 'apollo-angular';
+import * as i1$4 from '@angular/material/core';
+import { MAT_DATE_FORMATS, NativeDateAdapter, ErrorStateMatcher, MatRipple, MatRippleModule } from '@angular/material/core';
+import * as i1$3 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i4$1 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import { trigger, state, style, transition, sequence, query, animate, group } from '@angular/animations';
+import * as i1$1 from '@angular/cdk/a11y';
+import * as i1$2 from '@angular/common';
+import { CommonModule, DatePipe, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i4$2 from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i7 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i4$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$5 from 'apollo-angular';
 import { gql } from 'apollo-angular';
 import { NetworkStatus } from '@apollo/client/core';
-import * as i1$7 from '@angular/material/core';
-import { NativeDateAdapter, ErrorStateMatcher, MatRipple, MAT_DATE_FORMATS, MatRippleModule } from '@angular/material/core';
-import * as i1$3 from '@angular/common';
-import { CommonModule, DatePipe, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i5 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$2 from '@angular/material/icon';
+import * as i1$6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$2 from '@angular/platform-browser';
-import * as i7 from '@angular/material/tooltip';
+import * as i7$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$4 from '@angular/material/tabs';
-import * as i4$2 from '@angular/material/form-field';
-import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import * as i5$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i4$4 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4$3 from '@angular/material/list';
+import * as i1$7 from '@angular/material/tabs';
+import * as i4$4 from '@angular/material/list';
 import { MatSelectionList, MatListModule } from '@angular/material/list';
-import * as i1$6 from '@angular/cdk/overlay';
-import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i4$1 from '@angular/cdk/portal';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import { trigger, state, style, transition, sequence, query, animate, group } from '@angular/animations';
-import * as i1$5 from '@angular/cdk/a11y';
 import * as i2$3 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i7$1 from '@angular/material/progress-spinner';
+import * as i7$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FlatTreeControl, CdkTreeModule } from '@angular/cdk/tree';
-import * as i5$2 from '@angular/material/tree';
+import * as i5$1 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
 import * as i8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i3$2 from '@angular/material/divider';
-import * as i6 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3$3 from '@angular/flex-layout';
 import * as i9 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -95,7 +95,7 @@ NaturalAbstractController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 NaturalAbstractController.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: NaturalAbstractController, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalAbstractController, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class NaturalConfirmComponent {
     constructor(data) {
@@ -2191,7 +2191,7 @@ function ifValid(control) {
 // - is too lax because it accepts pretty much anything else
 //
 // but the TLD will be validated against a whitelist so that should make the whole thing acceptable
-const RFC_5322 = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[^@ ]+\.[^@]+$/u;
+const RFC_5322 = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[^@ ]+\.[^@]+$/u;
 /**
  * Validate an email address according to RFC, and also that it is publicly deliverable (not "root@localhost" or "root@127.0.0.1")
  *
@@ -2391,15 +2391,22 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
         }), finalize(() => this.form.enable()))
             .subscribe();
     }
-    postUpdate(model) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    postUpdate(model) {
+        // noop
+    }
     /**
      * Returns an observable that will be subscribed to immediately and the
      * redirect navigation will only happen after the observable completes.
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     postCreate(model) {
         return EMPTY;
     }
-    preDelete(model) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    preDelete(model) {
+        // noop
+    }
     initForm() {
         this.form = this.service.getFormGroup(this.data.model);
     }
@@ -2529,578 +2536,1146 @@ function deepClone(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
 
-function toGraphQLDoctrineFilter(facets, selections) {
-    selections = deepClone(selections);
-    const filter = {};
-    if (!selections || selections.length === 0) {
-        selections = [[]];
-    }
-    for (const groupSelections of selections) {
-        const group = {};
-        const neededInversedFlags = facets ? facets.filter(isInvertedFlag) : [];
-        for (const selection of groupSelections) {
-            const facet = getFacetFromSelection(facets, selection);
-            const transformedSelection = transformSelection(facet, selection);
-            // Skip inverted flag and remove it from needed inverted flags
-            if (facet && isInvertedFlag(facet)) {
-                neededInversedFlags.splice(neededInversedFlags.indexOf(facet), 1);
-            }
-            else {
-                applyJoinAndCondition(group, transformedSelection);
-            }
-        }
-        for (const facet of neededInversedFlags) {
-            const transformedSelection = transformSelection(facet, {
-                field: facet.field,
-                name: facet.name,
-                condition: deepClone(facet.condition),
-            });
-            applyJoinAndCondition(group, transformedSelection);
-        }
-        addGroupToFilter(filter, group);
-    }
-    return filter;
-}
-function applyJoinAndCondition(group, selection) {
-    // Apply join, then apply operator on that join, if field name has a '.'
-    const [joinedRelation, joinedField] = selection.field.split('.');
-    let container;
-    let wrappedCondition;
-    if (joinedField) {
-        container = addJoinToGroup(group, joinedRelation);
-        wrappedCondition = wrapWithFieldName(joinedField, selection.condition);
-    }
-    else {
-        container = group;
-        wrappedCondition = wrapWithFieldName(selection.field, selection.condition);
-    }
-    addConditionToContainer(container, wrappedCondition);
-}
 /**
- * Only add join if it does not already exists
+ * Wrap the searched value by `%` SQL wildcard
+ *
+ * So:
+ *
+ *     {field: 'myFieldName', condition: {like: {value: 'foo'}}}
+ *
+ * will become
+ *
+ *     {field: 'myFieldName', condition: {like: {value: '%foo%'}}}
  */
-function addJoinToGroup(group, joinedRelation) {
-    if (!group.joins) {
-        group.joins = {};
-    }
-    if (!group.joins[joinedRelation]) {
-        group.joins[joinedRelation] = {};
+function wrapLike(selection) {
+    if (selection.condition.like) {
+        selection.condition.like.value = '%' + selection.condition.like.value + '%';
     }
-    return group.joins[joinedRelation];
+    return selection;
 }
 /**
- * Only add condition to group or join if it's valid
+ * Replace the operator name (usually "like", "in" or "between") with the
+ * attribute "field" or "name" defined in the configuration
+ *
+ * So:
+ *
+ *     {field: 'myFieldName', condition: {in: {values: [1, 2, 3]}}}
+ *
+ * will become
+ *
+ *     {field: 'myFieldName', condition: {myFieldName: {values: [1, 2, 3]}}}
  */
-function addConditionToContainer(container, condition) {
-    if (!condition) {
-        return;
-    }
-    if (!container.conditions) {
-        container.conditions = [];
-    }
-    container.conditions.push(condition);
+function replaceOperatorByField(selection) {
+    return replaceOperatorByAttribute(selection, 'field');
 }
 /**
- * Only add the group if there is something meaningful
+ * Replace the operator name (usually "like", "in" or "between") with the
+ * field "name" defined in the configuration
+ *
+ * So:
+ *
+ *     {field: 'myFieldName', name:'myConfigName', condition: {in: {values: [1, 2, 3]}}}
+ *
+ * will become
+ *
+ *     {field: 'myFieldName',  name:'myConfigName', condition: {myConfigName: {values: [1, 2, 3]}}}
  */
-function addGroupToFilter(filter, group) {
-    if (group.conditions || group.joins) {
-        if (!filter.groups) {
-            filter.groups = [];
-        }
-        filter.groups.push(group);
-        if (filter.groups.length > 1) {
-            group.groupLogic = LogicalOperator.OR;
-        }
-    }
+function replaceOperatorByName(selection) {
+    return replaceOperatorByAttribute(selection, 'name');
 }
-function wrapWithFieldName(field, condition) {
-    const result = {};
-    // We assume a custom operator "search"
-    if (field === 'search' && condition.like) {
-        return { custom: { search: { value: condition.like.value } } };
-    }
-    else {
-        result[field] = condition;
+function replaceOperatorByAttribute(selection, attribute) {
+    const oldOperator = Object.keys(selection.condition)[0];
+    const attributeValue = selection[attribute];
+    if (!attributeValue) {
+        throw new Error('Attribute cannot be empty. Most likely the configuration was wrong');
     }
-    return result;
-}
-function transformSelection(facet, selection) {
-    return facet && facet.transform ? facet.transform(selection) : selection;
-}
-function isInvertedFlag(f) {
-    return ('inversed' in f && f.inversed) || false;
+    selection.condition[attributeValue] = selection.condition[oldOperator];
+    delete selection.condition[oldOperator];
+    return selection;
 }
-
 /**
- * Returns a string representation of the selection that can be used in URL.
+ * Replace `"today"` and `"tomorrow"` by their real value right now.
  *
- * The string can be parsed back with `fromUrl()`
+ * This transformer is applied automatically and should **not** be part
+ * of Natural public API.
+ *
+ * So:
+ *
+ *     {field: 'myFieldName', condition: {greater: {value: 'today'}}}
+ *
+ * will become
+ *
+ *     {field: 'myFieldName', condition: {greater: {value: '2023-01-03'}}}
  */
-function toUrl(selections) {
-    if (!selections || !selections.length) {
-        return null;
-    }
-    const s = deepClone(selections);
-    for (const a of s) {
-        for (const b of a) {
-            b['f'] = b.field;
-            b['c'] = b.condition;
-            delete b.field;
-            delete b.condition;
+function replaceToday(selection) {
+    var _a, _b;
+    const date = new Date();
+    const today = formatIsoDate(date);
+    date.setDate(date.getDate() + 1);
+    const tomorrow = formatIsoDate(date);
+    // Transparently adapt exclusive/inclusive ranges for special "today" value.
+    // Ideally this should be done in `TypeDateComponent`, like it is done for real date values. But unfortunately I
+    // could not find a reasonable way to do that while still being able to reload a coherent GUI without showing
+    // "Demain" somewhere in the GUI. And that is something we want to avoid, we only want to show either "Aujourd'hui"
+    // or a real date. Otherwise, the human would start thinking with "Demain", and it would then need to be properly
+    // supported which over/complexify the code, the GUI and the workflow.
+    const condition = selection.condition;
+    if (Object.keys(condition).length === 1) {
+        if (((_a = condition.lessOrEqual) === null || _a === void 0 ? void 0 : _a.value) === 'today') {
+            delete condition.lessOrEqual;
+            condition.less = { value: 'tomorrow' };
+        }
+        else if (((_b = condition.greater) === null || _b === void 0 ? void 0 : _b.value) === 'today') {
+            delete condition.greater;
+            condition.greaterOrEqual = { value: 'tomorrow' };
+        }
+    }
+    for (const key in condition) {
+        const operator = condition[key];
+        if (operator && 'value' in operator) {
+            if (operator.value === 'today') {
+                operator.value = today;
+            }
+            else if (operator.value === 'tomorrow') {
+                operator.value = tomorrow;
+            }
         }
     }
-    const result = JSON.stringify(s);
-    return result === '[[]]' ? null : result;
+    return selection;
 }
+
 /**
- * Parse a string, probably coming from URL, into a selection
+ * Animations used by the mat-menu component.
+ * Animation duration and timing values are based on:
+ * https://material.io/guidelines/components/menus.html#menus-usage
  */
-function fromUrl(selections) {
-    if (!selections || !selections.length) {
-        return [[]];
+const naturalDropdownAnimations = {
+    /**
+     * This animation controls the menu panel's entry and exit from the page.
+     *
+     * When the menu panel is added to the DOM, it scales in and fades in its border.
+     *
+     * When the menu panel is removed from the DOM, it simply fades out after a brief
+     * delay to display the ripple.
+     */
+    transformMenu: trigger('transformMenu', [
+        state('void', style({
+            opacity: 0,
+            // This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
+            // as of 4.2, which causes the animation to be skipped if it starts from 0.
+            transform: 'scale(0.01, 0.01)',
+        })),
+        transition('void => enter', sequence([
+            query('.natural-dropdown-container-content', style({ opacity: 0 })),
+            animate('100ms linear', style({ opacity: 1, transform: 'scale(1, 0.5)' })),
+            group([
+                query('.natural-dropdown-container-content', animate('400ms cubic-bezier(0.55, 0, 0.55, 0.2)', style({ opacity: 1 }))),
+                animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ transform: 'scale(1, 1)' })),
+            ]),
+        ])),
+        transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 }))),
+    ]),
+    /**
+     * This animation fades in the background color and content of the menu panel
+     * after its containing element is scaled in.
+     */
+    fadeInItems: trigger('fadeInItems', [
+        // TODO(crisbeto): this is inside the `transformMenu`
+        // now. Remove next time we do breaking changes.
+        state('showing', style({ opacity: 1 })),
+        transition('void => *', [style({ opacity: 0 }), animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')]),
+    ]),
+};
+
+function throwMatDialogContentAlreadyAttachedError() {
+    throw Error('Attempting to attach dialog content after content is already attached');
+}
+const NATURAL_DROPDOWN_CONTAINER_DATA = new InjectionToken('NaturalDropdownContainerData');
+class NaturalDropdownContainerComponent extends BasePortalOutlet {
+    constructor(elementRef, focusTrapFactory, data) {
+        super();
+        this.elementRef = elementRef;
+        this.focusTrapFactory = focusTrapFactory;
+        this.data = data;
+        this.closed = new Subject();
+        /** Current state of the panel animation. */
+        this.panelAnimationState = 'void';
+        /** Emits whenever an animation on the menu completes. */
+        this.animationDone = new Subject();
+        this.focusTrap = null;
+        this.elementFocusedBeforeDialogWasOpened = null;
     }
-    const result = JSON.parse(selections);
-    for (const a of result) {
-        for (const b of a) {
-            b.field = b['f'];
-            b.condition = b['c'];
-            delete b['f'];
-            delete b['c'];
-        }
+    ngOnDestroy() {
+        this.closed.complete();
     }
-    if (result.length === 0) {
-        result.push([]);
+    close() {
+        this.closed.next();
+    }
+    attachTemplatePortal(portal) {
+        return this.portalOutlet.attachTemplatePortal(portal);
+    }
+    attachComponentPortal(portal) {
+        if (this.portalOutlet.hasAttached()) {
+            throwMatDialogContentAlreadyAttachedError();
+        }
+        return this.portalOutlet.attachComponentPortal(portal);
+    }
+    startAnimation() {
+        this.panelAnimationState = 'enter';
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'enter') {
+            this.trapFocus();
+        }
+        else if (event.toState === 'exit') {
+            this.restoreFocus();
+        }
+        this.animationDone.next();
+    }
+    trapFocus() {
+        if (!this.focusTrap) {
+            this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+        }
+        this.focusTrap.focusInitialElementWhenReady();
+    }
+    /** Restores focus to the element that was focused before the dialog opened. */
+    restoreFocus() {
+        const toFocus = this.elementFocusedBeforeDialogWasOpened;
+        // We need the extra check, because IE can set the `activeElement` to null in some cases.
+        if (toFocus && typeof toFocus.focus === 'function') {
+            toFocus.focus();
+        }
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+        }
     }
-    return result;
-}
-/**
- * Transform a search selection to navigation parameters to be used in URL.
- *
- * This is typically useful to craft URL to pre-filtered lists.
- */
-function toNavigationParameters(selections) {
-    const value = toUrl(selections);
-    return value ? { ns: JSON.stringify(value) } : {};
 }
+NaturalDropdownContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: NATURAL_DROPDOWN_CONTAINER_DATA }], target: i0.ɵɵFactoryTarget.Component });
+NaturalDropdownContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalDropdownContainerComponent, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i4$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [NATURAL_DROPDOWN_CONTAINER_DATA]
+                    }] }];
+    }, propDecorators: { portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
 
-const SESSION_STORAGE = new InjectionToken('Session storage that can be shimed when running on server or in tests');
-const LOCAL_STORAGE = new InjectionToken('Local storage that can be shimed when running on server or in tests');
-/**
- * Memory storage to keep store volatile things in memory
- *
- * Should be used to shim sessionStorage when running on server or in our tests
- */
-class NaturalMemoryStorage {
-    constructor() {
-        this.data = new Map();
-    }
-    get length() {
-        return this.data.size;
+class NaturalDropdownRef {
+    constructor(dropdownContainer, component, customProviders, parentInjector, containerRef) {
+        this.dropdownContainer = dropdownContainer;
+        this.closed = new Subject();
+        // Customize injector to allow data and dropdown reference injection in component
+        customProviders.push({ provide: NaturalDropdownRef, useValue: this });
+        const customInjector = Injector.create({ providers: customProviders, parent: parentInjector });
+        // Content (type component given in configuration)
+        const componentPortal = new ComponentPortal(component, undefined, customInjector);
+        const contentRef = containerRef.instance.attachComponentPortal(componentPortal);
+        this.componentInstance = contentRef.instance;
     }
-    clear() {
-        this.data.clear();
+    close(result) {
+        this.closed.next(result);
+        this.closed.complete();
+        this.dropdownContainer.close();
     }
-    getItem(key) {
-        const value = this.data.get(key);
-        return value === undefined ? null : value;
+}
+
+const NATURAL_DROPDOWN_DATA = new InjectionToken('NaturalDropdownData');
+class NaturalDropdownService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
     }
-    key(index) {
-        let i = 0;
-        for (const key of this.data.keys()) {
-            if (i++ === index) {
-                return key;
+    open(component, connectedElement, customProviders, showValidateButton) {
+        // Container data
+        const containerData = {
+            showValidateButton: showValidateButton,
+        };
+        const injectionTokens = [
+            {
+                provide: NATURAL_DROPDOWN_CONTAINER_DATA,
+                useValue: containerData,
+            },
+        ];
+        const containerInjector = Injector.create({ providers: injectionTokens, parent: this.injector });
+        // Container
+        const overlayRef = this.overlay.create(this.getOverlayConfig(connectedElement));
+        const containerPortal = new ComponentPortal(NaturalDropdownContainerComponent, undefined, containerInjector);
+        const containerRef = overlayRef.attach(containerPortal);
+        const dropdownContainer = containerRef.instance;
+        const dropdownRef = new NaturalDropdownRef(dropdownContainer, component, customProviders, this.injector, containerRef);
+        // Start animation that shows menu
+        dropdownContainer.startAnimation();
+        const close = () => {
+            if (dropdownRef.componentInstance.isValid() && dropdownRef.componentInstance.isDirty()) {
+                dropdownRef.close({
+                    condition: dropdownRef.componentInstance.getCondition(),
+                });
             }
-        }
-        return null;
+            else {
+                dropdownRef.close();
+            }
+        };
+        // When parent closes, remove overlay from dom and update "return" valu
+        dropdownContainer.closed.subscribe(() => {
+            overlayRef.dispose();
+            close();
+        });
+        // When click on backdrop, validate result.. ?
+        overlayRef
+            .backdropClick()
+            .pipe(takeUntil(dropdownContainer.closed))
+            .subscribe(() => dropdownContainer.close());
+        return dropdownRef;
     }
-    removeItem(key) {
-        this.data.delete(key);
+    /**
+     * This method builds the configuration object needed to create the overlay, the OverlayState.
+     */
+    getOverlayConfig(element) {
+        return new OverlayConfig({
+            positionStrategy: this.getPosition(element),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
     }
-    setItem(key, value) {
-        this.data.set(key, value);
+    getPosition(element) {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(element)
+            .withFlexibleDimensions(true)
+            .withViewportMargin(30)
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 10,
+            },
+        ]);
     }
 }
-NaturalMemoryStorage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NaturalMemoryStorage.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
+NaturalDropdownService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownService, deps: [{ token: i1$3.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalDropdownService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
-function sessionStorageFactory() {
-    try {
-        // eslint-disable-next-line no-restricted-globals
-        if (typeof sessionStorage !== 'undefined') {
-            // eslint-disable-next-line no-restricted-globals
-            return sessionStorage;
-        }
-    }
-    catch (e) {
-        // nothing do to
+        }], ctorParameters: function () { return [{ type: i1$3.Overlay }, { type: i0.Injector }]; } });
+
+const possibleComparableOperators = [
+    {
+        key: 'less',
+        label: '<',
+    },
+    {
+        key: 'lessOrEqual',
+        label: '≤',
+    },
+    {
+        key: 'equal',
+        label: '=',
+    },
+    {
+        key: 'greaterOrEqual',
+        label: '≥',
+    },
+    {
+        key: 'greater',
+        label: '>',
+    },
+];
+const possibleDiscreteOperators = [
+    {
+        key: 'is',
+        label: $localize `est`,
+    },
+    {
+        key: 'isnot',
+        label: $localize `n'est pas`,
+    },
+    {
+        key: 'any',
+        label: $localize `tous`,
+    },
+    {
+        key: 'none',
+        label: $localize `aucun`,
+    },
+];
+
+/**
+ * Get only date, without time and ignoring entirely the timezone
+ */
+function serialize(dateAdapter, value) {
+    if (!value) {
+        return '';
     }
-    return new NaturalMemoryStorage();
+    const y = dateAdapter.getYear(value);
+    const m = dateAdapter.getMonth(value) + 1;
+    const d = dateAdapter.getDate(value);
+    return y + '-' + (m < 10 ? '0' : '') + m + '-' + (d < 10 ? '0' : '') + d;
 }
 /**
- * Standard `sessionStorage` provider that is compatible with SSR.
- *
- * In SSR environment, or when `sessionStorage` is not available, will return a `NaturalMemoryStorage`
+ * Min date validator
  */
-const sessionStorageProvider = {
-    // Here we must use a factory that return directly the value, otherwise it will
-    // crash when running on server because the value does not exist (but the factory will
-    // never actually be called on server, so the server will not see the missing value)
-    provide: SESSION_STORAGE,
-    useFactory: sessionStorageFactory,
-};
-/**
- * Provide in-memory session storage to be used only in tests or SSR
- */
-const memorySessionStorageProvider = {
-    provide: SESSION_STORAGE,
-    useClass: NaturalMemoryStorage,
-};
-function localStorageFactory() {
-    try {
-        // eslint-disable-next-line no-restricted-globals
-        if (typeof localStorage !== 'undefined') {
-            // eslint-disable-next-line no-restricted-globals
-            return localStorage;
+function dateMin(dateAdapter, min) {
+    return (control) => {
+        if (control.value && dateAdapter.compareDate(control.value, min) < 0) {
+            return { min: true };
         }
-    }
-    catch (e) {
-        // Do nothing
-    }
-    return new NaturalMemoryStorage();
+        return null;
+    };
 }
 /**
- * Standard `localStorage` provider that is compatible with SSR.
- *
- * In SSR environment, or when `localStorage` is not available, will return a `NaturalMemoryStorage`
- */
-const localStorageProvider = {
-    // Here we must use a factory that return directly the value, otherwise it will
-    // crash when running on server because the value does not exist (but the factory will
-    // never actually be called on server, so the server will not see the missing value)
-    provide: LOCAL_STORAGE,
-    useFactory: localStorageFactory,
-};
-/**
- * Provide in-memory local storage to be used only in tests or SSR
+ * Max date validator
  */
-const memoryLocalStorageProvider = {
-    provide: LOCAL_STORAGE,
-    useClass: NaturalMemoryStorage,
-};
+function dateMax(dateAdapter, max) {
+    return (control) => {
+        if (control.value && dateAdapter.compareDate(control.value, max) > 0) {
+            return { max: true };
+        }
+        return null;
+    };
+}
 
-const NATURAL_PERSISTENCE_VALIDATOR = new InjectionToken('Validator for persisted value retrieved from NaturalPersistenceService. If returns false, the persisted value will never be returned.');
-class NaturalPersistenceService {
-    constructor(router, sessionStorage, isValid) {
-        var _a;
-        this.router = router;
-        this.sessionStorage = sessionStorage;
-        this.isValid = isValid;
-        // By default, anything is valid
-        this.isValid = (_a = this.isValid) !== null && _a !== void 0 ? _a : (() => true);
-    }
-    /**
-     * Persist in url and local storage the given value with the given key.
-     * When stored in storage, we need more "key" to identify the controller.
-     */
-    persist(key, value, route, storageKey, navigationExtras) {
-        this.persistInStorage(key, value, storageKey);
-        return this.persistInUrl(key, value, route, navigationExtras);
+class TypeDateComponent extends NaturalAbstractController {
+    constructor(data, dateAdapter, dateFormats) {
+        super();
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this.renderedValue = new BehaviorSubject('');
+        this.operatorCtrl = new FormControl('equal', { nonNullable: true });
+        this.valueCtrl = new FormControl(null);
+        this.todayCtrl = new FormControl(false);
+        this.operators = possibleComparableOperators;
+        this.form = new FormGroup({
+            operator: this.operatorCtrl,
+            value: this.valueCtrl,
+            today: this.todayCtrl,
+        });
+        this.defaults = {
+            min: null,
+            max: null,
+        };
+        this.configuration = Object.assign(Object.assign({}, this.defaults), data.configuration);
+        this.todayCtrl.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(isToday => {
+            if (isToday) {
+                this.valueCtrl.setValue(this.dateAdapter.today());
+                this.valueCtrl.disable();
+            }
+            else {
+                this.valueCtrl.enable();
+            }
+        });
+        merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges, this.todayCtrl.valueChanges)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => this.renderedValue.next(this.getRenderedValue()));
+        this.initValidators();
+        this.reloadCondition(data.condition);
     }
-    /**
-     * Return object with persisted data in url or in session storage
-     * Url has priority over session storage because of url sharing. When url is provided, session storage is ignored.
-     * Url and storage are synced when arriving in a component :
-     *  - When loading with url parameters, storage is updated to stay synced
-     *  - When loading without url, but with storage data, the url is updated
-     */
-    get(key, route, storageKey) {
-        // From url
-        let params = this.getFromUrl(key, route);
-        if (!this.isFalseyValue(params)) {
-            this.persistInStorage(key, params, storageKey);
-            return params;
+    getCondition() {
+        if (!this.valueCtrl.value) {
+            return {};
         }
-        // From storage
-        params = this.getFromStorage(key, storageKey);
-        if (!this.isFalseyValue(params)) {
-            this.persistInUrl(key, params, route);
-            return params;
+        const condition = {};
+        let operator = this.operatorCtrl.value;
+        let date;
+        let dayAfter;
+        if (this.todayCtrl.value) {
+            date = 'today';
+            dayAfter = 'tomorrow';
         }
-        return null;
-    }
-    /**
-     * Get given key from the url parameters
-     */
-    getFromUrl(key, route) {
-        const value = route.snapshot.paramMap.get(key);
-        return this.deserialize(key, null, value);
-    }
-    /**
-     * Add/override given pair key-value in the url
-     * Always JSON.stringify() the given value
-     * If the value is falsey, the pair key-value is removed from the url.
-     */
-    persistInUrl(key, value, route, navigationExtras) {
-        const params = clone(route.snapshot.url[route.snapshot.url.length - 1].parameters);
-        if (this.isFalseyValue(value)) {
-            delete params[key];
+        else {
+            date = serialize(this.dateAdapter, this.valueCtrl.value);
+            dayAfter = serialize(this.dateAdapter, this.getDayAfter(this.valueCtrl.value));
+        }
+        if (operator === 'equal') {
+            condition.greaterOrEqual = { value: date };
+            condition.less = { value: dayAfter };
         }
         else {
-            params[key] = JSON.stringify(value);
+            // Transparently adapt exclusive/inclusive ranges
+            if (date !== 'today') {
+                if (operator === 'greater') {
+                    operator = 'greaterOrEqual';
+                    date = dayAfter;
+                }
+                else if (operator === 'lessOrEqual') {
+                    operator = 'less';
+                    date = dayAfter;
+                }
+            }
+            condition[operator] = { value: date };
         }
-        navigationExtras = Object.assign(navigationExtras || {}, { relativeTo: route });
-        return this.router.navigate(['.', params], navigationExtras);
+        return condition;
     }
-    getFromStorage(key, storageKey) {
-        const value = this.sessionStorage.getItem(this.getStorageKey(key, storageKey));
-        return this.deserialize(key, storageKey, value);
+    isValid() {
+        return this.form.valid;
     }
-    /**
-     * Store value in session storage.
-     * If value is falsy, the entry is removed
-     */
-    persistInStorage(key, value, storageKey) {
-        if (this.isFalseyValue(value)) {
-            this.sessionStorage.removeItem(this.getStorageKey(key, storageKey));
+    isDirty() {
+        return this.form.dirty;
+    }
+    reloadCondition(condition) {
+        if (!condition) {
+            return;
+        }
+        // Special case for '='
+        if (condition.greaterOrEqual && condition.less) {
+            this.operatorCtrl.setValue('equal');
+            this.setTodayOrDate(condition.greaterOrEqual.value);
+            return;
+        }
+        for (const operator of this.operators) {
+            const reloadedOperator = condition[operator.key];
+            if (reloadedOperator) {
+                this.operatorCtrl.setValue(operator.key);
+                this.setTodayOrDate(reloadedOperator.value);
+            }
+        }
+    }
+    setTodayOrDate(value) {
+        if (value === 'today') {
+            this.valueCtrl.setValue(this.dateAdapter.today());
+            this.todayCtrl.setValue(true);
         }
         else {
-            this.sessionStorage.setItem(this.getStorageKey(key, storageKey), JSON.stringify(value));
+            this.valueCtrl.setValue(this.dateAdapter.deserialize(value));
+            this.todayCtrl.setValue(false);
         }
     }
-    getStorageKey(key, storageKey) {
-        return storageKey + '-' + key;
+    initValidators() {
+        const validators = [Validators.required];
+        if (this.configuration.min) {
+            validators.push(dateMin(this.dateAdapter, this.configuration.min));
+        }
+        if (this.configuration.max) {
+            validators.push(dateMax(this.dateAdapter, this.configuration.max));
+        }
+        this.valueCtrl.setValidators(validators);
     }
-    // Returns if the given value is falsey
-    // Falsey values are : null, undefined and empty string.
-    // This cause usually the parameter to be removed from url/storage instead of being stored with no value. Url would be polluted.
-    isFalseyValue(value) {
-        return value == null || value === ''; // == means null or undefined;
+    getDayAfter(date) {
+        return this.dateAdapter.addCalendarDays(this.dateAdapter.clone(date), 1);
     }
-    deserialize(key, storageKey, value) {
-        if (!value) {
-            return null;
+    getRenderedValue() {
+        const operator = this.operators.find(v => v.key === this.operatorCtrl.value);
+        let value = '';
+        if (this.todayCtrl.value) {
+            value = $localize `Aujourd'hui`;
         }
-        let result = null;
-        try {
-            result = JSON.parse(value);
+        else if (this.valueCtrl.value) {
+            value = this.dateAdapter.format(this.valueCtrl.value, this.dateFormats.display.dateInput);
+        }
+        if (operator && value) {
+            return operator.label + ' ' + value;
+        }
+        else {
+            return '';
         }
-        catch (e) { }
-        return this.isValid(key, storageKey, result) ? result : null;
     }
 }
-NaturalPersistenceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPersistenceService, deps: [{ token: i2$1.Router }, { token: SESSION_STORAGE }, { token: NATURAL_PERSISTENCE_VALIDATOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-NaturalPersistenceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPersistenceService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+TypeDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$4.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
+TypeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeDateComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-checkbox [formControl]=\"todayCtrl\" i18n>Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>*{align-self:end}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\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.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.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: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { 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: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-checkbox [formControl]=\"todayCtrl\" i18n>Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>*{align-self:end}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i2$1.Router }, { type: undefined, decorators: [{
+        return [{ type: undefined, decorators: [{
                         type: Inject,
-                        args: [SESSION_STORAGE]
-                    }] }, { type: undefined, decorators: [{
-                        type: Optional
-                    }, {
+                        args: [NATURAL_DROPDOWN_DATA]
+                    }] }, { type: i1$4.DateAdapter }, { type: undefined, decorators: [{
                         type: Inject,
-                        args: [NATURAL_PERSISTENCE_VALIDATOR]
+                        args: [MAT_DATE_FORMATS]
                     }] }];
     } });
 
-/**
- * A NaturalDataSource will connect immediately, in order to know as soon as possible if
- * we need to show a template at all (as seen in my-ichtus)
- *
- * It also allow some extra data manipulation
- */
-class NaturalDataSource extends DataSource {
-    constructor(value) {
-        super();
-        this.ngUnsubscribe = new Subject();
-        if (value instanceof Observable) {
-            this.internalData = new BehaviorSubject(null);
-            value.pipe(takeUntil(this.ngUnsubscribe)).subscribe(res => (this.data = res));
-        }
-        else {
-            this.internalData = new BehaviorSubject(value);
-        }
-    }
-    get internalDataObservable() {
-        return this.internalData;
+function toGraphQLDoctrineFilter(facets, selections) {
+    selections = deepClone(selections);
+    const filter = {};
+    if (!selections || selections.length === 0) {
+        selections = [[]];
     }
-    /**
-     * Array of data that should be rendered by the table, where each object represents one row.
-     */
-    get data() {
-        return this.internalData.value;
+    for (const groupSelections of selections) {
+        const group = {};
+        const neededInversedFlags = facets ? facets.filter(isInvertedFlag) : [];
+        for (const selection of groupSelections) {
+            const facet = getFacetFromSelection(facets, selection);
+            const transformedSelection = transformSelection(facet, selection);
+            // Skip inverted flag and remove it from needed inverted flags
+            if (isInvertedFlag(facet)) {
+                neededInversedFlags.splice(neededInversedFlags.indexOf(facet), 1);
+            }
+            else {
+                applyJoinAndCondition(group, transformedSelection);
+            }
+        }
+        for (const facet of neededInversedFlags) {
+            const transformedSelection = transformSelection(facet, {
+                field: facet.field,
+                name: facet.name,
+                condition: deepClone(facet.condition),
+            });
+            applyJoinAndCondition(group, transformedSelection);
+        }
+        addGroupToFilter(filter, group);
     }
-    set data(data) {
-        this.internalData.next(data);
+    return filter;
+}
+function applyJoinAndCondition(group, selection) {
+    // Apply join, then apply operator on that join, if field name has a '.'
+    const [joinedRelation, joinedField] = selection.field.split('.');
+    let container;
+    let wrappedCondition;
+    if (joinedField) {
+        container = addJoinToGroup(group, joinedRelation);
+        wrappedCondition = wrapWithFieldName(joinedField, selection.condition);
     }
-    connect() {
-        return this.internalData.pipe(takeUntil(this.ngUnsubscribe), map(data => (data ? data.items : [])));
+    else {
+        container = group;
+        wrappedCondition = wrapWithFieldName(selection.field, selection.condition);
     }
-    disconnect() {
-        this.ngUnsubscribe.next(); // unsubscribe everybody
-        this.ngUnsubscribe.complete(); // complete the stream, because we will never emit again
+    addConditionToContainer(container, wrappedCondition);
+}
+/**
+ * Only add join if it does not already exists
+ */
+function addJoinToGroup(group, joinedRelation) {
+    if (!group.joins) {
+        group.joins = {};
     }
-    push(item) {
-        if (!this.data) {
-            return;
-        }
-        const fullList = [...this.data.items];
-        fullList.push(item);
-        this.data = Object.assign(Object.assign({}, this.data), { items: fullList, length: fullList.length });
+    if (!group.joins[joinedRelation]) {
+        group.joins[joinedRelation] = {};
     }
-    pop() {
-        if (!this.data) {
-            return;
-        }
-        const fullList = [...this.data.items];
-        const removedElement = fullList.pop();
-        this.data = Object.assign(Object.assign({}, this.data), { items: fullList, length: fullList.length });
-        return removedElement;
+    return group.joins[joinedRelation];
+}
+/**
+ * Only add condition to group or join if it's valid
+ */
+function addConditionToContainer(container, condition) {
+    if (!condition) {
+        return;
     }
-    remove(item) {
-        if (!this.data) {
-            return;
+    if (!container.conditions) {
+        container.conditions = [];
+    }
+    container.conditions.push(condition);
+}
+/**
+ * Only add the group if there is something meaningful
+ */
+function addGroupToFilter(filter, group) {
+    if (group.conditions || group.joins) {
+        if (!filter.groups) {
+            filter.groups = [];
         }
-        const index = this.data.items.indexOf(item);
-        if (index > -1) {
-            const fullList = [...this.data.items];
-            fullList.splice(index, 1);
-            this.data = Object.assign(Object.assign({}, this.data), { items: fullList, length: fullList.length });
+        filter.groups.push(group);
+        if (filter.groups.length > 1) {
+            group.groupLogic = LogicalOperator.OR;
         }
     }
 }
-
-function unwrapNavigable(item) {
-    if ('item' in item && 'hasNavigation' in item) {
-        return item.item;
+function wrapWithFieldName(field, condition) {
+    const result = {};
+    // We assume a custom operator "search"
+    if (field === 'search' && condition.like) {
+        return { custom: { search: { value: condition.like.value } } };
     }
-    return item;
+    else {
+        result[field] = condition;
+    }
+    return result;
+}
+function transformSelection(facet, selection) {
+    const newSelection = facet && facet.transform ? facet.transform(selection) : selection;
+    return isDateFacet(facet) ? replaceToday(newSelection) : selection;
+}
+function isInvertedFlag(facet) {
+    return (!!facet && 'inversed' in facet && facet.inversed) || false;
+}
+function isDateFacet(facet) {
+    return !!facet && 'component' in facet && facet.component === TypeDateComponent;
 }
+
 /**
- * This class helps managing a list of paginated items that can be filtered,
- * selected, and then bulk actions can be performed on selection.
- *
- * Components inheriting from this class can be used as standalone with input attributes.
+ * Returns a string representation of the selection that can be used in URL.
  *
- * Usage :
- * <natural-my-listing [forcedVariables]="{filter:...}" [selectedColumns]="['col1']" [persistSearch]="false">
+ * The string can be parsed back with `fromUrl()`
  */
-// @dynamic
-class NaturalAbstractList extends NaturalAbstractPanel {
-    constructor(service, injector) {
-        super();
-        this.service = service;
-        this.injector = injector;
-        /**
-         * Wherever search should be loaded from url/storage and persisted in it too.
-         */
-        this.persistSearch = true;
-        /**
-         * Columns list after interaction with <natural-columns-picker>
-         */
-        this.columnsForTable = [];
-        /**
-         * The default column selection that automatically happened after <natural-columns-picker> initialization
-         */
-        this.defaultSelectedColumns = null;
-        /**
-         * Selection for bulk actions
-         */
-        this.selection = new SelectionModel(true, []);
-        /**
-         * Next executed action from bulk menu
-         */
-        this.bulkActionSelected = null;
-        /**
-         * Centralisation of query variables
-         */
-        this.variablesManager = new NaturalQueryVariablesManager();
-        /**
-         * Configuration for natural-search facets
-         */
-        this.naturalSearchFacets = [];
-        /**
-         * Result of a search (can be provided as input for initialisation)
-         */
-        this.naturalSearchSelections = [[]];
-        /**
-         * List of page sizes
-         */
-        this.pageSizeOptions = [5, 10, 25, 50, 100, 200];
-        /**
-         * Initial pagination setup
-         */
-        this.defaultPagination = {
-            offset: null,
-            pageIndex: 0,
-            pageSize: 25,
-        };
-        this.router = injector.get(Router);
-        this.route = injector.get(ActivatedRoute);
-        this.alertService = injector.get(NaturalAlertService);
-        this.persistenceService = injector.get(NaturalPersistenceService);
+function toUrl(selections) {
+    if (!selections || !selections.length) {
+        return null;
     }
-    /**
-     * Variables that are always forced on a list, in addition to whatever the end-user might select
-     */
-    set forcedVariables(variables) {
-        if (variables) {
-            this.applyForcedVariables(variables);
+    const s = deepClone(selections);
+    for (const a of s) {
+        for (const b of a) {
+            b['f'] = b.field;
+            b['c'] = b.condition;
+            delete b.field;
+            delete b.condition;
         }
     }
-    /**
-     * If change, check DocumentsComponent that overrides this function without calling super.ngOnInit().
-     */
-    ngOnInit() {
-        this.routeData = this.route.snapshot.data;
-        this.initFromRoute();
-        this.initFromPersisted();
-        this.variablesManager.defaults('pagination', { pagination: this.defaultPagination });
-        this.variablesManager.defaults('sorting', { sorting: this.defaultSorting });
-        this.dataSource = new NaturalDataSource(this.getDataObservable());
-        this.selection.clear();
-        // Update natural search when history changes (back/forward buttons)
-        // History state is detectable only on NavigationStart (popstate trigger)
-        // But we need parameters from url after NavigationEnd. So proceed in two steps with a flag.
-        let isPopState = false;
-        this.router.events
-            .pipe(takeUntil(this.ngUnsubscribe), filter(event => event instanceof NavigationStart && event.navigationTrigger === 'popstate'))
-            .subscribe(() => {
-            isPopState = true;
-        });
-        this.router.events
-            .pipe(takeUntil(this.ngUnsubscribe), filter(event => event instanceof NavigationEnd && isPopState))
-            .subscribe(() => {
-            isPopState = false; // reset flag
-            this.naturalSearchSelections = fromUrl(this.persistenceService.getFromUrl('ns', this.route));
-        });
+    const result = JSON.stringify(s);
+    return result === '[[]]' ? null : result;
+}
+/**
+ * Parse a string, probably coming from URL, into a selection
+ */
+function fromUrl(selections) {
+    if (!selections || !selections.length) {
+        return [[]];
     }
-    /**
-     * Persist search and then launch whatever is required to refresh the list
-     */
-    search(naturalSearchSelections, navigationExtras, resetPagination = true) {
-        // Reset page index to restart the pagination (preserve pageSize)
-        if (resetPagination) {
-            this.variablesManager.merge('pagination', {
-                pagination: pick(this.defaultPagination, ['offset', 'pageIndex']),
-            });
+    const result = JSON.parse(selections);
+    for (const a of result) {
+        for (const b of a) {
+            b.field = b['f'];
+            b.condition = b['c'];
+            delete b['f'];
+            delete b['c'];
         }
-        // Persist if activated
-        // Two parallel navigations conflict. We first persist the search, then the pagination
-        if (this.persistSearch && !this.isPanel) {
-            const promise = this.persistenceService.persist('ns', toUrl(naturalSearchSelections), this.route, this.getStorageKey());
-            const pagination = this.getPagination();
-            this.pagination(pagination, promise, navigationExtras);
+    }
+    if (result.length === 0) {
+        result.push([]);
+    }
+    return result;
+}
+/**
+ * Transform a search selection to navigation parameters to be used in URL.
+ *
+ * This is typically useful to craft URL to pre-filtered lists.
+ */
+function toNavigationParameters(selections) {
+    const value = toUrl(selections);
+    return value ? { ns: JSON.stringify(value) } : {};
+}
+
+const SESSION_STORAGE = new InjectionToken('Session storage that can be shimed when running on server or in tests');
+const LOCAL_STORAGE = new InjectionToken('Local storage that can be shimed when running on server or in tests');
+/**
+ * Memory storage to keep store volatile things in memory
+ *
+ * Should be used to shim sessionStorage when running on server or in our tests
+ */
+class NaturalMemoryStorage {
+    constructor() {
+        this.data = new Map();
+    }
+    get length() {
+        return this.data.size;
+    }
+    clear() {
+        this.data.clear();
+    }
+    getItem(key) {
+        const value = this.data.get(key);
+        return value === undefined ? null : value;
+    }
+    key(index) {
+        let i = 0;
+        for (const key of this.data.keys()) {
+            if (i++ === index) {
+                return key;
+            }
+        }
+        return null;
+    }
+    removeItem(key) {
+        this.data.delete(key);
+    }
+    setItem(key, value) {
+        this.data.set(key, value);
+    }
+}
+NaturalMemoryStorage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalMemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalMemoryStorage.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalMemoryStorage, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalMemoryStorage, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+function sessionStorageFactory() {
+    try {
+        // eslint-disable-next-line no-restricted-globals
+        if (typeof sessionStorage !== 'undefined') {
+            // eslint-disable-next-line no-restricted-globals
+            return sessionStorage;
+        }
+    }
+    catch (e) {
+        // nothing do to
+    }
+    return new NaturalMemoryStorage();
+}
+/**
+ * Standard `sessionStorage` provider that is compatible with SSR.
+ *
+ * In SSR environment, or when `sessionStorage` is not available, will return a `NaturalMemoryStorage`
+ */
+const sessionStorageProvider = {
+    // Here we must use a factory that return directly the value, otherwise it will
+    // crash when running on server because the value does not exist (but the factory will
+    // never actually be called on server, so the server will not see the missing value)
+    provide: SESSION_STORAGE,
+    useFactory: sessionStorageFactory,
+};
+/**
+ * Provide in-memory session storage to be used only in tests or SSR
+ */
+const memorySessionStorageProvider = {
+    provide: SESSION_STORAGE,
+    useClass: NaturalMemoryStorage,
+};
+function localStorageFactory() {
+    try {
+        // eslint-disable-next-line no-restricted-globals
+        if (typeof localStorage !== 'undefined') {
+            // eslint-disable-next-line no-restricted-globals
+            return localStorage;
+        }
+    }
+    catch (e) {
+        // Do nothing
+    }
+    return new NaturalMemoryStorage();
+}
+/**
+ * Standard `localStorage` provider that is compatible with SSR.
+ *
+ * In SSR environment, or when `localStorage` is not available, will return a `NaturalMemoryStorage`
+ */
+const localStorageProvider = {
+    // Here we must use a factory that return directly the value, otherwise it will
+    // crash when running on server because the value does not exist (but the factory will
+    // never actually be called on server, so the server will not see the missing value)
+    provide: LOCAL_STORAGE,
+    useFactory: localStorageFactory,
+};
+/**
+ * Provide in-memory local storage to be used only in tests or SSR
+ */
+const memoryLocalStorageProvider = {
+    provide: LOCAL_STORAGE,
+    useClass: NaturalMemoryStorage,
+};
+
+const NATURAL_PERSISTENCE_VALIDATOR = new InjectionToken('Validator for persisted value retrieved from NaturalPersistenceService. If returns false, the persisted value will never be returned.');
+class NaturalPersistenceService {
+    constructor(router, sessionStorage, isValid) {
+        var _a;
+        this.router = router;
+        this.sessionStorage = sessionStorage;
+        this.isValid = isValid;
+        // By default, anything is valid
+        this.isValid = (_a = this.isValid) !== null && _a !== void 0 ? _a : (() => true);
+    }
+    /**
+     * Persist in url and local storage the given value with the given key.
+     * When stored in storage, we need more "key" to identify the controller.
+     */
+    persist(key, value, route, storageKey, navigationExtras) {
+        this.persistInStorage(key, value, storageKey);
+        return this.persistInUrl(key, value, route, navigationExtras);
+    }
+    /**
+     * Return object with persisted data in url or in session storage
+     * Url has priority over session storage because of url sharing. When url is provided, session storage is ignored.
+     * Url and storage are synced when arriving in a component :
+     *  - When loading with url parameters, storage is updated to stay synced
+     *  - When loading without url, but with storage data, the url is updated
+     */
+    get(key, route, storageKey) {
+        // From url
+        let params = this.getFromUrl(key, route);
+        if (!this.isFalseyValue(params)) {
+            this.persistInStorage(key, params, storageKey);
+            return params;
+        }
+        // From storage
+        params = this.getFromStorage(key, storageKey);
+        if (!this.isFalseyValue(params)) {
+            this.persistInUrl(key, params, route);
+            return params;
+        }
+        return null;
+    }
+    /**
+     * Get given key from the url parameters
+     */
+    getFromUrl(key, route) {
+        const value = route.snapshot.paramMap.get(key);
+        return this.deserialize(key, null, value);
+    }
+    /**
+     * Add/override given pair key-value in the url
+     * Always JSON.stringify() the given value
+     * If the value is falsey, the pair key-value is removed from the url.
+     */
+    persistInUrl(key, value, route, navigationExtras) {
+        const params = clone(route.snapshot.url[route.snapshot.url.length - 1].parameters);
+        if (this.isFalseyValue(value)) {
+            delete params[key];
+        }
+        else {
+            params[key] = JSON.stringify(value);
+        }
+        navigationExtras = Object.assign(navigationExtras || {}, { relativeTo: route });
+        return this.router.navigate(['.', params], navigationExtras);
+    }
+    getFromStorage(key, storageKey) {
+        const value = this.sessionStorage.getItem(this.getStorageKey(key, storageKey));
+        return this.deserialize(key, storageKey, value);
+    }
+    /**
+     * Store value in session storage.
+     * If value is falsy, the entry is removed
+     */
+    persistInStorage(key, value, storageKey) {
+        if (this.isFalseyValue(value)) {
+            this.sessionStorage.removeItem(this.getStorageKey(key, storageKey));
+        }
+        else {
+            this.sessionStorage.setItem(this.getStorageKey(key, storageKey), JSON.stringify(value));
+        }
+    }
+    getStorageKey(key, storageKey) {
+        return storageKey + '-' + key;
+    }
+    // Returns if the given value is falsey
+    // Falsey values are : null, undefined and empty string.
+    // This cause usually the parameter to be removed from url/storage instead of being stored with no value. Url would be polluted.
+    isFalseyValue(value) {
+        return value == null || value === ''; // == means null or undefined;
+    }
+    deserialize(key, storageKey, value) {
+        if (!value) {
+            return null;
+        }
+        let result = null;
+        try {
+            result = JSON.parse(value);
+        }
+        catch (e) {
+            // noop
+        }
+        return this.isValid(key, storageKey, result) ? result : null;
+    }
+}
+NaturalPersistenceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPersistenceService, deps: [{ token: i2$1.Router }, { token: SESSION_STORAGE }, { token: NATURAL_PERSISTENCE_VALIDATOR, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalPersistenceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPersistenceService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalPersistenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i2$1.Router }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SESSION_STORAGE]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NATURAL_PERSISTENCE_VALIDATOR]
+                    }] }];
+    } });
+
+/**
+ * A NaturalDataSource will connect immediately, in order to know as soon as possible if
+ * we need to show a template at all (as seen in my-ichtus)
+ *
+ * It also allow some extra data manipulation
+ */
+class NaturalDataSource extends DataSource {
+    constructor(value) {
+        super();
+        this.ngUnsubscribe = new Subject();
+        if (value instanceof Observable) {
+            this.internalData = new BehaviorSubject(null);
+            value.pipe(takeUntil(this.ngUnsubscribe)).subscribe(res => (this.data = res));
+        }
+        else {
+            this.internalData = new BehaviorSubject(value);
+        }
+    }
+    get internalDataObservable() {
+        return this.internalData;
+    }
+    /**
+     * Array of data that should be rendered by the table, where each object represents one row.
+     */
+    get data() {
+        return this.internalData.value;
+    }
+    set data(data) {
+        this.internalData.next(data);
+    }
+    connect() {
+        return this.internalData.pipe(takeUntil(this.ngUnsubscribe), map(data => (data ? data.items : [])));
+    }
+    disconnect() {
+        this.ngUnsubscribe.next(); // unsubscribe everybody
+        this.ngUnsubscribe.complete(); // complete the stream, because we will never emit again
+    }
+    push(item) {
+        if (!this.data) {
+            return;
+        }
+        const fullList = [...this.data.items];
+        fullList.push(item);
+        this.data = Object.assign(Object.assign({}, this.data), { items: fullList, length: fullList.length });
+    }
+    pop() {
+        if (!this.data) {
+            return;
+        }
+        const fullList = [...this.data.items];
+        const removedElement = fullList.pop();
+        this.data = Object.assign(Object.assign({}, this.data), { items: fullList, length: fullList.length });
+        return removedElement;
+    }
+    remove(item) {
+        if (!this.data) {
+            return;
+        }
+        const index = this.data.items.indexOf(item);
+        if (index > -1) {
+            const fullList = [...this.data.items];
+            fullList.splice(index, 1);
+            this.data = Object.assign(Object.assign({}, this.data), { items: fullList, length: fullList.length });
+        }
+    }
+}
+
+function unwrapNavigable(item) {
+    if ('item' in item && 'hasNavigation' in item) {
+        return item.item;
+    }
+    return item;
+}
+/**
+ * This class helps managing a list of paginated items that can be filtered,
+ * selected, and then bulk actions can be performed on selection.
+ *
+ * Components inheriting from this class can be used as standalone with input attributes.
+ *
+ * Usage :
+ * <natural-my-listing [forcedVariables]="{filter:...}" [selectedColumns]="['col1']" [persistSearch]="false">
+ */
+// @dynamic
+class NaturalAbstractList extends NaturalAbstractPanel {
+    constructor(service, injector) {
+        super();
+        this.service = service;
+        this.injector = injector;
+        /**
+         * Wherever search should be loaded from url/storage and persisted in it too.
+         */
+        this.persistSearch = true;
+        /**
+         * Columns list after interaction with <natural-columns-picker>
+         */
+        this.columnsForTable = [];
+        /**
+         * The default column selection that automatically happened after <natural-columns-picker> initialization
+         */
+        this.defaultSelectedColumns = null;
+        /**
+         * Selection for bulk actions
+         */
+        this.selection = new SelectionModel(true, []);
+        /**
+         * Next executed action from bulk menu
+         */
+        this.bulkActionSelected = null;
+        /**
+         * Centralisation of query variables
+         */
+        this.variablesManager = new NaturalQueryVariablesManager();
+        /**
+         * Configuration for natural-search facets
+         */
+        this.naturalSearchFacets = [];
+        /**
+         * Result of a search (can be provided as input for initialisation)
+         */
+        this.naturalSearchSelections = [[]];
+        /**
+         * List of page sizes
+         */
+        this.pageSizeOptions = [5, 10, 25, 50, 100, 200];
+        /**
+         * Initial pagination setup
+         */
+        this.defaultPagination = {
+            offset: null,
+            pageIndex: 0,
+            pageSize: 25,
+        };
+        this.router = injector.get(Router);
+        this.route = injector.get(ActivatedRoute);
+        this.alertService = injector.get(NaturalAlertService);
+        this.persistenceService = injector.get(NaturalPersistenceService);
+    }
+    /**
+     * Variables that are always forced on a list, in addition to whatever the end-user might select
+     */
+    set forcedVariables(variables) {
+        if (variables) {
+            this.applyForcedVariables(variables);
+        }
+    }
+    /**
+     * If change, check DocumentsComponent that overrides this function without calling super.ngOnInit().
+     */
+    ngOnInit() {
+        this.routeData = this.route.snapshot.data;
+        this.initFromRoute();
+        this.initFromPersisted();
+        this.variablesManager.defaults('pagination', { pagination: this.defaultPagination });
+        this.variablesManager.defaults('sorting', { sorting: this.defaultSorting });
+        this.dataSource = new NaturalDataSource(this.getDataObservable());
+        this.selection.clear();
+        // Update natural search when history changes (back/forward buttons)
+        // History state is detectable only on NavigationStart (popstate trigger)
+        // But we need parameters from url after NavigationEnd. So proceed in two steps with a flag.
+        let isPopState = false;
+        this.router.events
+            .pipe(takeUntil(this.ngUnsubscribe), filter(event => event instanceof NavigationStart && event.navigationTrigger === 'popstate'))
+            .subscribe(() => {
+            isPopState = true;
+        });
+        this.router.events
+            .pipe(takeUntil(this.ngUnsubscribe), filter(event => event instanceof NavigationEnd && isPopState))
+            .subscribe(() => {
+            isPopState = false; // reset flag
+            this.naturalSearchSelections = fromUrl(this.persistenceService.getFromUrl('ns', this.route));
+        });
+    }
+    /**
+     * Persist search and then launch whatever is required to refresh the list
+     */
+    search(naturalSearchSelections, navigationExtras, resetPagination = true) {
+        // Reset page index to restart the pagination (preserve pageSize)
+        if (resetPagination) {
+            this.variablesManager.merge('pagination', {
+                pagination: pick(this.defaultPagination, ['offset', 'pageIndex']),
+            });
+        }
+        // Persist if activated
+        // Two parallel navigations conflict. We first persist the search, then the pagination
+        if (this.persistSearch && !this.isPanel) {
+            const promise = this.persistenceService.persist('ns', toUrl(naturalSearchSelections), this.route, this.getStorageKey());
+            const pagination = this.getPagination();
+            this.pagination(pagination, promise, navigationExtras);
         }
         this.translateSearchAndRefreshList(naturalSearchSelections);
     }
@@ -3608,24 +4183,28 @@ class NaturalAbstractModelService {
     /**
      * List of individual fields validators
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getFormValidators(model) {
         return {};
     }
     /**
      * List of individual async fields validators
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getFormAsyncValidators(model) {
         return {};
     }
     /**
      * List of grouped fields validators (like password + confirm password)
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getFormGroupValidators(model) {
         return [];
     }
     /**
      * List of async group fields validators (like unique constraint on multiple columns)
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getFormGroupAsyncValidators(model) {
         return [];
     }
@@ -4018,6 +4597,7 @@ class NaturalAbstractModelService {
      *
      * This is typically a site or state ID
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getPartialVariablesForCreation(object) {
         return {};
     }
@@ -4026,6 +4606,7 @@ class NaturalAbstractModelService {
      *
      * This is typically a site or state ID
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getPartialVariablesForUpdate(object) {
         return {};
     }
@@ -4034,6 +4615,7 @@ class NaturalAbstractModelService {
      *
      * This is typically a site or state ID
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getPartialVariablesForDelete(objects) {
         return {};
     }
@@ -4240,14 +4822,14 @@ class NaturalEnumService {
         }));
     }
 }
-NaturalEnumService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEnumService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalEnumService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEnumService, deps: [{ token: i1$5.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
 NaturalEnumService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEnumService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalEnumService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Apollo }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.Apollo }]; } });
 
 /**
  * Query to get list of mutations
@@ -4386,14 +4968,14 @@ class NaturalLinkMutationService {
         }`;
     }
 }
-NaturalLinkMutationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkMutationService, deps: [{ token: i1$1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalLinkMutationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkMutationService, deps: [{ token: i1$5.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
 NaturalLinkMutationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkMutationService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkMutationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Apollo }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.Apollo }]; } });
 
 const patterns = [
     /^(?<day>\d{1,2})\.(?<month>\d{1,2})\.(?<year>\d{4}|\d{2})$/,
@@ -4567,13 +5149,13 @@ class NaturalIconComponent {
         }
     }
 }
-NaturalIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalIconComponent, deps: [{ token: i1$2.MatIconRegistry }, { token: i2$2.DomSanitizer }, { token: IconsConfigService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalIconComponent, selector: "natural-icon", inputs: { label: "label", labelColor: "labelColor", labelPosition: "labelPosition", name: "name", size: "size" }, host: { properties: { "style.color": "this.fgColor", "class.material-icons": "this.isMaterialIcon", "class.mat-icon": "this.isIcon", "style.min-width.px": "this.width", "style.min-height.px": "this.height", "style.font-size.px": "this.fontSize" } }, ngImport: i0, template: "<mat-icon *ngIf=\"icon?.font\" [class]=\"icon.class\" data-nosnippet>{{ icon.font }}</mat-icon>\n<mat-icon *ngIf=\"icon?.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+NaturalIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalIconComponent, deps: [{ token: i1$6.MatIconRegistry }, { token: i2$2.DomSanitizer }, { token: IconsConfigService }], target: i0.ɵɵFactoryTarget.Component });
+NaturalIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalIconComponent, selector: "natural-icon", inputs: { label: "label", labelColor: "labelColor", labelPosition: "labelPosition", name: "name", size: "size" }, host: { properties: { "style.color": "this.fgColor", "class.material-icons": "this.isMaterialIcon", "class.mat-icon": "this.isIcon", "style.min-width.px": "this.width", "style.min-height.px": "this.height", "style.font-size.px": "this.fontSize" } }, ngImport: i0, template: "<mat-icon *ngIf=\"icon?.font\" [class]=\"icon.class\" data-nosnippet>{{ icon.font }}</mat-icon>\n<mat-icon *ngIf=\"icon?.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-icon', template: "<mat-icon *ngIf=\"icon?.font\" [class]=\"icon.class\" data-nosnippet>{{ icon.font }}</mat-icon>\n<mat-icon *ngIf=\"icon?.svg\" [class]=\"icon.class\" [svgIcon]=\"icon.name\" class=\"svg-icon\"></mat-icon>\n\n<div *ngIf=\"label\" [ngClass]=\"labelColor + ' ' + labelPosition\" class=\"label\">{{ label }}</div>\n", styles: [":host{position:relative}:host mat-icon{background-repeat:inherit;display:inherit;fill:inherit;height:inherit;width:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit;text-transform:inherit;letter-spacing:inherit;word-wrap:inherit;white-space:inherit;direction:inherit;-webkit-font-smoothing:inherit;text-rendering:inherit;-moz-osx-font-smoothing:inherit;font-feature-settings:inherit;min-height:inherit;min-width:inherit;vertical-align:unset}:host .label{position:absolute;padding:2px;border-radius:100%;font-family:Quicksand sans-serif;font-size:14px;line-height:1em;height:14px;min-width:14px;text-align:center}:host .label.top-left{top:0;left:0;transform:translate(-50%)}:host .label.top-right{top:0;right:0;transform:translate(50%)}:host .label.bottom-left{bottom:0;left:0;transform:translate(-50%)}:host .label.bottom-right{bottom:0;right:0;transform:translate(50%)}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.MatIconRegistry }, { type: i2$2.DomSanitizer }, { type: undefined, decorators: [{
+        return [{ type: i1$6.MatIconRegistry }, { type: i2$2.DomSanitizer }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [IconsConfigService]
                     }] }];
@@ -4670,7 +5252,7 @@ class NaturalColumnsPickerComponent {
     }
 }
 NaturalColumnsPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NaturalColumnsPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalColumnsPickerComponent, selector: "natural-columns-picker", inputs: { selections: "selections" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "availableColumns", predicate: NaturalColumnsPickerColumnDirective }], ngImport: i0, template: "<div>\n    <mat-menu #naturalMenu=\"matMenu\">\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            class=\"mat-menu-item\"\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </mat-menu>\n    <button [matMenuTriggerFor]=\"naturalMenu\" mat-icon-button i18n-matTooltip matTooltip=\"S\u00E9lectionner les colonnes\">\n        <natural-icon name=\"view_column\"></natural-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NaturalColumnsPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalColumnsPickerComponent, selector: "natural-columns-picker", inputs: { selections: "selections" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "availableColumns", predicate: NaturalColumnsPickerColumnDirective }], ngImport: i0, template: "<div>\n    <mat-menu #naturalMenu=\"matMenu\">\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            class=\"mat-menu-item\"\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </mat-menu>\n    <button [matMenuTriggerFor]=\"naturalMenu\" mat-icon-button i18n-matTooltip matTooltip=\"S\u00E9lectionner les colonnes\">\n        <natural-icon name=\"view_column\"></natural-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-columns-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n    <mat-menu #naturalMenu=\"matMenu\">\n        <div\n            (click)=\"$event.stopPropagation(); column.checked = !column.checked; updateColumns()\"\n            *ngFor=\"let column of displayedColumns\"\n            class=\"mat-menu-item\"\n        >\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"updateColumns()\" [(ngModel)]=\"column.checked\">{{\n                column.label\n            }}</mat-checkbox>\n        </div>\n    </mat-menu>\n    <button [matMenuTriggerFor]=\"naturalMenu\" mat-icon-button i18n-matTooltip matTooltip=\"S\u00E9lectionner les colonnes\">\n        <natural-icon name=\"view_column\"></natural-icon>\n    </button>\n</div>\n" }]
@@ -4855,14 +5437,14 @@ class NaturalLinkableTabDirective extends NaturalAbstractController {
         return this.component._tabs.toArray().findIndex(tab => fragment === getTabId(tab));
     }
 }
-NaturalLinkableTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkableTabDirective, deps: [{ token: i1$4.MatTabGroup }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Directive });
+NaturalLinkableTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkableTabDirective, deps: [{ token: i1$7.MatTabGroup }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Directive });
 NaturalLinkableTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: NaturalLinkableTabDirective, selector: "mat-tab-group[naturalLinkableTab]", inputs: { naturalLinkableTab: "naturalLinkableTab" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalLinkableTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-tab-group[naturalLinkableTab]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.MatTabGroup }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }]; }, propDecorators: { naturalLinkableTab: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatTabGroup }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }]; }, propDecorators: { naturalLinkableTab: [{
                 type: Input
             }] } });
 
@@ -5233,418 +5815,149 @@ class NaturalSeoService {
                 value: stripTags(value),
             });
         }
-        else {
-            this.metaTagService.removeTag(`name="${name}"`);
-        }
-    }
-    /**
-     * Returns the data from the most deep/specific activated route
-     */
-    getRouteData(route) {
-        var _a;
-        if (route.firstChild) {
-            return this.getRouteData(route.firstChild);
-        }
-        else {
-            return (_a = route.data) !== null && _a !== void 0 ? _a : null;
-        }
-    }
-    toBasic(seo) {
-        var _a, _b, _c, _d, _e;
-        if (!this.routeData) {
-            throw new Error('Must have some route data to get basic SEO');
-        }
-        if (typeof seo === 'function') {
-            return seo(this.routeData);
-        }
-        else if ('resolveKey' in seo) {
-            const data = this.routeData[seo.resolveKey];
-            if (!data) {
-                throw new Error('Could not find resolved data for SEO service with key: ' + seo.resolveKey);
-            }
-            return {
-                title: (_d = (_b = (_a = data.model) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : (_c = data.model) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '',
-                description: (_e = data.model) === null || _e === void 0 ? void 0 : _e.description,
-                robots: seo.robots,
-            };
-        }
-        return seo;
-    }
-}
-NaturalSeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSeoService, deps: [{ token: NATURAL_SEO_CONFIG }, { token: i2$1.Router }, { token: i2$2.Title }, { token: i2$2.Meta }], target: i0.ɵɵFactoryTarget.Injectable });
-NaturalSeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSeoService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [NATURAL_SEO_CONFIG]
-                    }] }, { type: i2$1.Router }, { type: i2$2.Title }, { type: i2$2.Meta }];
-    } });
-
-/*
- * Public API Surface of natural
- */
-
-class NaturalDetailHeaderComponent {
-    constructor() {
-        /**
-         * Must be set to get proper links when used in panels
-         */
-        this.isPanel = false;
-        /**
-         * If given will show icon before title
-         */
-        this.icon = '';
-        /**
-         * Title shown if model has no name, or empty name.
-         *
-         * Typically should be the human name for the object type, eg: 'Product'
-         */
-        this.label = '';
-        /**
-         * Label of the root of the breadcrumb, defaults to the value of `label`.
-         *
-         * Typically should be the plural form of the object type, eg: 'Products'
-         */
-        this.rootLabel = '';
-        /**
-         * Title shown if model has no id.
-         *
-         * Typically should be similar to 'New product'.
-         */
-        this.newLabel = '';
-        this.breadcrumbs = [];
-        this.listRoute = [];
-    }
-    getRootLink() {
-        return [this.currentBaseUrl || '/'].concat(this.listRoute);
-    }
-    getLink(id) {
-        if (this.link) {
-            return this.getRootLink().concat(this.link(id));
-        }
-        return this.getRootLink().concat([id]);
-    }
-}
-NaturalDetailHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalDetailHeaderComponent, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n        rootLabel || label\n    }}</a>\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <natural-icon [name]=\"icon\"></natural-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body natural-icon{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'natural-detail-header', template: "<div class=\"breadcrumb\">\n    <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n        rootLabel || label\n    }}</a>\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <natural-icon [name]=\"icon\"></natural-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body natural-icon{display:none}}\n"] }]
-        }], propDecorators: { currentBaseUrl: [{
-                type: Input
-            }], isPanel: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], rootLabel: [{
-                type: Input
-            }], newLabel: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], breadcrumbs: [{
-                type: Input
-            }], listRoute: [{
-                type: Input
-            }], listFragment: [{
-                type: Input
-            }], link: [{
-                type: Input
-            }] } });
-
-class NaturalDetailHeaderModule {
-}
-NaturalDetailHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NaturalDetailHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, declarations: [NaturalDetailHeaderComponent], imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule], exports: [NaturalDetailHeaderComponent] });
-NaturalDetailHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NaturalDetailHeaderComponent],
-                    imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule],
-                    exports: [NaturalDetailHeaderComponent],
-                }]
-        }] });
-
-/*
- * Public API Surface of natural
- */
-
-/**
- * Animations used by the mat-menu component.
- * Animation duration and timing values are based on:
- * https://material.io/guidelines/components/menus.html#menus-usage
- */
-const naturalDropdownAnimations = {
-    /**
-     * This animation controls the menu panel's entry and exit from the page.
-     *
-     * When the menu panel is added to the DOM, it scales in and fades in its border.
-     *
-     * When the menu panel is removed from the DOM, it simply fades out after a brief
-     * delay to display the ripple.
-     */
-    transformMenu: trigger('transformMenu', [
-        state('void', style({
-            opacity: 0,
-            // This starts off from 0.01, instead of 0, because there's an issue in the Angular animations
-            // as of 4.2, which causes the animation to be skipped if it starts from 0.
-            transform: 'scale(0.01, 0.01)',
-        })),
-        transition('void => enter', sequence([
-            query('.natural-dropdown-container-content', style({ opacity: 0 })),
-            animate('100ms linear', style({ opacity: 1, transform: 'scale(1, 0.5)' })),
-            group([
-                query('.natural-dropdown-container-content', animate('400ms cubic-bezier(0.55, 0, 0.55, 0.2)', style({ opacity: 1 }))),
-                animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ transform: 'scale(1, 1)' })),
-            ]),
-        ])),
-        transition('* => void', animate('150ms 50ms linear', style({ opacity: 0 }))),
-    ]),
-    /**
-     * This animation fades in the background color and content of the menu panel
-     * after its containing element is scaled in.
-     */
-    fadeInItems: trigger('fadeInItems', [
-        // TODO(crisbeto): this is inside the `transformMenu`
-        // now. Remove next time we do breaking changes.
-        state('showing', style({ opacity: 1 })),
-        transition('void => *', [style({ opacity: 0 }), animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')]),
-    ]),
-};
-
-function throwMatDialogContentAlreadyAttachedError() {
-    throw Error('Attempting to attach dialog content after content is already attached');
-}
-const NATURAL_DROPDOWN_CONTAINER_DATA = new InjectionToken('NaturalDropdownContainerData');
-class NaturalDropdownContainerComponent extends BasePortalOutlet {
-    constructor(elementRef, focusTrapFactory, data) {
-        super();
-        this.elementRef = elementRef;
-        this.focusTrapFactory = focusTrapFactory;
-        this.data = data;
-        this.closed = new Subject();
-        /** Current state of the panel animation. */
-        this.panelAnimationState = 'void';
-        /** Emits whenever an animation on the menu completes. */
-        this.animationDone = new Subject();
-        this.focusTrap = null;
-        this.elementFocusedBeforeDialogWasOpened = null;
-    }
-    ngOnDestroy() {
-        this.closed.complete();
-    }
-    close() {
-        this.closed.next();
-    }
-    attachTemplatePortal(portal) {
-        return this.portalOutlet.attachTemplatePortal(portal);
-    }
-    attachComponentPortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
-            throwMatDialogContentAlreadyAttachedError();
-        }
-        return this.portalOutlet.attachComponentPortal(portal);
-    }
-    startAnimation() {
-        this.panelAnimationState = 'enter';
+        else {
+            this.metaTagService.removeTag(`name="${name}"`);
+        }
     }
-    onAnimationDone(event) {
-        if (event.toState === 'enter') {
-            this.trapFocus();
+    /**
+     * Returns the data from the most deep/specific activated route
+     */
+    getRouteData(route) {
+        var _a;
+        if (route.firstChild) {
+            return this.getRouteData(route.firstChild);
         }
-        else if (event.toState === 'exit') {
-            this.restoreFocus();
+        else {
+            return (_a = route.data) !== null && _a !== void 0 ? _a : null;
         }
-        this.animationDone.next();
     }
-    trapFocus() {
-        if (!this.focusTrap) {
-            this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+    toBasic(seo) {
+        var _a, _b, _c, _d, _e;
+        if (!this.routeData) {
+            throw new Error('Must have some route data to get basic SEO');
         }
-        this.focusTrap.focusInitialElementWhenReady();
-    }
-    /** Restores focus to the element that was focused before the dialog opened. */
-    restoreFocus() {
-        const toFocus = this.elementFocusedBeforeDialogWasOpened;
-        // We need the extra check, because IE can set the `activeElement` to null in some cases.
-        if (toFocus && typeof toFocus.focus === 'function') {
-            toFocus.focus();
+        if (typeof seo === 'function') {
+            return seo(this.routeData);
         }
-        if (this.focusTrap) {
-            this.focusTrap.destroy();
+        else if ('resolveKey' in seo) {
+            const data = this.routeData[seo.resolveKey];
+            if (!data) {
+                throw new Error('Could not find resolved data for SEO service with key: ' + seo.resolveKey);
+            }
+            return {
+                title: (_d = (_b = (_a = data.model) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : (_c = data.model) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '',
+                description: (_e = data.model) === null || _e === void 0 ? void 0 : _e.description,
+                robots: seo.robots,
+            };
         }
+        return seo;
     }
 }
-NaturalDropdownContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$5.ConfigurableFocusTrapFactory }, { token: NATURAL_DROPDOWN_CONTAINER_DATA }], target: i0.ɵɵFactoryTarget.Component });
-NaturalDropdownContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalDropdownContainerComponent, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i4$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], template: "<div\n    (@transformMenu.done)=\"onAnimationDone($event)\"\n    [@transformMenu]=\"panelAnimationState\"\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet></ng-template>\n    </div>\n\n    <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n        <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n    </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
+NaturalSeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSeoService, deps: [{ token: NATURAL_SEO_CONFIG }, { token: i2$1.Router }, { token: i2$2.Title }, { token: i2$2.Meta }], target: i0.ɵɵFactoryTarget.Injectable });
+NaturalSeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSeoService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSeoService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i1$5.ConfigurableFocusTrapFactory }, { type: undefined, decorators: [{
+        return [{ type: undefined, decorators: [{
                         type: Inject,
-                        args: [NATURAL_DROPDOWN_CONTAINER_DATA]
-                    }] }];
-    }, propDecorators: { portalOutlet: [{
-                type: ViewChild,
-                args: [CdkPortalOutlet, { static: true }]
-            }], templateRef: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
+                        args: [NATURAL_SEO_CONFIG]
+                    }] }, { type: i2$1.Router }, { type: i2$2.Title }, { type: i2$2.Meta }];
+    } });
 
-class NaturalDropdownRef {
-    constructor(dropdownContainer, component, customProviders, parentInjector, containerRef) {
-        this.dropdownContainer = dropdownContainer;
-        this.closed = new Subject();
-        // Customize injector to allow data and dropdown reference injection in component
-        customProviders.push({ provide: NaturalDropdownRef, useValue: this });
-        const customInjector = Injector.create({ providers: customProviders, parent: parentInjector });
-        // Content (type component given in configuration)
-        const componentPortal = new ComponentPortal(component, undefined, customInjector);
-        const contentRef = containerRef.instance.attachComponentPortal(componentPortal);
-        this.componentInstance = contentRef.instance;
-    }
-    close(result) {
-        this.closed.next(result);
-        this.closed.complete();
-        this.dropdownContainer.close();
-    }
-}
+/*
+ * Public API Surface of natural
+ */
 
-const NATURAL_DROPDOWN_DATA = new InjectionToken('NaturalDropdownData');
-class NaturalDropdownService {
-    constructor(overlay, injector) {
-        this.overlay = overlay;
-        this.injector = injector;
-    }
-    open(component, connectedElement, customProviders, showValidateButton) {
-        // Container data
-        const containerData = {
-            showValidateButton: showValidateButton,
-        };
-        const injectionTokens = [
-            {
-                provide: NATURAL_DROPDOWN_CONTAINER_DATA,
-                useValue: containerData,
-            },
-        ];
-        const containerInjector = Injector.create({ providers: injectionTokens, parent: this.injector });
-        // Container
-        const overlayRef = this.overlay.create(this.getOverlayConfig(connectedElement));
-        const containerPortal = new ComponentPortal(NaturalDropdownContainerComponent, undefined, containerInjector);
-        const containerRef = overlayRef.attach(containerPortal);
-        const dropdownContainer = containerRef.instance;
-        const dropdownRef = new NaturalDropdownRef(dropdownContainer, component, customProviders, this.injector, containerRef);
-        // Start animation that shows menu
-        dropdownContainer.startAnimation();
-        const close = () => {
-            if (dropdownRef.componentInstance.isValid() && dropdownRef.componentInstance.isDirty()) {
-                dropdownRef.close({
-                    condition: dropdownRef.componentInstance.getCondition(),
-                });
-            }
-            else {
-                dropdownRef.close();
-            }
-        };
-        // When parent closes, remove overlay from dom and update "return" valu
-        dropdownContainer.closed.subscribe(() => {
-            overlayRef.dispose();
-            close();
-        });
-        // When click on backdrop, validate result.. ?
-        overlayRef
-            .backdropClick()
-            .pipe(takeUntil(dropdownContainer.closed))
-            .subscribe(() => dropdownContainer.close());
-        return dropdownRef;
+class NaturalDetailHeaderComponent {
+    constructor() {
+        /**
+         * Must be set to get proper links when used in panels
+         */
+        this.isPanel = false;
+        /**
+         * If given will show icon before title
+         */
+        this.icon = '';
+        /**
+         * Title shown if model has no name, or empty name.
+         *
+         * Typically should be the human name for the object type, eg: 'Product'
+         */
+        this.label = '';
+        /**
+         * Label of the root of the breadcrumb, defaults to the value of `label`.
+         *
+         * Typically should be the plural form of the object type, eg: 'Products'
+         */
+        this.rootLabel = '';
+        /**
+         * Title shown if model has no id.
+         *
+         * Typically should be similar to 'New product'.
+         */
+        this.newLabel = '';
+        this.breadcrumbs = [];
+        this.listRoute = [];
     }
-    /**
-     * This method builds the configuration object needed to create the overlay, the OverlayState.
-     */
-    getOverlayConfig(element) {
-        return new OverlayConfig({
-            positionStrategy: this.getPosition(element),
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-        });
+    getRootLink() {
+        return [this.currentBaseUrl || '/'].concat(this.listRoute);
     }
-    getPosition(element) {
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(element)
-            .withFlexibleDimensions(true)
-            .withViewportMargin(30)
-            .withPush(false)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 10,
-            },
-        ]);
+    getLink(id) {
+        if (this.link) {
+            return this.getRootLink().concat(this.link(id));
+        }
+        return this.getRootLink().concat([id]);
     }
 }
-NaturalDropdownService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownService, deps: [{ token: i1$6.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-NaturalDropdownService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDropdownService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$6.Overlay }, { type: i0.Injector }]; } });
-
-const possibleComparableOperators = [
-    {
-        key: 'less',
-        label: '<',
-    },
-    {
-        key: 'lessOrEqual',
-        label: '≤',
-    },
-    {
-        key: 'equal',
-        label: '=',
-    },
-    {
-        key: 'greaterOrEqual',
-        label: '≥',
-    },
-    {
-        key: 'greater',
-        label: '>',
-    },
-];
-const possibleDiscreteOperators = [
-    {
-        key: 'is',
-        label: $localize `est`,
-    },
-    {
-        key: 'isnot',
-        label: $localize `n'est pas`,
-    },
-    {
-        key: 'any',
-        label: $localize `tous`,
-    },
-    {
-        key: 'none',
-        label: $localize `aucun`,
-    },
-];
+NaturalDetailHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NaturalDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalDetailHeaderComponent, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n        rootLabel || label\n    }}</a>\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <natural-icon [name]=\"icon\"></natural-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body natural-icon{display:none}}\n"], 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: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'natural-detail-header', template: "<div class=\"breadcrumb\">\n    <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n        rootLabel || label\n    }}</a>\n    <ng-container *ngFor=\"let parent of breadcrumbs\">\n        /\n        <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    </ng-container>\n</div>\n\n<div class=\"body\">\n    <div *ngIf=\"icon\" style=\"width: 30px\">\n        <natural-icon [name]=\"icon\"></natural-icon>\n    </div>\n    <div *ngIf=\"!model.id\" class=\"mat-headline no-margin newLabel\">{{ newLabel }}</div>\n    <div *ngIf=\"model.id\" class=\"mat-headline no-margin label\">{{ model.name || model.fullName || label }}</div>\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body natural-icon{display:none}}\n"] }]
+        }], propDecorators: { currentBaseUrl: [{
+                type: Input
+            }], isPanel: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], rootLabel: [{
+                type: Input
+            }], newLabel: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], breadcrumbs: [{
+                type: Input
+            }], listRoute: [{
+                type: Input
+            }], listFragment: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }] } });
+
+class NaturalDetailHeaderModule {
+}
+NaturalDetailHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NaturalDetailHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, declarations: [NaturalDetailHeaderComponent], imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule], exports: [NaturalDetailHeaderComponent] });
+NaturalDetailHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalDetailHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NaturalDetailHeaderComponent],
+                    imports: [CommonModule, RouterModule, MatButtonModule, NaturalIconModule],
+                    exports: [NaturalDetailHeaderComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of natural
+ */
 
 class TypeSelectComponent extends NaturalAbstractController {
     constructor(data) {
@@ -5792,7 +6105,7 @@ class TypeSelectComponent extends NaturalAbstractController {
     }
 }
 TypeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Component });
-TypeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeSelectComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.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.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$3.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+TypeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeSelectComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: MatSelectionList, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\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.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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$4.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$4.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeSelectComponent, decorators: [{
             type: Component,
             args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 7em; margin-right: 1em\" *ngIf=\"configuration.operators\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-selection-list *ngIf=\"requireValueCtrl\" [formControl]=\"valueCtrl\">\n        <mat-list-option *ngFor=\"let item of items\" [value]=\"getId(item)\" checkboxPosition=\"before\">\n            {{ getDisplay(item) }}\n        </mat-list-option>\n    </mat-selection-list>\n</form>\n" }]
@@ -5910,7 +6223,7 @@ class ExternalFormControlMatcher extends ErrorStateMatcher {
         super();
         this.component = component;
     }
-    isErrorState(control, form) {
+    isErrorState() {
         var _a;
         const externalCtrl = ((_a = this.component.ngControl) === null || _a === void 0 ? void 0 : _a.control) || this.component.internalCtrl;
         if (externalCtrl) {
@@ -6252,7 +6565,7 @@ class NaturalSelectComponent extends AbstractSelect {
     }
 }
 NaturalSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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: MatAutocompleteTrigger, 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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7.MatTooltip, 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: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] });
+NaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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: MatAutocompleteTrigger, 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.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$1.MatTooltip, 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: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", 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"] }]
@@ -6297,14 +6610,14 @@ class TypeNaturalSelectComponent extends AbstractAssociationSelectComponent {
     }
 }
 TypeNaturalSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeNaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TypeNaturalSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.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.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$7.MatOption, 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: "14.1.1", 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.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "filter", "disabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", 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" }]
         }] });
 
 class InvalidWithValueStateMatcher$1 {
-    isErrorState(control, form) {
+    isErrorState(control) {
         return control && control.invalid && control.value;
     }
 }
@@ -6344,7 +6657,7 @@ class TypeTextComponent {
     }
 }
 TypeTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeTextComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component });
-TypeTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeTextComponent, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+TypeTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeTextComponent, selector: "ng-component", ngImport: i0, template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeTextComponent, decorators: [{
             type: Component,
             args: [{ template: "<mat-form-field>\n    <mat-label i18n>Valeur</mat-label>\n    <input\n        (keydown.enter)=\"close()\"\n        [errorStateMatcher]=\"matcher\"\n        [formControl]=\"formCtrl\"\n        [required]=\"true\"\n        matInput\n        type=\"text\"\n    />\n    <mat-error *ngIf=\"formCtrl.hasError('required')\">*</mat-error>\n</mat-form-field>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
@@ -6440,7 +6753,7 @@ class TypeNumberComponent {
     }
 }
 TypeNumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeNumberComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component });
-TypeNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeNumberComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\n        />\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+TypeNumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeNumberComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\n        />\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\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.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeNumberComponent, decorators: [{
             type: Component,
             args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Valeur</mat-label>\n        <input\n            (keydown.enter)=\"close()\"\n            [errorStateMatcher]=\"matcher\"\n            [formControl]=\"valueCtrl\"\n            [attr.max]=\"configuration.max\"\n            [attr.min]=\"configuration.min\"\n            [required]=\"true\"\n            [step]=\"configuration.step\"\n            matInput\n            type=\"number\"\n        />\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n    </mat-form-field>\n</form>\n", styles: [":host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
@@ -6752,7 +7065,7 @@ class FacetSelectorComponent {
     }
 }
 FacetSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FacetSelectorComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: NaturalDropdownRef }], target: i0.ɵɵFactoryTarget.Component });
-FacetSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FacetSelectorComponent, selector: "ng-component", ngImport: i0, template: "<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a matLine>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [":host .mat-nav-list{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$7.MatLine, selector: "[mat-line], [matLine]" }] });
+FacetSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FacetSelectorComponent, selector: "ng-component", ngImport: i0, template: "<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a matLine>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [":host .mat-nav-list{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4$4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$4.MatLine, selector: "[mat-line], [matLine]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FacetSelectorComponent, decorators: [{
             type: Component,
             args: [{ template: "<mat-nav-list>\n    <mat-list-item (click)=\"selection = facet; close()\" *ngFor=\"let facet of facets\">\n        <a matLine>{{ facet.display }}</a>\n    </mat-list-item>\n</mat-nav-list>\n", styles: [":host .mat-nav-list{padding:0}\n"] }]
@@ -6765,7 +7078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
 
 // Required to check invalid fields when initializing natural-search
 class AlwaysErrorStateMatcher {
-    isErrorState(control, form) {
+    isErrorState(control) {
         return !!control && control.invalid;
     }
 }
@@ -6867,7 +7180,7 @@ class NaturalInputComponent {
             this.dropdownComponentRef.destroy();
         }
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         if (!this.facets && this.selection) {
             setTimeout(() => this.clear());
         }
@@ -7048,7 +7361,7 @@ class NaturalInputComponent {
     }
 }
 NaturalInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalInputComponent, deps: [{ token: i0.ElementRef }, { token: NaturalDropdownService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-NaturalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalInputComponent, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    <!-- TODO : replace this void button -->\n    <div *ngIf=\"!facet && !selection\" class=\"search-icon\" matPrefix>\n        <natural-icon name=\"search\"></natural-icon>\n    </div>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"close\"></natural-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"undo\"></natural-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon natural-icon{margin:5px auto 0}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i1$7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }] });
+NaturalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalInputComponent, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    <!-- TODO : replace this void button -->\n    <div *ngIf=\"!facet && !selection\" class=\"search-icon\" matPrefix>\n        <natural-icon name=\"search\"></natural-icon>\n    </div>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"close\"></natural-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"undo\"></natural-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon natural-icon{margin:5px auto 0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i1$4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-input', template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n    <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n    <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n    <input\n        #input\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n    />\n\n    <!-- TODO : replace this void button -->\n    <div *ngIf=\"!facet && !selection\" class=\"search-icon\" matPrefix>\n        <natural-icon name=\"search\"></natural-icon>\n    </div>\n\n    <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"close\"></natural-icon>\n    </button>\n\n    <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matSuffix>\n        <natural-icon name=\"undo\"></natural-icon>\n    </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .mat-menu-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon natural-icon{margin:5px auto 0}\n"] }]
@@ -7098,7 +7411,7 @@ class NaturalGroupComponent {
     }
 }
 NaturalGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalGroupComponent, selector: "natural-group", inputs: { placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets"], outputs: ["selectionChange", "cleared"] }] });
+NaturalGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalGroupComponent, selector: "natural-group", inputs: { placeholder: "placeholder", facets: "facets", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "newValueInput", first: true, predicate: ["newValueInput"], descendants: true }], ngImport: i0, template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NaturalInputComponent, selector: "natural-input", inputs: ["placeholder", "searchFieldName", "selection", "facets"], outputs: ["selectionChange", "cleared"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-group', template: "<natural-input\n    (cleared)=\"removeInput(i)\"\n    (selectionChange)=\"updateInput($event, i)\"\n    *ngFor=\"let selection of innerSelections; let i = index\"\n    [facets]=\"facets\"\n    [selection]=\"selection\"\n></natural-input>\n\n<natural-input\n    #newValueInput\n    (selectionChange)=\"addInput($event)\"\n    [facets]=\"facets\"\n    [placeholder]=\"placeholder\"\n    tabIndex=\"10\"\n    cdkFocusInitial\n></natural-input>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}:host natural-input{flex:auto;display:inline-flex;margin-right:10px;margin-bottom:10px}:host natural-input:last-of-type{flex:1;min-width:250px}\n"] }]
@@ -7144,7 +7457,7 @@ class NaturalSearchComponent {
     set selections(selections) {
         this.innerSelections = selections && selections[0] ? deepClone(selections) : [[]];
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         if (!this.facets) {
             this.facets = [];
         }
@@ -7170,7 +7483,7 @@ class NaturalSearchComponent {
     }
 }
 NaturalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSearchComponent, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                        <natural-icon name=\"remove\"></natural-icon>\n                    </button>\n                </div>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                        <natural-icon name=\"add\"></natural-icon>\n                    </button>\n                </div>\n\n                <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n                <div *ngIf=\"!last\" class=\"spacer\"></div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton outOfGroup\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1;min-width:0}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}:host .natural-search .groupWrapper natural-group{flex:1;max-width:100%}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:10px}:host .natural-search mat-divider{margin:-10px 10px 10px 0}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["placeholder", "facets", "selections"], outputs: ["selectionChange"] }] });
+NaturalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSearchComponent, selector: "natural-search", inputs: { placeholder: "placeholder", facets: "facets", multipleGroups: "multipleGroups", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                        <natural-icon name=\"remove\"></natural-icon>\n                    </button>\n                </div>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                        <natural-icon name=\"add\"></natural-icon>\n                    </button>\n                </div>\n\n                <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n                <div *ngIf=\"!last\" class=\"spacer\"></div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton outOfGroup\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1;min-width:0}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}:host .natural-search .groupWrapper natural-group{flex:1;max-width:100%}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:10px}:host .natural-search mat-divider{margin:-10px 10px 10px 0}\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: "component", type: i4.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"] }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["placeholder", "facets", "selections"], outputs: ["selectionChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-search', template: "<div class=\"natural-search\">\n    <div class=\"groupsWrapper\">\n        <ng-container *ngFor=\"let groupSelections of innerSelections; let i = index; let last = last\">\n            <div class=\"groupWrapper\">\n                <natural-group\n                    (selectionChange)=\"updateGroup($event, i)\"\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder\"\n                    [selections]=\"groupSelections\"\n                ></natural-group>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"removeGroup(i)\" *ngIf=\"innerSelections.length > 1\" mat-icon-button>\n                        <natural-icon name=\"remove\"></natural-icon>\n                    </button>\n                </div>\n\n                <div class=\"endOfRowButton inGroup\">\n                    <button (click)=\"addGroup()\" *ngIf=\"last && multipleGroups\" mat-icon-button>\n                        <natural-icon name=\"add\"></natural-icon>\n                    </button>\n                </div>\n\n                <!-- Spaceholder to keep fields alignment (prevent to push until end of line)--->\n                <div *ngIf=\"!last\" class=\"spacer\"></div>\n            </div>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        </ng-container>\n    </div>\n\n    <div class=\"endOfRowButton outOfGroup\">\n        <button (click)=\"clear()\" mat-icon-button>\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [":host .natural-search{display:flex;flex-direction:row;align-items:flex-end}:host .natural-search .groupsWrapper{display:flex;flex-direction:column;flex:1;min-width:0}:host .natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}:host .natural-search .groupWrapper natural-group{flex:1;max-width:100%}:host .natural-search .groupWrapper:last-of-type{margin-bottom:0}:host .natural-search .groupWrapper .spacer{width:40px;height:40px}:host .natural-search .endOfRowButton{height:53px;display:flex;flex-direction:row;align-items:center;margin-bottom:10px}:host .natural-search mat-divider{margin:-10px 10px 10px 0}\n"] }]
@@ -7504,7 +7817,7 @@ class NaturalHierarchicSelectorComponent extends NaturalAbstractController {
     }
 }
 NaturalHierarchicSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [{ token: NaturalHierarchicSelectorService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalHierarchicSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                    style=\"margin: 8px\"\n                ></mat-progress-spinner>\n\n                <natural-icon\n                    *ngIf=\"!node.loading\"\n                    [name]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                >\n                </natural-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <natural-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [name]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></natural-icon>\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-list aria-orientation=\"vertical\" class=\"mat-chip-list-stacked\">\n        <mat-chip\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <natural-icon *ngIf=\"node.config.icon\" [name]=\"node.config.icon\"></natural-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <natural-icon matChipRemove name=\"cancel\"></natural-icon>\n        </mat-chip>\n    </mat-chip-list>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host natural-icon{width:18px;height:18px;font-size:18px;margin-right:5px}:host .mat-tree-node.leaf{margin-left:40px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-list{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-list{margin-left:10px}:host mat-chip{display:flex;flex-direction:row;height:auto!important}:host mat-chip .chip-label{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i5$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i5$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i7$1.MatProgressSpinner, 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: i8.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i8.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "selections"], outputs: ["selectionChange"] }] });
+NaturalHierarchicSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: { displayWith: "displayWith", config: "config", multiple: "multiple", selected: "selected", allowUnselect: "allowUnselect", filters: "filters", searchFacets: "searchFacets", searchSelections: "searchSelections" }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                    style=\"margin: 8px\"\n                ></mat-progress-spinner>\n\n                <natural-icon\n                    *ngIf=\"!node.loading\"\n                    [name]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                >\n                </natural-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <natural-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [name]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></natural-icon>\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-list aria-orientation=\"vertical\" class=\"mat-chip-list-stacked\">\n        <mat-chip\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <natural-icon *ngIf=\"node.config.icon\" [name]=\"node.config.icon\"></natural-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <natural-icon matChipRemove name=\"cancel\"></natural-icon>\n        </mat-chip>\n    </mat-chip-list>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host natural-icon{width:18px;height:18px;font-size:18px;margin-right:5px}:host .mat-tree-node.leaf{margin-left:40px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-list{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-list{margin-left:10px}:host mat-chip{display:flex;flex-direction:row;height:auto!important}:host mat-chip .chip-label{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i5$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i5$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5$1.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i7$2.MatProgressSpinner, 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: i8.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i8.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "selections"], outputs: ["selectionChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-hierarchic-selector', providers: [NaturalHierarchicSelectorService], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search\n        (selectionChange)=\"search($event)\"\n        [facets]=\"searchFacets\"\n        [selections]=\"searchSelections\"\n    ></natural-search>\n</div>\n\n<div class=\"body\">\n    <mat-progress-spinner\n        *ngIf=\"loading\"\n        [diameter]=\"36\"\n        mode=\"indeterminate\"\n        style=\"margin: 10px\"\n    ></mat-progress-spinner>\n\n    <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" [ngClass]=\"{leaf: !node.expandable}\" matTreeNodePadding>\n            <button\n                (click)=\"loadChildren(node)\"\n                *ngIf=\"node.expandable\"\n                [attr.aria-label]=\"'toggle ' + node.name\"\n                mat-icon-button\n                matTreeNodeToggle\n            >\n                <mat-progress-spinner\n                    *ngIf=\"node.loading\"\n                    [diameter]=\"24\"\n                    [strokeWidth]=\"5\"\n                    mode=\"indeterminate\"\n                    style=\"margin: 8px\"\n                ></mat-progress-spinner>\n\n                <natural-icon\n                    *ngIf=\"!node.loading\"\n                    [name]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\"\n                >\n                </natural-icon>\n            </button>\n\n            <mat-checkbox\n                (change)=\"toggleFlatNode(node)\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                style=\"margin-right: 10px\"\n            >\n                <natural-icon\n                    *ngIf=\"node.node.config.icon\"\n                    [name]=\"node.node.config.icon\"\n                    style=\"margin-right: 10px\"\n                ></natural-icon>\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-list aria-orientation=\"vertical\" class=\"mat-chip-list-stacked\">\n        <mat-chip\n            (removed)=\"unselectModelNode(node)\"\n            *ngFor=\"let node of selectedNodes\"\n            [removable]=\"true\"\n            [selectable]=\"false\"\n        >\n            <natural-icon *ngIf=\"node.config.icon\" [name]=\"node.config.icon\"></natural-icon>\n            <div class=\"mat-body chip-label\">{{ node.model.name || node.model.fullName }}</div>\n            <natural-icon matChipRemove name=\"cancel\"></natural-icon>\n        </mat-chip>\n    </mat-chip-list>\n</div>\n\n<div *ngIf=\"!loading && !dataSource.data.length\" class=\"margin-v\" i18n>Aucun r\u00E9sultat</div>\n", styles: [":host{display:block}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host natural-icon{width:18px;height:18px;font-size:18px;margin-right:5px}:host .mat-tree-node.leaf{margin-left:40px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-list{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-list{margin-left:10px}:host mat-chip{display:flex;flex-direction:row;height:auto!important}:host mat-chip .chip-label{flex:1}\n"] }]
@@ -7583,167 +7896,12 @@ class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent
     }
 }
 TypeHierarchicSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeHierarchicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TypeHierarchicSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeHierarchicSelectorComponent, 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-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\n        (selectionChange)=\"selectionChange($event)\"\n        [config]=\"configuration.config\"\n        [filters]=\"configuration.filters\"\n        [multiple]=\"true\"\n        [selected]=\"valueCtrl.value || {}\"\n        style=\"margin-right: 20px\"\n    ></natural-hierarchic-selector>\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.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.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] });
+TypeHierarchicSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeHierarchicSelectorComponent, 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-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\n        (selectionChange)=\"selectionChange($event)\"\n        [config]=\"configuration.config\"\n        [filters]=\"configuration.filters\"\n        [multiple]=\"true\"\n        [selected]=\"valueCtrl.value || {}\"\n        style=\"margin-right: 20px\"\n    ></natural-hierarchic-selector>\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.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, 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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "allowUnselect", "filters", "searchFacets", "searchSelections"], outputs: ["searchSelectionChange", "selectionChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeHierarchicSelectorComponent, 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-hierarchic-selector\n        *ngIf=\"requireValueCtrl\"\n        (selectionChange)=\"selectionChange($event)\"\n        [config]=\"configuration.config\"\n        [filters]=\"configuration.filters\"\n        [multiple]=\"true\"\n        [selected]=\"valueCtrl.value || {}\"\n        style=\"margin-right: 20px\"\n    ></natural-hierarchic-selector>\n</form>\n" }]
         }] });
 
-/**
- * Get only date, without time and ignoring entirely the timezone
- */
-function serialize(dateAdapter, value) {
-    if (!value) {
-        return '';
-    }
-    const y = dateAdapter.getYear(value);
-    const m = dateAdapter.getMonth(value) + 1;
-    const d = dateAdapter.getDate(value);
-    return y + '-' + (m < 10 ? '0' : '') + m + '-' + (d < 10 ? '0' : '') + d;
-}
-/**
- * Min date validator
- */
-function dateMin(dateAdapter, min) {
-    return (control) => {
-        if (control.value && dateAdapter.compareDate(control.value, min) < 0) {
-            return { min: true };
-        }
-        return null;
-    };
-}
-/**
- * Max date validator
- */
-function dateMax(dateAdapter, max) {
-    return (control) => {
-        if (control.value && dateAdapter.compareDate(control.value, max) > 0) {
-            return { max: true };
-        }
-        return null;
-    };
-}
-
-class TypeDateComponent {
-    constructor(data, dateAdapter, dateFormats) {
-        this.dateAdapter = dateAdapter;
-        this.dateFormats = dateFormats;
-        this.renderedValue = new BehaviorSubject('');
-        this.operatorCtrl = new FormControl('equal', { nonNullable: true });
-        this.valueCtrl = new FormControl(null);
-        this.operators = possibleComparableOperators;
-        this.form = new FormGroup({
-            operator: this.operatorCtrl,
-            value: this.valueCtrl,
-        });
-        this.defaults = {
-            min: null,
-            max: null,
-        };
-        this.configuration = Object.assign(Object.assign({}, this.defaults), data.configuration);
-        merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges).subscribe(() => {
-            this.renderedValue.next(this.getRenderedValue());
-        });
-        this.initValidators();
-        this.reloadCondition(data.condition);
-    }
-    getCondition() {
-        if (!this.valueCtrl.value) {
-            return {};
-        }
-        const condition = {};
-        let operator = this.operatorCtrl.value;
-        let date = this.valueCtrl.value;
-        const dayAfter = this.getDayAfter(date);
-        if (operator === 'equal') {
-            condition.greaterOrEqual = {
-                value: serialize(this.dateAdapter, date),
-            };
-            condition.less = {
-                value: serialize(this.dateAdapter, dayAfter),
-            };
-        }
-        else {
-            // Transparently adapt exclusive/inclusive ranges
-            if (operator === 'greater') {
-                operator = 'greaterOrEqual';
-                date = dayAfter;
-            }
-            else if (operator === 'lessOrEqual') {
-                operator = 'less';
-                date = dayAfter;
-            }
-            condition[operator] = {
-                value: serialize(this.dateAdapter, date),
-            };
-        }
-        return condition;
-    }
-    isValid() {
-        return this.form.valid;
-    }
-    isDirty() {
-        return this.form.dirty;
-    }
-    reloadCondition(condition) {
-        if (!condition) {
-            return;
-        }
-        // Special case for '='
-        if (condition.greaterOrEqual && condition.less) {
-            this.operatorCtrl.setValue('equal');
-            const value = this.dateAdapter.deserialize(condition.greaterOrEqual.value);
-            this.valueCtrl.setValue(value);
-            return;
-        }
-        for (const operator of this.operators) {
-            const reloadedOperator = condition[operator.key];
-            if (reloadedOperator) {
-                this.operatorCtrl.setValue(operator.key);
-                const value = this.dateAdapter.deserialize(reloadedOperator.value);
-                this.valueCtrl.setValue(value);
-            }
-        }
-    }
-    initValidators() {
-        const validators = [Validators.required];
-        if (this.configuration.min) {
-            validators.push(dateMin(this.dateAdapter, this.configuration.min));
-        }
-        if (this.configuration.max) {
-            validators.push(dateMax(this.dateAdapter, this.configuration.max));
-        }
-        this.valueCtrl.setValidators(validators);
-    }
-    getDayAfter(date) {
-        return this.dateAdapter.addCalendarDays(this.dateAdapter.clone(date), 1);
-    }
-    getRenderedValue() {
-        const operator = this.operators.find(v => v.key === this.operatorCtrl.value);
-        if (this.valueCtrl.value === null || !operator) {
-            return '';
-        }
-        else {
-            const value = this.dateAdapter.format(this.valueCtrl.value, this.dateFormats.display.dateInput);
-            return operator.label + ' ' + value;
-        }
-    }
-}
-TypeDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$7.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
-TypeDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeDateComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error>\n            <span *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</span>\n            <span *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</span>\n            <span *ngIf=\"valueCtrl.hasError('required')\">*</span>\n        </mat-error>\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { 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: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field style=\"max-width: 4em; margin-right: 1em\">\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error>\n            <span *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</span>\n            <span *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</span>\n            <span *ngIf=\"valueCtrl.hasError('required')\">*</span>\n        </mat-error>\n    </mat-form-field>\n</form>\n" }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [NATURAL_DROPDOWN_DATA]
-                    }] }, { type: i1$7.DateAdapter }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DATE_FORMATS]
-                    }] }];
-    } });
-
 class InvalidWithValueStateMatcher {
     isErrorState(control, form) {
         return (form && form.invalid && (form.value.to || form.value.from)) || (control && control.invalid);
@@ -7772,7 +7930,7 @@ function toGreaterThanFrom(dateAdapter) {
 /**
  * Date range with mandatory bounding dates.
  *
- * If you need ooptional bounding date, then use `TypeDateComponent` instead.
+ * If you need optional bounding date, then use `TypeDateComponent` instead.
  */
 class TypeDateRangeComponent {
     constructor(data, dateAdapter, dateFormats) {
@@ -7855,16 +8013,16 @@ class TypeDateRangeComponent {
         }
     }
 }
-TypeDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateRangeComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$7.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
-TypeDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeDateRangeComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error>\n            <span *ngIf=\"form.hasError('toGreaterThanFrom')\"\n                >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</span\n            >\n            <span *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n                >< {{ configuration.min }}</span\n            >\n            <span *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n                >> {{ configuration.max }}</span\n            >\n            <span *ngIf=\"fromCtrl.hasError('required')\">*</span>\n        </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error>\n            <span *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">< {{ configuration.min }}</span>\n            <span *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">> {{ configuration.max }}</span>\n            <span *ngIf=\"toCtrl.hasError('required')\">*</span>\n        </mat-error>\n    </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { 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: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+TypeDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateRangeComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$4.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component });
+TypeDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TypeDateRangeComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error *ngIf=\"form.hasError('toGreaterThanFrom')\"\n            >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n            >< {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n            >> {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">\n            < {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">\n            > {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n</form>\n", dependencies: [{ 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.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { 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: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TypeDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error>\n            <span *ngIf=\"form.hasError('toGreaterThanFrom')\"\n                >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</span\n            >\n            <span *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n                >< {{ configuration.min }}</span\n            >\n            <span *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n                >> {{ configuration.max }}</span\n            >\n            <span *ngIf=\"fromCtrl.hasError('required')\">*</span>\n        </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error>\n            <span *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">< {{ configuration.min }}</span>\n            <span *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">> {{ configuration.max }}</span>\n            <span *ngIf=\"toCtrl.hasError('required')\">*</span>\n        </mat-error>\n    </mat-form-field>\n</form>\n" }]
+            args: [{ template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"from\"\n            placeholder=\"De\"\n            [formControl]=\"fromCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"from\"></mat-datepicker-toggle>\n        <mat-datepicker #from></mat-datepicker>\n        <mat-error *ngIf=\"form.hasError('toGreaterThanFrom')\"\n            >{{ render(fromCtrl.value) }} > {{ render(toCtrl.value) }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\"\n            >< {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\"\n            >> {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"fromCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n        <input\n            matInput\n            [matDatepicker]=\"to\"\n            placeholder=\"\u00E0\"\n            [formControl]=\"toCtrl\"\n            [errorStateMatcher]=\"matcher\"\n            [min]=\"configuration.min\"\n            [max]=\"configuration.max\"\n        />\n        <mat-datepicker-toggle matSuffix [for]=\"to\"></mat-datepicker-toggle>\n        <mat-datepicker #to></mat-datepicker>\n        <mat-error *ngIf=\"toCtrl.hasError('min') && !form.hasError('toGreaterThanFrom')\">\n            < {{ configuration.min }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('max') && !form.hasError('toGreaterThanFrom')\">\n            > {{ configuration.max }}</mat-error\n        >\n        <mat-error *ngIf=\"toCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n</form>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [NATURAL_DROPDOWN_DATA]
-                    }] }, { type: i1$7.DateAdapter }, { type: undefined, decorators: [{
+                    }] }, { type: i1$4.DateAdapter }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DATE_FORMATS]
                     }] }];
@@ -8141,7 +8299,7 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
     }
 }
 NaturalSelectHierarchicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: [{ token: NaturalHierarchicSelectorDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NaturalSelectHierarchicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectHierarchicComponent, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (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=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .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$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, 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: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+NaturalSelectHierarchicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectHierarchicComponent, selector: "natural-select-hierarchic", inputs: { selectLabel: "selectLabel", config: "config", filters: "filters" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (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=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.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"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.MatTooltip, 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: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-select-hierarchic', template: "<mat-form-field [floatLabel]=\"floatPlaceholder\">\n    <mat-label>{{ placeholder }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n        (keydown.esc)=\"clear()\"\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n    />\n\n    <!-- Meta data -->\n    <natural-icon *ngIf=\"showIcon\" [name]=\"icon\" matPrefix></natural-icon>\n\n    <!-- Clear button -->\n    <div class=\"suffix-buttons\" matSuffix>\n        <button\n            (click)=\"clear(); $event.stopPropagation()\"\n            *ngIf=\"internalCtrl.value && internalCtrl.enabled && !clearLabel\"\n            mat-icon-button\n            i18n-matTooltip\n            matTooltip=\"D\u00E9s\u00E9lectionner\"\n        >\n            <natural-icon name=\"close\"></natural-icon>\n        </button>\n        <button\n            *ngIf=\"internalCtrl.value && navigateTo\"\n            [routerLink]=\"navigateTo\"\n            (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=\"showSelectButton() || showClearButton()\" class=\"external-buttons\">\n    <button (click)=\"openDialog()\" *ngIf=\"showSelectButton()\" color=\"primary\" mat-flat-button>{{ selectLabel }}</button>\n    <button (click)=\"clear()\" *ngIf=\"showClearButton()\" color=\"warn\" mat-button>{{ clearLabel }}</button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .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"] }]
@@ -8163,7 +8321,6 @@ class NaturalSelectEnumComponent extends AbstractSelect {
     constructor(enumService, ngControl) {
         super(ngControl);
         this.enumService = enumService;
-        this.ngControl = ngControl;
         /**
          * Whether the user should be allowed to select multiple options
          */
@@ -8178,7 +8335,7 @@ class NaturalSelectEnumComponent extends AbstractSelect {
     }
 }
 NaturalSelectEnumComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectEnumComponent, deps: [{ token: NaturalEnumService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-NaturalSelectEnumComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectEnumComponent, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"touch(); blur.emit()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { 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: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
+NaturalSelectEnumComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSelectEnumComponent, selector: "natural-select-enum", inputs: { enumName: "enumName", nullLabel: "nullLabel", optionDisabled: "optionDisabled", multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"touch(); blur.emit()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\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: "component", type: i1$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { 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: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSelectEnumComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-select-enum', template: "<mat-form-field>\n    <mat-label>{{ placeholder }}</mat-label>\n    <mat-select\n        (selectionChange)=\"propagateValue($event.value)\"\n        [formControl]=\"internalCtrl\"\n        (blur)=\"touch(); blur.emit()\"\n        [errorStateMatcher]=\"matcher\"\n        [multiple]=\"multiple\"\n    >\n        <mat-option *ngIf=\"nullLabel\" [value]=\"null\">{{ nullLabel }}</mat-option>\n        <mat-option\n            *ngFor=\"let item of items | async\"\n            [value]=\"item.value\"\n            [disabled]=\"optionDisabled ? optionDisabled(item) : false\"\n        >\n            {{ item.name | capitalize }}\n        </mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"hasRequiredError()\" i18n>Ce champ est requis</mat-error></mat-form-field\n>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
@@ -8507,7 +8664,7 @@ class NaturalAbstractFile extends NaturalAbstractController {
         this.multiple = false;
         /**
          * Comma-separated list of unique file type specifiers. Like the native element
-         * it can be a mixed of mime-type and file extensions.
+         * it can be a mix of mime-type and file extensions.
          *
          * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
          */
@@ -8840,23 +8997,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
 
 // @dynamic
 class FileComponent {
-    constructor(naturalFileService, sanitizer, document) {
+    constructor(naturalFileService, alertService, sanitizer, document) {
         this.naturalFileService = naturalFileService;
+        this.alertService = alertService;
         this.sanitizer = sanitizer;
         this.document = document;
         this.height = 250;
         this.action = null;
         this.backgroundSize = 'contain';
         /**
-         * Comma separated list of accepted mimetypes
+         * Comma-separated list of unique file type specifiers. Like the native element
+         * it can be a mix of mime-type and file extensions.
+         *
+         * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
          */
         this.accept = 'image/bmp,image/gif,image/jpeg,image/pjpeg,image/png,image/svg+xml,image/svg,image/webp';
         this.model = null;
         /**
-         * If provided, get updated on change
-         * Is not used for reading -> use [model]
+         * If provided, its value will get updated when the model changes.
+         * But its value is never read, so if you want to set a value use `[model]` instead.
          */
         this.formCtrl = null;
+        /**
+         * This **must not** be used to mutate the server, because it is very likely it will never be called if the
+         * human navigates away from the page before the upload is finished. Instead, you should use `[uploader]`.
+         */
         this.modelChange = new EventEmitter();
         this.imagePreview = null;
         this.filePreview = null;
@@ -8870,20 +9035,20 @@ class FileComponent {
         }
     }
     upload(file) {
+        var _a, _b;
         this.model = { file: file };
         this.updateImage();
         if (this.formCtrl) {
             this.formCtrl.setValue(this.model);
         }
-        if (this.service) {
-            this.service.create(this.model).subscribe(result => {
-                this.model = result;
-                this.modelChange.emit(result);
-            });
-        }
-        else {
+        const observable = (_b = (_a = this.uploader) === null || _a === void 0 ? void 0 : _a.call(this, file).pipe(tap$1(() => this.alertService.info($localize `Mis à jour`)))) !== null && _b !== void 0 ? _b : of(this.model);
+        observable.subscribe(result => {
+            this.model = result;
+            if (this.formCtrl) {
+                this.formCtrl.setValue(this.model);
+            }
             this.modelChange.emit(this.model);
-        }
+        });
     }
     getDownloadLink() {
         if (this.action !== 'download') {
@@ -8943,13 +9108,13 @@ class FileComponent {
         return subject.asObservable();
     }
 }
-FileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FileComponent, deps: [{ token: NaturalFileService }, { token: i2$2.DomSanitizer }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-FileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FileComponent, selector: "natural-file", inputs: { height: "height", action: "action", backgroundSize: "backgroundSize", accept: "accept", service: "service", model: "model", formCtrl: "formCtrl" }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "this.height" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    (fileChange)=\"upload($event)\"\n    naturalFileDrop\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <natural-icon [size]=\"height * 0.33\" name=\"attachment\"></natural-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <natural-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" name=\"cloud_upload\"></natural-icon>\n        <natural-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" name=\"get_app\"></natural-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i1$7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "pipe", type: i1$3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
+FileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FileComponent, deps: [{ token: NaturalFileService }, { token: NaturalAlertService }, { token: i2$2.DomSanitizer }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+FileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FileComponent, selector: "natural-file", inputs: { height: "height", action: "action", backgroundSize: "backgroundSize", accept: "accept", uploader: "uploader", model: "model", formCtrl: "formCtrl" }, outputs: { modelChange: "modelChange" }, host: { properties: { "style.height.px": "this.height" } }, usesOnChanges: true, ngImport: i0, template: "<a\n    (fileChange)=\"upload($event)\"\n    naturalFileDrop\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <natural-icon [size]=\"height * 0.33\" name=\"attachment\"></natural-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <natural-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" name=\"cloud_upload\"></natural-icon>\n        <natural-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" name=\"get_app\"></natural-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { kind: "directive", type: i1$4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NaturalFileDropDirective, selector: ":not([naturalFileSelect])[naturalFileDrop]", outputs: ["fileOver"] }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NaturalCapitalizePipe, name: "capitalize" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-file', template: "<a\n    (fileChange)=\"upload($event)\"\n    naturalFileDrop\n    [selectable]=\"true\"\n    [accept]=\"accept\"\n    [attr.href]=\"getDownloadLink()\"\n    [class.has-action]=\"!!action\"\n    [class.suggest-upload]=\"!model && action === 'upload'\"\n    [fileSelectionDisabled]=\"action !== 'upload'\"\n    [matRippleDisabled]=\"!action\"\n    [style.backgroundImage]=\"imagePreview\"\n    [style.backgroundSize]=\"backgroundSize\"\n    matRipple\n    target=\"_blank\"\n>\n    <div *ngIf=\"filePreview\" class=\"file-preview\">\n        <natural-icon [size]=\"height * 0.33\" name=\"attachment\"></natural-icon>\n        {{ filePreview | uppercase }}\n    </div>\n\n    <div class=\"action-overlay\">\n        <natural-icon *ngIf=\"action === 'upload'\" [size]=\"height * 0.66\" name=\"cloud_upload\"></natural-icon>\n        <natural-icon *ngIf=\"action === 'download'\" [size]=\"height * 0.66\" name=\"get_app\"></natural-icon>\n        {{ action | capitalize }}\n    </div>\n</a>\n", styles: [":host{display:flex;flex-direction:row;overflow:hidden;position:relative}:host>a{position:relative;flex:1;background-position:center;background-repeat:no-repeat}:host>a.has-action{cursor:pointer}:host>a.has-action.suggest-upload .action-overlay{opacity:.66}:host>a.has-action:hover .action-overlay,:host>a.has-action.natural-file-over .action-overlay{opacity:1}:host .action-overlay,:host .file-preview{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;justify-content:center;align-items:center;font-size:36px;line-height:1.3em;text-align:center}:host .action-overlay{opacity:0}:host .action-overlay>div{opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: NaturalFileService }, { type: i2$2.DomSanitizer }, { type: Document, decorators: [{
+        return [{ type: NaturalFileService }, { type: NaturalAlertService }, { type: i2$2.DomSanitizer }, { type: Document, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }];
@@ -8964,7 +9129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                 type: Input
             }], accept: [{
                 type: Input
-            }], service: [{
+            }], uploader: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -9005,7 +9170,7 @@ NaturalFixedButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalFixedButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-fixed-button', template: "<button\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [routerLink]=\"link\"\n    class=\"floating-button bottom-right\"\n    mat-fab\n    mat-raised-button\n>\n    <natural-icon [name]=\"icon\"></natural-icon>\n</button>\n", styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
+        }], propDecorators: { icon: [{
                 type: Input
             }], link: [{
                 type: Input
@@ -9064,7 +9229,7 @@ class NaturalFixedButtonDetailComponent extends NaturalAbstractController {
     }
 }
 NaturalFixedButtonDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [{ token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-NaturalFixedButtonDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NaturalFixedButtonDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-fixed-button-detail', template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n" }]
@@ -9291,7 +9456,7 @@ class NaturalPanelsService {
         const originalErrorHandler = this.router.errorHandler;
         // Nullify error handler (will be de-neutralized after route redirection)
         if (config) {
-            this.router.errorHandler = () => { };
+            this.router.errorHandler = () => undefined;
         }
         // Navigate to same url + /risk/new Result : /risk/risk/new
         const newUrl = config.map(conf => segmentsToString(conf.route.segments)).join('/');
@@ -9551,7 +9716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * Url fallback matcher to be used instead of `path: '**'` when Panel system
  * is used in the project.
  */
-const fallbackIfNoOpenedPanels = (segments, group, route) => {
+const fallbackIfNoOpenedPanels = (segments) => {
     if (!NaturalPanelsService.opened) {
         return { consumed: segments };
     }
@@ -9616,7 +9781,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
             this.disabled = this.disabled || !this.main.permissions.update;
         }
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         if (this.service) {
             this.queryItems();
         }
@@ -9716,7 +9881,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
     }
 }
 NaturalRelationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalRelationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: i7$1.MatProgressSpinner, 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$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$2.MatRow, 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.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+NaturalRelationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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.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"] }, { kind: "component", type: i7$2.MatProgressSpinner, 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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i7$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$3.MatRow, 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.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", 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"] }]
@@ -9797,64 +9962,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * Public API Surface of natural
  */
 
-/**
- * Wrap the searched value by `%` SQL wildcard
- *
- * So:
- *
- *     {field: 'myFieldName', condition: {like: {value: 'foo'}}}
- *
- * will become
- *
- *     {field: 'myFieldName', condition: {like: {value: '%foo%'}}}
- */
-function wrapLike(selection) {
-    if (selection.condition.like) {
-        selection.condition.like.value = '%' + selection.condition.like.value + '%';
-    }
-    return selection;
-}
-/**
- * Replace the operator name (usually "like", "in" or "between") with the
- * attribute "field" or "name" defined in the configuration
- *
- * So:
- *
- *     {field: 'myFieldName', condition: {in: {values: [1, 2, 3]}}}
- *
- * will become
- *
- *     {field: 'myFieldName', condition: {myFieldName: {values: [1, 2, 3]}}}
- */
-function replaceOperatorByField(selection) {
-    return replaceOperatorByAttribute(selection, 'field');
-}
-/**
- * Replace the operator name (usually "like", "in" or "between") with the
- * field "name" defined in the configuration
- *
- * So:
- *
- *     {field: 'myFieldName', name:'myConfigName', condition: {in: {values: [1, 2, 3]}}}
- *
- * will become
- *
- *     {field: 'myFieldName',  name:'myConfigName', condition: {myConfigName: {values: [1, 2, 3]}}}
- */
-function replaceOperatorByName(selection) {
-    return replaceOperatorByAttribute(selection, 'name');
-}
-function replaceOperatorByAttribute(selection, attribute) {
-    const oldOperator = Object.keys(selection.condition)[0];
-    const attributeValue = selection[attribute];
-    if (!attributeValue) {
-        throw new Error('Attribute cannot be empty. Most likely the configuration was wrong');
-    }
-    selection.condition[attributeValue] = selection.condition[oldOperator];
-    delete selection.condition[oldOperator];
-    return selection;
-}
-
 /*
  * Public API Surface of natural
  */
@@ -10150,7 +10257,7 @@ class NaturalSidenavContainerComponent {
     }
 }
 NaturalSidenavContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component });
-NaturalSidenavContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.MatSidenavContent, selector: "mat-sidenav-content" }] });
+NaturalSidenavContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.MatSidenavContent, selector: "mat-sidenav-content" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", 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"] }]
@@ -10176,17 +10283,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
             }] } });
 
 class NaturalSidenavContentComponent {
-    constructor() { }
 }
 NaturalSidenavContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NaturalSidenavContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSidenavContentComponent, selector: "natural-sidenav-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-sidenav-content', template: '<ng-content></ng-content>', styles: [":host{flex:1;display:flex;flex-direction:column;overflow:auto}\n"] }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class NaturalSidenavComponent {
-    constructor() { }
 }
 NaturalSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 NaturalSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalSidenavComponent, selector: "natural-sidenav", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
@@ -10196,7 +10301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                     selector: 'natural-sidenav',
                     template: '<ng-content></ng-content>',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class NaturalSidenavModule {
 }
@@ -10227,7 +10332,7 @@ class NaturalStampComponent {
     }
 }
 NaturalStampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalStampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalStampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalStampComponent, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-body-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-body-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NaturalSwissDatePipe, name: "swissDate" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] });
+NaturalStampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalStampComponent, selector: "natural-stamp", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-body-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-body-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NaturalSwissDatePipe, name: "swissDate" }, { kind: "pipe", type: NaturalTimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalStampComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-stamp', template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-body-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-body-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n" }]
@@ -10274,7 +10379,7 @@ class NaturalTableButtonComponent {
         this.buttonClick = new EventEmitter();
         this.type = 'none';
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         var _a;
         if (((_a = this.navigate) === null || _a === void 0 ? void 0 : _a.length) || Object.keys(this.queryParams).length) {
             this.type = 'routerLink';
@@ -10291,7 +10396,7 @@ class NaturalTableButtonComponent {
     }
 }
 NaturalTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalTableButtonComponent, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n<span *ngIf=\"type === 'none'\">\n    <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'href' && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        mat-icon-button\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}natural-table-button>span{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], encapsulation: i0.ViewEncapsulation.None });
+NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NaturalTableButtonComponent, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", raised: "raised", color: "color" }, outputs: { buttonClick: "buttonClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n<span *ngIf=\"type === 'none'\">\n    <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'href' && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        mat-icon-button\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}natural-table-button>span{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n<span *ngIf=\"type === 'none'\">\n    <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'href' && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n    <!-- App routed link with label... -->\n    <a\n        *ngIf=\"type === 'routerLink' && label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'routerLink' && !label\"\n        [color]=\"color\"\n        [queryParams]=\"queryParams\"\n        [queryParamsHandling]=\"queryParamsHandling\"\n        [routerLink]=\"navigate\"\n        [fragment]=\"fragment\"\n        [preserveFragment]=\"preserveFragment\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\n        mat-icon-button\n        mat-raised-button\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n\n    <!-- External link with label... -->\n    <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a\n        *ngIf=\"type === 'href' && !label\"\n        [attr.href]=\"href\"\n        [color]=\"color\"\n        mat-icon-button\n        mat-raised-button\n        target=\"_blank\"\n    >\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n    </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}natural-table-button>span{padding:0 16px}\n"] }]
@@ -10537,11 +10642,11 @@ function addUnsigned(lX, lY) {
     const lX4 = lX & 0x40000000;
     const lY4 = lY & 0x40000000;
     const lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);
-    if (!!(lX4 & lY4)) {
+    if (lX4 & lY4) {
         return lResult ^ 0x80000000 ^ lX8 ^ lY8;
     }
-    if (!!(lX4 | lY4)) {
-        if (!!(lResult & 0x40000000)) {
+    if (lX4 | lY4) {
+        if (lResult & 0x40000000) {
             return lResult ^ 0xc0000000 ^ lX8 ^ lY8;
         }
         else {
@@ -10767,7 +10872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 /**
  * Show an avatar from different sources
@@ -10905,7 +11010,7 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 {{ avatarText }}
             </div>
         </div>
-    `, isInline: true, styles: [":host{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, styles: [":host{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-avatar', template: `