@ecodev/natural 66.0.4 → 66.0.5

package/fesm2022/ecodev-natural.mjs

@@ -5614,7 +5614,7 @@ class NaturalColumnsPickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: false, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: false, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button matIconButton [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        matIconButton\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        matIconButton\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        matIconButton\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
@@ -5630,7 +5630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatMenuTrigger,
                         MatTooltip,
                         NaturalIconDirective,
-                    ], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button mat-icon-button [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        mat-icon-button\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        mat-icon-button\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        mat-icon-button\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<div>\n    @if ((isMobile | async) && someVisibleButtons()) {\n        <button matIconButton [matMenuTriggerFor]=\"mobileMenu\">\n            <mat-icon naturalIcon=\"more_vert\" />\n        </button>\n        <mat-menu #mobileMenu=\"matMenu\">\n            <ng-template matMenuContent>\n                @for (button of buttons(); track button) {\n                    @if (defaultTrue(button.show)) {\n                        @if (button.href) {\n                            <a\n                                mat-menu-item\n                                [href]=\"button.href\"\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </a>\n                        } @else if (button.buttons) {\n                            <button\n                                mat-menu-item\n                                [matMenuTriggerFor]=\"subMenu\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                            <mat-menu #subMenu=\"matMenu\">\n                                <ng-template matMenuContent>\n                                    @for (subButton of button.buttons; track subButton) {\n                                        <a\n                                            mat-menu-item\n                                            [disabled]=\"subButton.disabled\"\n                                            (click)=\"subButton.click(subButton, $event)\"\n                                        >\n                                            {{ subButton.label }}\n                                        </a>\n                                    }\n                                </ng-template>\n                            </mat-menu>\n                        } @else {\n                            <button\n                                mat-menu-item\n                                [disabled]=\"button.disabled\"\n                                [class]=\"needMargin(button)\"\n                                (click)=\"button.click?.(button, $event)\"\n                            >\n                                @if (useCheckbox(button)) {\n                                    <mat-checkbox [checked]=\"button.checked\" />\n                                }\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n\n                @if (displayedColumns.length) {\n                    <button mat-menu-item [matMenuTriggerFor]=\"columnMenu\" [class]=\"needMargin(null)\">\n                        <span i18n>Colonnes</span>\n                    </button>\n                }\n            </ng-template>\n        </mat-menu>\n    } @else {\n        @for (button of buttons(); track button) {\n            @if (defaultTrue(button.show)) {\n                @if (button.href) {\n                    <a\n                        matIconButton\n                        [href]=\"button.href\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </a>\n                } @else if (button.buttons) {\n                    <button\n                        matIconButton\n                        [matMenuTriggerFor]=\"menu\"\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                    <mat-menu #menu=\"matMenu\">\n                        <ng-template matMenuContent>\n                            @for (subButton of button.buttons; track subButton) {\n                                <a\n                                    mat-menu-item\n                                    [disabled]=\"subButton.disabled\"\n                                    (click)=\"subButton.click(subButton, $event)\"\n                                >\n                                    {{ subButton.label }}\n                                </a>\n                            }\n                        </ng-template>\n                    </mat-menu>\n                } @else {\n                    <button\n                        matIconButton\n                        [disabled]=\"button.disabled\"\n                        [color]=\"color(button)\"\n                        [matTooltip]=\"button.label\"\n                        (click)=\"button.click?.(button, $event)\"\n                    >\n                        <mat-icon [naturalIcon]=\"button.icon\" />\n                    </button>\n                }\n            }\n        }\n\n        @if (displayedColumns.length) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"S\u00E9lectionner les colonnes\"\n                [matMenuTriggerFor]=\"columnMenu\"\n            >\n                <mat-icon naturalIcon=\"view_column\" />\n            </button>\n        }\n    }\n</div>\n\n<mat-menu #columnMenu=\"matMenu\">\n    <ng-template matMenuContent>\n        @for (column of displayedColumns; track column) {\n            <div mat-menu-item (click)=\"menuItemClicked($event, column)\">\n                <mat-checkbox\n                    [(ngModel)]=\"column.checked\"\n                    (click)=\"checkboxClicked($event, column)\"\n                    (change)=\"updateColumns()\"\n                    >{{ column.label }}</mat-checkbox\n                >\n            </div>\n        }\n    </ng-template>\n</mat-menu>\n", styles: [".align-with-checkbox{padding-left:61px}\n"] }]
         }], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], availableColumns: [{
                 type: Input
             }], selections: [{
@@ -7253,7 +7253,7 @@ class NaturalSelectComponent extends AbstractSelect {
         return this.variablesManager.variables.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null }, optionRequired: { classPropertyName: "optionRequired", publicName: "optionRequired", isSignal: true, isRequired: false, transformFunction: null }, searchField: { classPropertyName: "searchField", publicName: "searchField", isSignal: false, isRequired: false, transformFunction: null }, searchOperator: { classPropertyName: "searchOperator", publicName: "searchOperator", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</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 [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null }, optionRequired: { classPropertyName: "optionRequired", publicName: "optionRequired", isSignal: true, isRequired: false, transformFunction: null }, searchField: { classPropertyName: "searchField", publicName: "searchField", isSignal: false, isRequired: false, transformFunction: null }, searchOperator: { classPropertyName: "searchOperator", publicName: "searchOperator", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</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 [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button matIconButton i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button matIconButton i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"error\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
@@ -7279,7 +7279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatTooltip,
                         RouterLink,
                         MatAutocompleteTrigger,
-                    ], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</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 [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Autocomplete menu -->\n<mat-autocomplete\n    #ac=\"matAutocomplete\"\n    panelWidth=\"auto !important\"\n    [displayWith]=\"getDisplayFn()\"\n    (optionSelected)=\"propagateValue($event.option.value)\"\n>\n    @for (item of items | async; track $index) {\n        <mat-option [value]=\"item\">\n            @let customTemplate = itemTemplate();\n            <ng-template\n                [ngTemplateOutletContext]=\"{item: item}\"\n                [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultACItem\"\n            />\n        </mat-option>\n    }\n    @if (hasMoreItems) {\n        <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\">Saisir pour chercher parmi {{ nbTotal }} r\u00E9sultats</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 [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [matAutocomplete]=\"ac\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"onBlur()\"\n        (change)=\"onInternalFormChange()\"\n        (click)=\"autoTrigger().openPanel()\"\n        (focus)=\"startSearch()\"\n        (keydown.esc)=\"reset()\"\n        (keydown.enter)=\"onKeyEnter()\"\n    />\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Meta data -->\n    @if (!loading && showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (loading) {\n        <div class=\"loading-wrapper\" matIconPrefix>\n            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"21\" [strokeWidth]=\"5\" />\n        </div>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button matIconButton i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\" (click)=\"clear()\">\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired()) {\n            <button matIconButton i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"reset()\">\n                <mat-icon naturalIcon=\"undo\" />\n            </button>\n        }\n        @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showClearButton()) {\n            <button color=\"error\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host>mat-autocomplete{margin-bottom:0!important}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
         }], propDecorators: { autoTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }], optionRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionRequired", required: false }] }], searchField: [{
                 type: Input
             }], searchOperator: [{
@@ -7807,7 +7807,7 @@ class NaturalInputComponent {
         return selection;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldName: { classPropertyName: "searchFieldName", publicName: "searchFieldName", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: true, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: 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\n    matRipple\n    subscriptSizing=\"dynamic\"\n    (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\"\n>\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalInputComponent, isStandalone: true, selector: "natural-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldName: { classPropertyName: "searchFieldName", publicName: "searchFieldName", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: true, isRequired: true, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: 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\n    matRipple\n    subscriptSizing=\"dynamic\"\n    (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\"\n>\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button matIconButton matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button matIconButton matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalInputComponent, decorators: [{
             type: Component,
@@ -7823,7 +7823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatIcon,
                         NaturalIconDirective,
                         MatIconButton,
-                    ], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field\n    matRipple\n    subscriptSizing=\"dynamic\"\n    (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\"\n>\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button mat-icon-button matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"] }]
+                    ], template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field\n    matRipple\n    subscriptSizing=\"dynamic\"\n    (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\"\n>\n    @if (facet) {\n        <mat-label>{{ facet.display }}</mat-label>\n    }\n    @if (!facet) {\n        <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input\n        #input\n        autocomplete=\"off\"\n        matInput\n        type=\"text\"\n        [attr.size]=\"length\"\n        [errorStateMatcher]=\"errorMatcher\"\n        [formControl]=\"formCtrl\"\n        [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n        (blur)=\"search($event)\"\n        (keydown.enter)=\"search($event)\"\n    />\n\n    @if (!facet && !selection) {\n        <mat-icon naturalIcon=\"search\" matIconPrefix />\n    }\n\n    @if (selection) {\n        <button matIconButton matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    }\n\n    @if (facet && !selection) {\n        <button matIconButton matIconSuffix (click)=\"clear()\">\n            <mat-icon naturalIcon=\"undo\" />\n        </button>\n    }\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{display:flex;position:relative;flex-direction:column;border-top-right-radius:4px;border-top-left-radius:4px;overflow:hidden}:host .hide{margin:0 50px 0 10px;height:0;color:transparent;font-size:inherit;font-family:Roboto,Helvetica Neue,sans-serif;white-space:nowrap}\n"] }]
         }], propDecorators: { ripple: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatRipple), { isSignal: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], placeholder: [{
                 type: Input
             }], searchFieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFieldName", required: false }] }], selection: [{
