@ecodev/natural 51.0.0 → 52.0.0

package/fesm2022/ecodev-natural.mjs

@@ -1,7 +1,7 @@
 import '@angular/localize/init';
 import * as i0 from '@angular/core';
-import { Directive, Component, Inject, Injectable, HostBinding, HostListener, InjectionToken, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Input, NgModule, Host, Self, EventEmitter, Output, Pipe, ContentChild, createEnvironmentInjector, createComponent, runInInjectionContext, PLATFORM_ID, ErrorHandler } from '@angular/core';
-import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith, last, EMPTY, merge as merge$1, Observable, first as first$1, combineLatest, catchError, from, ReplaySubject, debounceTime as debounceTime$1, raceWith, take as take$1, mergeMap, shareReplay as shareReplay$1, forkJoin, map as map$1, tap as tap$1, asyncScheduler, takeUntil as takeUntil$1 } from 'rxjs';
+import { Directive, Component, Inject, Injectable, HostBinding, HostListener, inject, InjectionToken, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Input, NgModule, Host, Self, EventEmitter, Output, Pipe, ContentChild, createEnvironmentInjector, createComponent, runInInjectionContext, PLATFORM_ID, ErrorHandler } from '@angular/core';
+import { Subject, BehaviorSubject, of, timer, switchMap as switchMap$1, endWith, last, EMPTY, merge as merge$1, Observable, first as first$1, combineLatest, catchError, from, ReplaySubject, debounceTime as debounceTime$1, raceWith, take as take$1, mergeMap, shareReplay as shareReplay$1, forkJoin, map as map$1, tap as tap$1, asyncScheduler } from 'rxjs';
 import * as i3 from '@angular/forms';
 import { FormGroup, FormArray, Validators, UntypedFormGroup, UntypedFormArray, FormControl, UntypedFormControl, FormsModule, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
 import * as i2$2 from '@angular/router';
@@ -27,6 +27,7 @@ import { trigger, state, style, transition, sequence, query, animate, group } fr
 import * as i1$1 from '@angular/cdk/a11y';
 import * as i2$1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i4$2 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
@@ -71,26 +72,26 @@ import { MatSidenavContainer, MatSidenav, MatSidenavModule } from '@angular/mate
 import * as i1$8 from '@angular/common/http';
 import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 
-/**
- * Use
- * import { takeUntil } from 'rxjs/operators';
- * .pipe(takeUntil(this.ngUnsubscribe)) as first pipe on observables that should be destroyed on component destroy
- */
 class NaturalAbstractController {
     constructor() {
+        /**
+         * Usage:
+         *
+         * ```ts
+         * import { takeUntil } from 'rxjs/operators';
+         * .pipe(takeUntil(this.ngUnsubscribe)) // as first pipe on observables that should be destroyed on component destroy
+         * ```
+         *
+         * @deprecated Instead of this, you should create the observable in the constructor or field initializers and use
+         * Angular native `.pipe(takeUntilDestroyed())`. And most likely subscribe at a later point. We keep this method until
+         * all existing usages (typically in `ngOnInit()`) are migrated away.
+         */
         this.ngUnsubscribe = new Subject();
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next(); // unsubscribe everybody
         this.ngUnsubscribe.complete(); // complete the stream, because we will never emit again
     }
-    back() {
-        // This is bad, but we don't want to force the injection of document in ,
-        // all our child classes. And hopefully this particular method is only called
-        // by a user-interaction, so not used in SSR
-        // eslint-disable-next-line no-restricted-globals
-        window.history.back();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAbstractController, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.2", type: NaturalAbstractController, ngImport: i0 }); }
 }
@@ -2281,11 +2282,10 @@ function money(control) {
 
 // @dynamic
 class NaturalAbstractDetail extends NaturalAbstractPanel {
-    constructor(key, service, injector) {
+    constructor(key, service) {
         super();
         this.key = key;
         this.service = service;
-        this.injector = injector;
         /**
          * Empty placeholder for data retrieved by the server
          */
@@ -2301,9 +2301,18 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
          * semantic of data on other tab, like relations that list other objects)
          */
         this.showFabButton = true;
-        this.alertService = injector.get(NaturalAlertService);
-        this.router = injector.get(Router);
-        this.route = injector.get(ActivatedRoute);
+        /**
+         * Injected service
+         */
+        this.alertService = inject(NaturalAlertService);
+        /**
+         * Injected service
+         */
+        this.router = inject(Router);
+        /**
+         * Injected service
+         */
+        this.route = inject(ActivatedRoute);
     }
     ngOnInit() {
         if (!this.isPanel) {
@@ -2424,7 +2433,7 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAbstractDetail, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }]; } });
 
 /**
  * This class helps managing non-paginated rows of items that can be edited in-place, typically in a <mat-table>.
@@ -2950,9 +2959,8 @@ function dateMax(dateAdapter, max) {
     };
 }
 
-class TypeDateComponent extends NaturalAbstractController {
+class TypeDateComponent {
     constructor(data, dateAdapter, dateFormats) {
-        super();
         this.dateAdapter = dateAdapter;
         this.dateFormats = dateFormats;
         this.renderedValue = new BehaviorSubject('');
@@ -2970,7 +2978,7 @@ class TypeDateComponent extends NaturalAbstractController {
             max: null,
         };
         this.configuration = { ...this.defaults, ...data.configuration };
-        this.todayCtrl.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(isToday => {
+        this.todayCtrl.valueChanges.pipe(takeUntilDestroyed()).subscribe(isToday => {
             if (isToday) {
                 this.valueCtrl.setValue(this.dateAdapter.today());
                 this.valueCtrl.disable();
@@ -2980,7 +2988,7 @@ class TypeDateComponent extends NaturalAbstractController {
             }
         });
         merge$1(this.operatorCtrl.valueChanges, this.valueCtrl.valueChanges, this.todayCtrl.valueChanges)
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntilDestroyed())
             .subscribe(() => this.renderedValue.next(this.getRenderedValue()));
         this.initValidators();
         this.reloadCondition(data.condition);
@@ -3085,7 +3093,7 @@ class TypeDateComponent extends NaturalAbstractController {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeDateComponent, deps: [{ token: NATURAL_DROPDOWN_DATA }, { token: i1$3.DateAdapter }, { token: MAT_DATE_FORMATS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeDateComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matIconSuffix></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-checkbox [formControl]=\"todayCtrl\" i18n>Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TypeDateComponent, selector: "ng-component", ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label i18n=\"Mathematical operator < > =\">Op\u00E9rateur</mat-label>\n        <mat-select [formControl]=\"operatorCtrl\" [required]=\"true\">\n            <mat-option *ngFor=\"let item of operators\" [value]=\"item.key\">\n                {{ item.label }}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <mat-form-field>\n        <mat-label i18n>Date</mat-label>\n        <input\n            [formControl]=\"valueCtrl\"\n            [matDatepicker]=\"value\"\n            [max]=\"configuration.max\"\n            [min]=\"configuration.min\"\n            [required]=\"true\"\n            matInput\n        />\n        <mat-datepicker-toggle [for]=\"value\" matIconSuffix></mat-datepicker-toggle>\n        <mat-datepicker #value></mat-datepicker>\n        <mat-error *ngIf=\"valueCtrl.hasError('min')\">< {{ configuration.min }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('max')\">> {{ configuration.max }}</mat-error>\n        <mat-error *ngIf=\"valueCtrl.hasError('required')\">*</mat-error>\n    </mat-form-field>\n\n    <mat-checkbox [formControl]=\"todayCtrl\" i18n>Aujourd'hui</mat-checkbox>\n</form>\n", styles: ["form{display:grid;grid:auto auto/4em auto;grid-gap:0 1em}form>mat-checkbox{grid-column-start:2;margin-bottom:.3em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i1$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TypeDateComponent, decorators: [{
             type: Component,
@@ -3569,10 +3577,9 @@ function unwrapNavigable(item) {
  */
 // @dynamic
 class NaturalAbstractList extends NaturalAbstractPanel {
-    constructor(service, injector) {
+    constructor(service) {
         super();
         this.service = service;
-        this.injector = injector;
         /**
          * Wherever search should be loaded from url/storage and persisted in it too.
          */
@@ -3621,10 +3628,10 @@ class NaturalAbstractList extends NaturalAbstractPanel {
             pageIndex: 0,
             pageSize: 25,
         };
-        this.router = injector.get(Router);
-        this.route = injector.get(ActivatedRoute);
-        this.alertService = injector.get(NaturalAlertService);
-        this.persistenceService = injector.get(NaturalPersistenceService);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.alertService = inject(NaturalAlertService);
+        this.persistenceService = inject(NaturalPersistenceService);
     }
     /**
      * Variables that are always forced on a list, in addition to whatever the end-user might select
@@ -3963,7 +3970,7 @@ class NaturalAbstractList extends NaturalAbstractPanel {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAbstractList, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.Injector }]; }, propDecorators: { persistSearch: [{
+        }], ctorParameters: function () { return [{ type: undefined }]; }, propDecorators: { persistSearch: [{
                 type: Input
             }], availableColumns: [{
                 type: Input
@@ -3980,8 +3987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
  * @dynamic
  */
 class NaturalAbstractNavigableList extends NaturalAbstractList {
-    constructor(service, injector) {
-        super(service, injector);
+    constructor(service) {
+        super(service);
         /**
          * Name of filter for child items to access ancestor item
          */
@@ -4094,7 +4101,7 @@ class NaturalAbstractNavigableList extends NaturalAbstractList {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalAbstractNavigableList, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.Injector }]; }, propDecorators: { ancestorRelationName: [{
+        }], ctorParameters: function () { return [{ type: undefined }]; }, propDecorators: { ancestorRelationName: [{
                 type: Input
             }] } });
 
@@ -5163,7 +5170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: HostBinding,
                 args: ['class']
             }], naturalIcon: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], size: [{
                 type: Input
             }] } });
