@ecodev/natural 63.9.0 → 63.9.1

package/fesm2022/ecodev-natural.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, PLATFORM_ID, signal, output, Pipe, Optional, Inject, LOCALE_ID, provideAppInitializer, input, computed, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
+import { inject, Component, Injectable, DestroyRef, HostListener, HostBinding, Directive, InjectionToken, ElementRef, viewChild, ViewEncapsulation, Injector, Input, PLATFORM_ID, signal, output, Pipe, LOCALE_ID, provideAppInitializer, input, computed, contentChild, TemplateRef, EnvironmentInjector, createEnvironmentInjector, createComponent, Inject, runInInjectionContext, ChangeDetectionStrategy, linkedSignal, ErrorHandler, importProvidersFrom } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, FormsModule, ReactiveFormsModule, UntypedFormControl, NgControl, FormControlDirective, FormControlName } from '@angular/forms';
 import { NavigationStart, NavigationEnd, ActivatedRoute, Router, RouteConfigLoadStart, RouteConfigLoadEnd, PRIMARY_OUTLET, RouterLink, NavigationError, DefaultUrlSerializer, UrlTree } from '@angular/router';
@@ -2383,7 +2383,11 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
      */
     _isUpdatePage = false;
     changes = new CumulativeChanges();
-    constructor(key, service) {
+    constructor(
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    key, 
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    service) {
         super();
         this.key = key;
         this.service = service;
@@ -2592,6 +2596,7 @@ class NaturalAbstractEditableList {
     formArray = new UntypedFormArray([]);
     variablesManager = new NaturalQueryVariablesManager();
     dataSource = new MatTableDataSource();
+    // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(service) {
         this.service = service;
         // Create a form group with a line attributes that contain an array of formGroups (one by line = one by model)
@@ -2893,7 +2898,7 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, imports: [PortalModule, MatButtonModule], template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"] }]
+            args: [{ imports: [PortalModule, MatButtonModule], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div\n    class=\"natural-dropdown-container mat-elevation-z2\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n    (animationend)=\"onAnimationDone($event.animationName)\"\n    (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n    <div class=\"natural-dropdown-container-content\">\n        <ng-template cdkPortalOutlet />\n    </div>\n\n    @if (data.showValidateButton) {\n        <div class=\"natural-dropdown-validate-button\">\n            <button color=\"primary\" mat-raised-button i18n (click)=\"close()\">Valider</button>\n        </div>\n    }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"] }]
         }] });
 
 class NaturalDropdownRef {
@@ -3762,6 +3767,7 @@ class NaturalAbstractList extends NaturalAbstractPanel {
     route = inject(ActivatedRoute);
     alertService = inject(NaturalAlertService);
     persistenceService = inject(NaturalPersistenceService);
+    // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(service) {
         super();
         this.service = service;
@@ -3864,7 +3870,7 @@ class NaturalAbstractList extends NaturalAbstractPanel {
      */
     getPagination() {
         const paginationChannel = this.variablesManager.get('pagination');
-        if (paginationChannel && paginationChannel.pagination) {
+        if (paginationChannel?.pagination) {
             // The cast should not be necessary because Typescript correctly narrow down the type to `PaginationInput`
             // but somehow still get confused when returning it
             return paginationChannel.pagination;
@@ -4122,6 +4128,7 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
     ancestorRelationName = 'parent';
     oldAncertorId = null;
     breadcrumbs = [];
+    // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(service) {
         super(service);
     }
@@ -5544,7 +5551,7 @@ class NaturalColumnsPickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalColumnsPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<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                                [ngClass]=\"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                                [ngClass]=\"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                                [ngClass]=\"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\" [ngClass]=\"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: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalColumnsPickerComponent, isStandalone: true, selector: "natural-columns-picker", inputs: { buttons: "buttons", availableColumns: "availableColumns", selections: "selections" }, 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                                [ngClass]=\"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                                [ngClass]=\"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                                [ngClass]=\"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\" [ngClass]=\"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: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalColumnsPickerComponent, decorators: [{
             type: Component,
@@ -5557,7 +5564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         MatCheckboxModule,
                         MatTooltipModule,
                         FormsModule,
-                    ], template: "<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                                [ngClass]=\"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                                [ngClass]=\"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                                [ngClass]=\"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\" [ngClass]=\"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 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                                [ngClass]=\"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                                [ngClass]=\"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                                [ngClass]=\"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\" [ngClass]=\"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"] }]
         }], propDecorators: { buttons: [{
                 type: Input
             }], availableColumns: [{
@@ -5727,10 +5734,7 @@ function isDate(value) {
  * - "dans 3 ans"
  */
 class NaturalTimeAgoPipe {
-    fakedNow;
-    constructor(fakedNow = null) {
-        this.fakedNow = fakedNow;
-    }
+    fakedNow = null;
     getNow() {
         return this.fakedNow ?? Date.now();
     }
@@ -5836,7 +5840,7 @@ class NaturalTimeAgoPipe {
             throw new Error('Time travelling just happened');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, deps: [{ token: 'SHOULD_NEVER_BE_INJECTED', optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, isStandalone: true, name: "timeAgo" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTimeAgoPipe, decorators: [{
@@ -5845,12 +5849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                     name: 'timeAgo',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['SHOULD_NEVER_BE_INJECTED']
-                }] }] });
+        }] });
 
 function densities(src, forImageSet) {
     const match = /^(.*\/)(\d+)$/.exec(src);
@@ -6045,8 +6044,8 @@ class NaturalDialogTriggerComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalDialogTriggerComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '',
                     standalone: true,
+                    template: '',
                 }]
         }], ctorParameters: () => [] });
 