@@ -7937,7 +7937,7 @@ class NaturalSearchComponent {
         this.selectionChange.emit(selections);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: false, isRequired: false, transformFunction: null }, multipleGroups: { classPropertyName: "multipleGroups", publicName: "multipleGroups", isSignal: true, isRequired: false, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSearchComponent, isStandalone: true, selector: "natural-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, facets: { classPropertyName: "facets", publicName: "facets", isSignal: false, isRequired: false, transformFunction: null }, multipleGroups: { classPropertyName: "multipleGroups", publicName: "multipleGroups", isSignal: true, isRequired: false, transformFunction: null }, dropdownTitle: { classPropertyName: "dropdownTitle", publicName: "dropdownTitle", isSignal: true, isRequired: false, transformFunction: null }, selections: { classPropertyName: "selections", publicName: "selections", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            matIconButton\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button matIconButton i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button matIconButton class=\"clear-button\" i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NaturalGroupComponent, selector: "natural-group", inputs: ["dropdownTitle", "placeholder", "facets", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSearchComponent, decorators: [{
             type: Component,
@@ -7950,7 +7950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatIcon,
                         NaturalIconDirective,
                         MatDivider,
-                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            mat-icon-button\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button mat-icon-button i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button\n            mat-icon-button\n            class=\"clear-button\"\n            i18n-matTooltip\n            matTooltip=\"Annuler la recherche\"\n            (click)=\"clear()\"\n        >\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
+                    ], template: "<div class=\"natural-search\" [ngClass]=\"{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}\">\n    <div class=\"groupsWrapper\">\n        @for (groupSelections of innerSelections(); track $index) {\n            <div class=\"groupWrapper\">\n                <natural-group\n                    [facets]=\"facets\"\n                    [placeholder]=\"placeholder()\"\n                    [selections]=\"groupSelections\"\n                    [dropdownTitle]=\"dropdownTitle()\"\n                    (selectionChange)=\"updateGroup($event, $index)\"\n                />\n                <div class=\"endOfRowButton\">\n                    @if ($count > 1) {\n                        <button\n                            matIconButton\n                            i18n-matTooltip\n                            matTooltip=\"Supprimer ce groupe\"\n                            (click)=\"removeGroup($index)\"\n                        >\n                            <mat-icon naturalIcon=\"remove\" />\n                        </button>\n                    }\n                </div>\n            </div>\n            @if (!$last) {\n                <mat-divider />\n            }\n        }\n    </div>\n\n    <div class=\"endOfRowButton\">\n        @if (multipleGroups()) {\n            <button matIconButton i18n-matTooltip matTooltip=\"Ajouter un groupe logique OU\" (click)=\"addGroup()\">\n                <mat-icon naturalIcon=\"add\" />\n            </button>\n        }\n\n        <button matIconButton class=\"clear-button\" i18n-matTooltip matTooltip=\"Annuler la recherche\" (click)=\"clear()\">\n            <mat-icon naturalIcon=\"close\" />\n        </button>\n    </div>\n</div>\n", styles: [".natural-search{display:flex;flex-direction:row;align-items:flex-end}.natural-search .groupsWrapper{display:flex;flex:1;flex-direction:column;min-width:0}.natural-search .groupWrapper{display:flex;flex-direction:row;margin-bottom:10px;min-width:0}.natural-search .groupWrapper natural-group{flex:1;max-width:100%}.natural-search .groupWrapper:last-of-type{margin-bottom:0}.natural-search .endOfRowButton{display:flex;flex-direction:row;align-items:center;margin-bottom:15px;height:53px}.natural-search mat-divider{margin:-10px 0 10px}.natural-search.mobile .clear-button{display:none}.natural-search.mobile.hasMultipleGroups{flex-direction:column;align-items:stretch}.natural-search.mobile.hasMultipleGroups .endOfRowButton{flex-direction:row-reverse;margin-bottom:0}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], facets: [{
                 type: Input
             }], multipleGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleGroups", required: false }] }], dropdownTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownTitle", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selections: [{
@@ -8368,7 +8368,7 @@ class NaturalHierarchicSelectorComponent {
         this.selectionChange.emit(organizedFlatNodesSelection);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: true, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: true, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: true, isRequired: false, transformFunction: null }, allowSelectAll: { classPropertyName: "allowSelectAll", publicName: "allowSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchSelectionChange: "searchSelectionChange", selectionChange: "selectionChange" }, providers: [NaturalHierarchicSelectorService], usesOnChanges: true, ngImport: i0, template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button matIconButton matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
@@ -8393,7 +8393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatTooltip,
                         MatRadioButton,
                         NgTemplateOutlet,
-                    ], providers: [NaturalHierarchicSelectorService], template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"] }]
+                    ], providers: [NaturalHierarchicSelectorService], template: "<ng-template #displayTemplate let-node>\n    <div class=\"nat-horizontal nat-gap-5\">\n        @if (node.config.icon) {\n            <mat-icon [naturalIcon]=\"node.config.icon\" />\n        }\n        <span>{{ getDisplayFn(node.config)(node.model) }}</span>\n    </div>\n</ng-template>\n\n<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets()\" [selections]=\"searchSelections()\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple()) {\n    <div\n        class=\"select-all\"\n        i18n-matTooltip\n        matTooltip=\"Trop de r\u00E9sultats, veuillez affiner la recherche\"\n        [matTooltipDisabled]=\"!hierarchicSelectorService.isTooBig()\"\n    >\n        <a i18n mat-button [disabled]=\"hierarchicSelectorService.isTooBig()\" (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\n    </div>\n}\n\n<div class=\"body\">\n    @if (loading) {\n        <mat-progress-spinner mode=\"indeterminate\" style=\"margin: 10px\" [diameter]=\"36\" />\n    }\n\n    <mat-tree #tree [dataSource]=\"dataSource\" [childrenAccessor]=\"childrenAccessor\">\n        <mat-nested-tree-node\n            *matTreeNodeDef=\"let node\"\n            matTreeNodePadding\n            [class.leaf]=\"!node.isExpandable\"\n            (expandedChange)=\"$event ? loadChildren(node) : null\"\n        >\n            <div class=\"wrapper nat-horizontal nat-align\" [class.unexpandable]=\"!node.isExpandable\">\n                @if (node.isExpandable) {\n                    <button matIconButton matTreeNodeToggle [attr.aria-label]=\"`toggle ${node.model.name}`\">\n                        @if (node.isLoading) {\n                            <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                        } @else {\n                            <mat-icon [naturalIcon]=\"tree.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                        }\n                    </button>\n                }\n\n                @if (multiple()) {\n                    <mat-checkbox\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-checkbox>\n                } @else {\n                    <mat-radio-button\n                        class=\"selection\"\n                        [checked]=\"selection.isSelected(node)\"\n                        [disabled]=\"!node.isSelectable\"\n                        (change)=\"toggleSelection(node)\"\n                    >\n                        <ng-template *ngTemplateOutlet=\"displayTemplate; context: {$implicit: node}\" />\n                    </mat-radio-button>\n                }\n            </div>\n            <div class=\"children\" [class.invisible]=\"!tree.isExpanded(node)\">\n                <ng-container matTreeNodeOutlet />\n            </div>\n        </mat-nested-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selection.selected; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselect(node)\">\n                @if (node.config.icon) {\n                    <mat-icon matChipAvatar [naturalIcon]=\"node.config.icon\" />\n                }\n                {{ node.model.name || node.model.fullName }}\n                <button matChipRemove>\n                    <mat-icon naturalIcon=\"cancel\" />\n                </button>\n            </mat-chip-option>\n        } @empty {\n            <p class=\"mat-body nat-padding-horizontal\" i18n>Aucune s\u00E9lection</p>\n        }\n    </mat-chip-listbox>\n</div>\n\n@if (!loading && !dataSource.data.length) {\n    <div i18n>Aucun r\u00E9sultat</div>\n}\n", styles: [":host{display:block}mat-icon{width:18px;height:18px;font-size:18px}.select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}.mat-tree-node.leaf{margin-left:48px}.body{display:flex;flex-direction:row;justify-content:space-between}.body mat-tree{flex:66;flex-shrink:0}.body mat-chip-listbox{flex:33;margin-left:10px}mat-nested-tree-node{display:block}mat-nested-tree-node,mat-nested-tree-node .wrapper{min-height:48px}mat-nested-tree-node mat-nested-tree-node{display:block;padding-left:40px!important}.invisible{display:none}.unexpandable{padding-left:40px}.selection,.selection .mat-icon{margin-right:10px}\n"] }]
         }], propDecorators: { displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], searchFacets: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFacets", required: false }] }], searchSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSelections", required: false }] }], allowSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelectAll", required: false }] }], searchSelectionChange: [{ type: i0.Output, args: ["searchSelectionChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 class TypeHierarchicSelectorComponent extends AbstractAssociationSelectComponent {
@@ -9359,7 +9359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
 class NaturalFixedButtonComponent {
     icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
     link = input(null, ...(ngDevMode ? [{ debugName: "link" }] : []));
-    color = input('accent', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    color = input('tertiary', ...(ngDevMode ? [{ debugName: "color" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: NaturalFixedButtonComponent, isStandalone: true, selector: "natural-fixed-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button mat-fab [color]=\"color()\" [disabled]=\"disabled()\" [routerLink]=\"link()\">\n    <mat-icon [naturalIcon]=\"icon()\" />\n</button>\n", styles: [":host{position:fixed!important;right:32px;bottom:32px;z-index:999}\n"], dependencies: [{ kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }] });
@@ -9405,11 +9405,11 @@ class NaturalFixedButtonDetailComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalFixedButtonDetailComponent, isStandalone: true, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'tertiary' : 'error'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n", styles: [""], dependencies: [{ kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-fixed-button-detail', imports: [NaturalFixedButtonComponent, MatTooltip], template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'accent' : 'warn'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        color=\"warn\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n" }]
+            args: [{ selector: 'natural-fixed-button-detail', imports: [NaturalFixedButtonComponent, MatTooltip], template: "@if (isCreation) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"save\"\n        [disabled]=\"form.disabled\"\n        [color]=\"form.valid ? 'tertiary' : 'error'\"\n        (click)=\"clickCreate()\"\n    />\n}\n\n@if (!isCreation && (!model.permissions || model.permissions.delete)) {\n    <natural-fixed-button\n        class=\"detail-speed-dial\"\n        icon=\"delete_forever\"\n        i18n-matTooltip\n        matTooltip=\"Supprimer d\u00E9finitivement\"\n        matTooltipPosition=\"left\"\n        [disabled]=\"form.disabled\"\n        (click)=\"clickDelete()\"\n    />\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { model: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10147,7 +10147,7 @@ class NaturalRelationsComponent {
         return hierarchicSelectorConfig.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalRelationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocompleteSelectorFilter: { classPropertyName: "autocompleteSelectorFilter", publicName: "autocompleteSelectorFilter", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, main: { classPropertyName: "main", publicName: "main", isSignal: false, isRequired: true, transformFunction: null }, hierarchicSelectorFilters: { classPropertyName: "hierarchicSelectorFilters", publicName: "hierarchicSelectorFilters", isSignal: true, isRequired: false, transformFunction: null }, hierarchicSelectorConfig: { classPropertyName: "hierarchicSelectorConfig", publicName: "hierarchicSelectorConfig", isSignal: true, isRequired: false, transformFunction: null }, otherName: { classPropertyName: "otherName", publicName: "otherName", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true, isSignal: 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 class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\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                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: false, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocompleteSelectorFilter: { classPropertyName: "autocompleteSelectorFilter", publicName: "autocompleteSelectorFilter", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, main: { classPropertyName: "main", publicName: "main", isSignal: false, isRequired: true, transformFunction: null }, hierarchicSelectorFilters: { classPropertyName: "hierarchicSelectorFilters", publicName: "hierarchicSelectorFilters", isSignal: true, isRequired: false, transformFunction: null }, hierarchicSelectorConfig: { classPropertyName: "hierarchicSelectorConfig", publicName: "hierarchicSelectorConfig", isSignal: true, isRequired: false, transformFunction: null }, otherName: { classPropertyName: "otherName", publicName: "otherName", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true, isSignal: 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 class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\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                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"error\"\n                        matIconButton\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "pageSize", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
             type: Component,
@@ -10171,7 +10171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatPaginator,
                         MatProgressSpinner,
                         NaturalSelectComponent,
-                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\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                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"warn\"\n                        mat-icon-button\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
+                    ], template: "<div class=\"body\">\n    <ng-template #defaultNameCell let-item=\"item\">\n        {{ getDisplayFn()(item) }}\n    </ng-template>\n\n    <table class=\"natural-row-click\" mat-table [dataSource]=\"dataSource\">\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                @let customTemplate = itemTemplate();\n                <ng-template\n                    [ngTemplateOutletContext]=\"{item: item}\"\n                    [ngTemplateOutlet]=\"customTemplate ? customTemplate : defaultNameCell\"\n                />\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"unlink\">\n            <th *matHeaderCellDef mat-header-cell></th>\n            <td *matCellDef=\"let element\" mat-cell>\n                @if (!disabled) {\n                    <button\n                        color=\"error\"\n                        matIconButton\n                        i18n-matTooltip\n                        matTooltip=\"Dissocier\"\n                        [disabled]=\"removing.has(element)\"\n                        (click)=\"removeRelation(element)\"\n                    >\n                        <mat-icon naturalIcon=\"link_off\" />\n                    </button>\n                }\n            </td>\n        </ng-container>\n    </table>\n\n    @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n        <mat-paginator\n            [length]=\"dataSource.data.length || 0\"\n            [pageIndex]=\"dataSource.data.pageIndex || 0\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [pageSize]=\"dataSource.data.pageSize || 0\"\n            (page)=\"pagination($event)\"\n        />\n    }\n\n    @if (!loading && dataSource.data?.length === 0) {\n        <div class=\"nat-margin-vertical mat-body\">\n            <span i18n>Aucun r\u00E9sultat</span>\n        </div>\n    }\n\n    @if (loading) {\n        <mat-progress-spinner class=\"loading\" mode=\"indeterminate\" [diameter]=\"40\" />\n    }\n</div>\n\n@if (!disabled) {\n    @if (hierarchicSelectorConfig()) {\n        <div>\n            <button color=\"primary\" mat-flat-button (click)=\"openNaturalHierarchicSelector()\">{{\n                placeholder()\n            }}</button>\n        </div>\n    } @else {\n        <natural-select\n            [displayWith]=\"$any(getDisplayFn())\"\n            [filter]=\"autocompleteSelectorFilter()\"\n            [placeholder]=\"placeholder()\"\n            [service]=\"service\"\n            [showIcon]=\"false\"\n            (selectionChange)=\"addRelations([$event])\"\n        />\n    }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
         }], propDecorators: { select: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NaturalSelectComponent), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], service: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10355,7 +10355,7 @@ class NaturalSelectHierarchicComponent extends AbstractSelect {
         return this.config?.find(c => !!c.selectableAtKey)?.selectableAtKey;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectHierarchicComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalSelectHierarchicComponent, isStandalone: true, selector: "natural-select-hierarchic", inputs: { selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"error\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalSelectHierarchicComponent, decorators: [{
             type: Component,
@@ -10375,7 +10375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         MatIconButton,
                         MatTooltip,
                         RouterLink,
-                    ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                mat-icon-button\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"warn\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
+                    ], template: "<mat-form-field [subscriptSizing]=\"subscriptSizing()\">\n    <mat-label>{{ placeholder() }}</mat-label>\n\n    <!-- Input for hierarchical selector -->\n    <input\n        aria-label=\"Recherche et s\u00E9lection\"\n        i18n-aria-label\n        matInput\n        [formControl]=\"internalCtrl\"\n        [errorStateMatcher]=\"matcher\"\n        (blur)=\"blur.emit()\"\n        (focus)=\"openDialog()\"\n    />\n\n    <!-- Meta data -->\n    @if (showIcon()) {\n        <mat-icon matIconPrefix [naturalIcon]=\"icon()\" />\n    }\n\n    @if (hint()) {\n        <mat-hint>{{ hint() }}</mat-hint>\n    }\n\n    <!-- Clear button -->\n    <div matIconSuffix>\n        @if (internalCtrl.value && internalCtrl.enabled && !clearLabel()) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"D\u00E9s\u00E9lectionner\"\n                (click)=\"clear(); $event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"close\" />\n            </button>\n        }\n        @if (internalCtrl.value && navigateTo) {\n            <button\n                matIconButton\n                i18n-matTooltip\n                matTooltip=\"Naviguer vers\"\n                [routerLink]=\"navigateTo\"\n                (click)=\"$event.stopPropagation()\"\n            >\n                <mat-icon naturalIcon=\"open_in_browser\" />\n            </button>\n        }\n    </div>\n\n    @if (hasRequiredError()) {\n        <mat-error i18n>Ce champ est requis</mat-error>\n    } @else if (error) {\n        <mat-error>{{ error }}</mat-error>\n    }\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@if (showSelectButton() || showClearButton()) {\n    <div class=\"external-buttons\">\n        @if (showSelectButton()) {\n            <button color=\"primary\" mat-flat-button (click)=\"openDialog()\">{{ selectLabel }}</button>\n        }\n        @if (showClearButton()) {\n            <button color=\"error\" mat-button (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}\n"] }]
         }], propDecorators: { selectLabel: [{
                 type: Input
             }], config: [{
@@ -10776,11 +10776,11 @@ class NaturalTableButtonComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "type" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    matIconButton\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a matIconButton target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and matIconButton), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    matIconButton\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a matIconButton target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-table-button', imports: [MatIcon, NaturalIconDirective, MatButton, MatIconButton, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    matIconButton\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a matIconButton target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
+            args: [{ selector: 'natural-table-button', imports: [MatIcon, NaturalIconDirective, MatButton, MatIconButton, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and matIconButton), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n    <span>\n        @if (theIcon) {\n            <mat-icon [naturalIcon]=\"theIcon\" />\n        }\n        @if (label()) {\n            <span>{{ label() }}</span>\n        }\n    </span>\n} @else {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLinkOrClick') {\n            @if (label()) {\n                <a\n                    [matButton]=\"appearance()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    matIconButton\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    (click)=\"buttonClick$.next($event)\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a\n                    target=\"_blank\"\n                    [matButton]=\"appearance()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a matIconButton target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
         }], propDecorators: { queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], preserveFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveFragment", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
 /*