@@ -5597,7 +5605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                     selector: 'img[naturalSrcDensity]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { naturalSrcDensity: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
 function isDate(value) {
@@ -6039,7 +6048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             }], newLabel: [{
                 type: Input
             }], model: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], breadcrumbs: [{
                 type: Input
             }], listRoute: [{
@@ -6753,7 +6763,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 type: ContentChild,
                 args: [TemplateRef]
             }], service: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], optionRequired: [{
                 type: Input
             }], searchField: [{
@@ -7555,7 +7566,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             }], selection: [{
                 type: Input
             }], facets: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], dropdownTitle: [{
                 type: Input
             }], selectionChange: [{
@@ -7604,9 +7616,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             }], dropdownTitle: [{
                 type: Input
             }], placeholder: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], facets: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], selectionChange: [{
                 type: Output
             }], selections: [{
@@ -8017,7 +8031,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
         }], ctorParameters: function () { return [{ type: NaturalHierarchicSelectorService }]; }, propDecorators: { displayWith: [{
                 type: Input
             }], config: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], multiple: [{
                 type: Input
             }], selected: [{
@@ -8536,7 +8551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
                 }, {
                     type: Self
                 }] }]; }, propDecorators: { enumName: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], nullLabel: [{
                 type: Input
             }], optionDisabled: [{
@@ -9365,7 +9381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             type: Component,
             args: [{ selector: 'natural-fixed-button', template: "<button [color]=\"color\" [disabled]=\"disabled\" [routerLink]=\"link\" mat-fab>\n    <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n</button>\n", styles: [":host{position:fixed!important;z-index:999;bottom:32px;right:32px}\n"] }]
         }], propDecorators: { icon: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], link: [{
                 type: Input
             }], color: [{
@@ -9392,7 +9409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
  * Public API Surface of natural
  */
 
-class NaturalFixedButtonDetailComponent extends NaturalAbstractController {
+class NaturalFixedButtonDetailComponent {
     get model() {
         return this._model;
     }
@@ -9404,12 +9421,11 @@ class NaturalFixedButtonDetailComponent extends NaturalAbstractController {
         }
     }
     constructor(route) {
-        super();
         this.canChange = true;
         this.isCreation = false;
         this.create = new EventEmitter();
         this.delete = new EventEmitter();
-        route.params.pipe(takeUntil$1(this.ngUnsubscribe)).subscribe(() => (this.canChange = true));
+        route.params.pipe(takeUntilDestroyed()).subscribe(() => (this.canChange = true));
     }
     clickCreate() {
         if (this.form.enabled) {
@@ -9422,15 +9438,17 @@ class NaturalFixedButtonDetailComponent extends NaturalAbstractController {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailComponent, deps: [{ token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NaturalFixedButtonDetailComponent, selector: "natural-fixed-button-detail", inputs: { model: "model", form: "form" }, outputs: { create: "create", delete: "delete" }, ngImport: i0, template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NaturalFixedButtonComponent, selector: "natural-fixed-button", inputs: ["icon", "link", "color", "disabled"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NaturalFixedButtonDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'natural-fixed-button-detail', template: "<natural-fixed-button\n    (click)=\"clickCreate()\"\n    *ngIf=\"isCreation\"\n    [disabled]=\"form.disabled\"\n    [color]=\"form.valid ? 'accent' : 'warn'\"\n    class=\"detail-speed-dial\"\n    icon=\"save\"\n></natural-fixed-button>\n\n<natural-fixed-button\n    (click)=\"clickDelete()\"\n    *ngIf=\"!isCreation && (!model.permissions || model.permissions.delete)\"\n    [disabled]=\"form.disabled\"\n    class=\"detail-speed-dial\"\n    color=\"warn\"\n    icon=\"delete_forever\"\n    i18n-matTooltip\n    matTooltip=\"Supprimer d\u00E9finitivement\"\n    matTooltipPosition=\"left\"\n></natural-fixed-button>\n" }]
         }], ctorParameters: function () { return [{ type: i2$2.ActivatedRoute }]; }, propDecorators: { model: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], form: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], create: [{
                 type: Output
             }], delete: [{
@@ -10093,7 +10111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             }], disabled: [{
                 type: Input
             }], main: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], selectionChange: [{
                 type: Output
             }], hierarchicSelectorFilters: [{
@@ -10454,7 +10473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             type: Component,
             args: [{ selector: 'natural-sidenav-container', providers: [NaturalSidenavService], template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n    <mat-sidenav\n        [mode]=\"sidenavService.activeMode\"\n        [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n        [opened]=\"sidenavService.isOpened\"\n        [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n        [position]=\"position\"\n    >\n        <ng-content select=\"natural-sidenav\"></ng-content>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div>\n            <ng-content select=\"natural-sidenav-content\"></ng-content>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}:host mat-sidenav-container{display:flex;flex-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: NaturalSidenavService }]; }, propDecorators: { name: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], position: [{
                 type: Input
             }], mobileAutoClose: [{
@@ -10528,7 +10548,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
             type: Component,
             args: [{ selector: 'natural-stamp', template: "<ng-container *ngIf=\"item\">\n    <div *ngIf=\"item.creationDate || item.creator\">\n        <span class=\"mat-subtitle-2\" i18n>Cr\u00E9ation</span>\n        :\n        <span *ngIf=\"item.creator\">{{ item.creator.fullName || item.creator.name }}</span>\n        <span *ngIf=\"item.creator && item.creationDate\">,&nbsp;</span>\n        <span *ngIf=\"item.creationDate\">{{ item.creationDate | swissDate }} ({{ item.creationDate | timeAgo }})</span>\n    </div>\n\n    <div *ngIf=\"showUpdate()\">\n        <span class=\"mat-subtitle-2\" i18n>Modification</span>\n        :\n        <span *ngIf=\"item.updater\">{{ item.updater.fullName || item.updater.name }}</span>\n        <span *ngIf=\"item.updater && item.updateDate\">,&nbsp;</span>\n        <span *ngIf=\"item.updateDate\">{{ item.updateDate | swissDate }} ({{ item.updateDate | timeAgo }})</span>\n    </div>\n</ng-container>\n" }]
         }], propDecorators: { item: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
 const declarationsToExport = [NaturalStampComponent];