@@ -6544,7 +6543,8 @@ class AbstractAssociationSelectComponent {
         operator: this.operatorCtrl,
         value: this.valueCtrl,
     });
-    constructor(data) {
+    constructor() {
+        const data = inject(NATURAL_DROPDOWN_DATA);
         this.configuration = data.configuration;
         // Immediately initValidators and everytime the operator change later
         this.operatorCtrl.valueChanges.pipe(startWith(null)).subscribe(() => this.initValidators());
@@ -6615,16 +6615,13 @@ class AbstractAssociationSelectComponent {
                 throw new Error('Unsupported operator key: ' + key);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractAssociationSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: AbstractAssociationSelectComponent, isStandalone: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AbstractAssociationSelectComponent, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NATURAL_DROPDOWN_DATA]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 /**
  * This will completely ignore internal formControl and instead use the one from the component
@@ -7090,7 +7087,7 @@ class NaturalSelectComponent extends AbstractSelect {
         return this.variablesManager.variables.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", pageSize: "pageSize", disabled: "disabled" }, 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: "<!-- 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.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: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.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: "19.2.13", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", pageSize: "pageSize", disabled: "disabled" }, 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.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: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.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: "19.2.13", ngImport: i0, type: NaturalSelectComponent, decorators: [{
             type: Component,
@@ -7108,7 +7105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         MatButtonModule,
                         MatTooltipModule,
                         RouterLink,
-                    ], template: "<!-- 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 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"] }]
         }], propDecorators: { service: [{
                 type: Input,
                 args: [{ required: true }]
@@ -7177,7 +7174,7 @@ class TypeTextComponent {
     constructor() {
         const data = inject(NATURAL_DROPDOWN_DATA);
         this.formCtrl.valueChanges.subscribe(value => {
-            this.renderedValue.next(value === null ? '' : this.formCtrl.value + '');
+            this.renderedValue.next(value === null ? '' : this.formCtrl.value);
         });
         this.formCtrl.setValidators([Validators.required]);
         if (data.condition?.like) {
@@ -7874,7 +7871,7 @@ class NaturalHierarchicSelectorService {
      * Mark loading status individually on nodes.
      */
     loadChildren(flatNode, contextFilter = null) {
-        // Dont refetch children. Improve performances
+        // Don't refetch children. Improve performances
         // Prevents interferences between HierarchicModelNode structure and angular components navigation.
         // Prevents a bug where grand children were lost if closing root
         if (flatNode.node.children.length) {
@@ -8153,7 +8150,10 @@ class NaturalHierarchicSelectorComponent {
     /**
      * Cache for transformed nodes
      */
-    flatNodeMap = new Map();
+    flatNodeMap = signal(new Map(), { equal: () => false });
+    tooBig = computed(() => {
+        return this.flatNodeMap().size === 999;
+    });
     /**
      * Angular OnChange implementation
      */
@@ -8218,7 +8218,7 @@ class NaturalHierarchicSelectorComponent {
         }
     }
     selectAll() {
-        this.flatNodeMap.forEach(flatNode => {
+        this.flatNodeMap().forEach(flatNode => {
             if (!this.isNodeSelected(flatNode.node)) {
                 this.selectFlatNode(flatNode);
             }
@@ -8332,7 +8332,7 @@ class NaturalHierarchicSelectorComponent {
     }
     loadRoots(searchVariables) {
         this.loading = true;
-        this.flatNodeMap = new Map();
+        this.flatNodeMap.set(new Map());
         this.hierarchicSelectorService
             .init(this.config, this.filters, searchVariables || null)
             .pipe(finalize$1(() => (this.loading = false)))
@@ -8407,7 +8407,7 @@ class NaturalHierarchicSelectorComponent {
     }
     getFlatNode(node) {
         const key = this.getMapKey(node.model);
-        return this.flatNodeMap.get(key) || null;
+        return this.flatNodeMap().get(key) || null;
     }
     createFlatNode(node, level) {
         const key = this.getMapKey(node.model);
@@ -8427,7 +8427,10 @@ class NaturalHierarchicSelectorComponent {
             this.flatNodesSelection.select(flatNode);
         }
         // Cache FlatNode
-        this.flatNodeMap.set(key, flatNode);
+        this.flatNodeMap.update(map => {
+            map.set(key, flatNode);
+            return map;
+        });
         return flatNode;
     }
     /**
@@ -8438,11 +8441,11 @@ class NaturalHierarchicSelectorComponent {
         return model.__typename + '-' + model.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, allowUnselect: { classPropertyName: "allowUnselect", publicName: "allowUnselect", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: false, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: false, 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: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple) {\n    <a i18n mat-button (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\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 [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .select-all{margin-bottom:5px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NaturalHierarchicSelectorComponent, isStandalone: true, selector: "natural-hierarchic-selector", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, allowUnselect: { classPropertyName: "allowUnselect", publicName: "allowUnselect", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, searchFacets: { classPropertyName: "searchFacets", publicName: "searchFacets", isSignal: false, isRequired: false, transformFunction: null }, searchSelections: { classPropertyName: "searchSelections", publicName: "searchSelections", isSignal: false, 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: "<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 class=\"select-all\" [matTooltip]=\"tooBig() ? 'Trop de r\u00E9sultats, veuillez affiner la recherche' : null\">\n        <a i18n mat-button [disabled]=\"tooBig()\" (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 [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"`toggle ${node.name}`\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"], dependencies: [{ kind: "component", type: NaturalSearchComponent, selector: "natural-search", inputs: ["placeholder", "facets", "multipleGroups", "dropdownTitle", "selections"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6.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: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalHierarchicSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-hierarchic-selector', providers: [NaturalHierarchicSelectorService], imports: [
+            args: [{ selector: 'natural-hierarchic-selector', imports: [
                         NaturalSearchComponent,
                         CommonModule,
                         MatProgressSpinnerModule,
@@ -8452,7 +8455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         NaturalIconDirective,
                         MatCheckboxModule,
                         MatChipsModule,
-                    ], template: "<div [style.margin-bottom.px]=\"20\">\n    <natural-search [facets]=\"searchFacets\" [selections]=\"searchSelections\" (selectionChange)=\"search($event)\" />\n</div>\n\n@if (allowSelectAll() && multiple) {\n    <a i18n mat-button (click)=\"selectAll()\">Tout s\u00E9lectionner</a>\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 [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"'toggle ' + node.name\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .select-all{margin-bottom:5px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"] }]
+                        MatTooltipModule,
+                    ], providers: [NaturalHierarchicSelectorService], template: "<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 class=\"select-all\" [matTooltip]=\"tooBig() ? 'Trop de r\u00E9sultats, veuillez affiner la recherche' : null\">\n        <a i18n mat-button [disabled]=\"tooBig()\" (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 [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [ngClass]=\"{leaf: !node.expandable}\">\n            @if (node.expandable) {\n                <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    [attr.aria-label]=\"`toggle ${node.name}`\"\n                    (click)=\"loadChildren(node)\"\n                >\n                    @if (node.loading) {\n                        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"24\" [strokeWidth]=\"5\" />\n                    }\n                    @if (!node.loading) {\n                        <mat-icon [naturalIcon]=\"treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'\" />\n                    }\n                </button>\n            }\n\n            <mat-checkbox\n                style=\"margin-right: 10px\"\n                [checked]=\"flatNodesSelection.isSelected(node)\"\n                [disabled]=\"!isNodeTogglable(node)\"\n                (change)=\"toggleFlatNode(node)\"\n            >\n                @if (node.node.config.icon) {\n                    <mat-icon style=\"margin-right: 10px\" [naturalIcon]=\"node.node.config.icon\" />\n                }\n                <span>{{ node.name }}</span>\n            </mat-checkbox>\n        </mat-tree-node>\n    </mat-tree>\n\n    <mat-chip-listbox aria-orientation=\"vertical\" class=\"mat-mdc-chip-set-stacked\">\n        @for (node of selectedNodes; track node.model.id) {\n            <mat-chip-option [removable]=\"true\" [selectable]=\"false\" (removed)=\"unselectModelNode(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}:host ul,:host li{-webkit-margin-before:0;-webkit-margin-after:0;list-style-type:none}:host mat-icon{width:18px;height:18px;font-size:18px}:host .select-all{display:inline-block;margin-top:-15px;margin-bottom:5px}:host .mat-tree-node.leaf{margin-left:48px}:host .body{display:flex;flex-direction:row;justify-content:space-between}:host .body mat-tree{flex:66}:host .body mat-chip-listbox{flex:33}:host mat-tree{flex-shrink:0}:host mat-chip-listbox{margin-left:10px}\n"] }]
         }], propDecorators: { displayWith: [{
                 type: Input
             }], config: [{
@@ -8666,7 +8670,9 @@ class TypeOptionsComponent {
         options: [],
     };
     dropdownRef = inject(NaturalDropdownRef);
-    constructor(data) {
+    constructor(
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    data) {
         this.data = data;
         this.configuration = { ...this.defaults, ...data.configuration };
         if (!this.configuration.options.length) {
@@ -8923,9 +8929,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * @dynamic
  */
 class NaturalAbstractFile {
-    element;
-    naturalFileService;
-    document;
     fileElement;
     /**
      * Whether we should accept a single file or multiple files
@@ -8973,11 +8976,9 @@ class NaturalAbstractFile {
      * The list of files that have been selected.
      */
     filesChange = outputFromObservable(this.filesChange$);
-    constructor(element, naturalFileService, document) {
-        this.element = element;
-        this.naturalFileService = naturalFileService;
-        this.document = document;
-    }
+    element = inject(ElementRef);
+    naturalFileService = inject(NaturalFileService);
+    document = inject(DOCUMENT);
     ngOnDestroy() {
         delete this.fileElement; // faster memory release of dom element
     }
@@ -9114,16 +9115,13 @@ class NaturalAbstractFile {
             this.filesChange$.observed ||
             (this.broadcast && this.naturalFileService.filesChanged.observed));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractFile, deps: [{ token: i0.ElementRef }, { token: NaturalFileService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractFile, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: NaturalAbstractFile, isStandalone: true, inputs: { multiple: "multiple", accept: "accept", maxSize: "maxSize", fileSelectionDisabled: "fileSelectionDisabled", selectable: "selectable", broadcast: "broadcast" }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, host: { listeners: { "change": "onChange($event)" } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAbstractFile, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NaturalFileService }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { multiple: [{
+        }], propDecorators: { multiple: [{
                 type: Input
             }], accept: [{
                 type: Input
@@ -10006,8 +10004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             type: Component,
             args: [{
                     selector: 'natural-panels',
-                    template: '',
                     standalone: true,
+                    template: '',
                 }]
         }], ctorParameters: () => [] });
 
@@ -10690,8 +10688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             type: Component,
             args: [{
                     selector: 'natural-sidenav',
-                    template: '<ng-content />',
                     standalone: true,
+                    template: '<ng-content />',
                 }]
         }] });
 
@@ -10758,7 +10756,7 @@ class NaturalSidenavContainerComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], imports: [MatSidenavModule, CommonModule], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'natural-sidenav-container', imports: [MatSidenavModule, CommonModule], providers: [NaturalSidenavService], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\" />\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\" />\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex:1;flex-direction:column}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }], propDecorators: { name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10781,7 +10779,7 @@ class NaturalSidenavContentComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalSidenavContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-sidenav-content', template: '<ng-content />', standalone: true, styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }]
+            args: [{ selector: 'natural-sidenav-content', standalone: true, template: '<ng-content />', styles: [":host{display:flex;flex:1;flex-direction:column;overflow:auto}\n"] }]
         }] });
 
 /*
@@ -10851,11 +10849,11 @@ class NaturalTableButtonComponent {
         }
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", 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 }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- 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 if (!raised()) {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n} @else {\n    <!-- App routed link -->\n    @switch (type()) {\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-raised-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click  -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-raised-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\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 mat-raised-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    target=\"_blank\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", 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: "19.2.13", 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 }, raised: { classPropertyName: "raised", publicName: "raised", 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 if (!raised()) {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n} @else {\n    <!-- App routed link -->\n    @switch (type()) {\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-raised-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click  -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-raised-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\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 mat-raised-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    target=\"_blank\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconAnchor, selector: "a[mat-icon-button]", 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: "19.2.13", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, NaturalIconDirective, MatButtonModule, RouterLink], template: "<!-- 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 if (!raised()) {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n} @else {\n    <!-- App routed link -->\n    @switch (type()) {\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-raised-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click  -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-raised-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\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 mat-raised-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    target=\"_blank\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\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: [MatIconModule, NaturalIconDirective, MatButtonModule, RouterLink], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 if (!raised()) {\n    @switch (type()) {\n        <!-- App routed link -->\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- External link -->\n        @case ('href') {\n            @if (label()) {\n                <a mat-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a mat-icon-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n    }\n} @else {\n    <!-- App routed link -->\n    @switch (type()) {\n        @case ('routerLink') {\n            @if (label()) {\n                <a\n                    mat-raised-button\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [queryParams]=\"queryParams()\"\n                    [queryParamsHandling]=\"queryParamsHandling()\"\n                    [routerLink]=\"navigate()\"\n                    [fragment]=\"fragment()\"\n                    [preserveFragment]=\"preserveFragment()\"\n                    [disabled]=\"disabled()\"\n                >\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                </a>\n            }\n        }\n        <!-- Click  -->\n        @case ('click') {\n            @if (label()) {\n                <a mat-raised-button [color]=\"color()\" [disabled]=\"disabled()\" (click)=\"buttonClick$.next($event)\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\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 mat-raised-button target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n                    @if (theIcon) {\n                        <mat-icon [naturalIcon]=\"theIcon\" />\n                    }\n                    <span>{{ label() }}</span>\n                </a>\n            } @else {\n                <a\n                    mat-icon-button\n                    class=\"mat-elevation-z4\"\n                    target=\"_blank\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\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"] }]
         }] });
 
 /*
@@ -10915,7 +10913,7 @@ function isRetina() {
         return true;
     }
     const mediaQuery = '(-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 1.25dppx)';
-    return !!myWindow?.matchMedia(mediaQuery).matches;
+    return myWindow?.matchMedia(mediaQuery).matches;
 }
 /**
  * Return URL to Gravatar image from either an email or a MD5 or SHA-256 of an email
@@ -11072,8 +11070,8 @@ class NaturalAvatarComponent {
         const sources = this.sources();
         return sources.sources[sources.currentIndex];
     });
-    imageAvatar = computed(() => this.currentSource()?.getAvatar(+this.size()));
-    textAvatar = computed(() => this.currentSource()?.getAvatar(+this.textMaximumLength()));
+    imageAvatar = computed(() => this.currentSource()?.getAvatar(this.size()));
+    textAvatar = computed(() => this.currentSource()?.getAvatar(this.textMaximumLength()));
     /**
      * Try to use the next available avatar source that has not already failed in the past
      */
@@ -11111,7 +11109,7 @@ class NaturalAvatarComponent {
             textTransform: 'uppercase',
             color: this.fgColor(),
             backgroundColor: backgroundColor,
-            font: Math.floor(+this.size() / this.textSizeRatio()) + 'px Helvetica, Arial, sans-serif',
+            font: Math.floor(this.size() / this.textSizeRatio()) + 'px Helvetica, Arial, sans-serif',
             lineHeight: this.size() + 'px',
             width: this.size() + 'px',
             height: this.size() + 'px',
@@ -11154,7 +11152,7 @@ class NaturalAvatarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NaturalAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-avatar', template: `
+            args: [{ selector: 'natural-avatar', imports: [CommonModule], template: `
         @let source = currentSource();
         <div class="avatar-container" [style.height.px]="size()" [style.width.px]="size()">
             @if (source && source?.isTextual()) {
@@ -11179,7 +11177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         '[style.height.px]': 'size()',
                         '[style.width.px]': 'size()',
                         '[class.decorated]': 'decorated()',
-                    }, imports: [CommonModule], styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
+                    }, styles: [":host{display:block}:host.decorated{position:relative}:host.decorated .avatar-container:before{position:absolute;inset:0;border-radius:50%;background:linear-gradient(345deg,#fff0 25%,#ffffff54);content:\"\"}:host.decorated .avatar-content{text-shadow:0 1px 0 rgba(0,0,0,.6)}\n"] }]
         }] });
 
 /*