@ecodev/natural 57.0.3 → 57.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -73,7 +73,7 @@ import * as i3$4 from '@ngbracket/ngx-layout';
73
73
  import * as i8$2 from '@angular/material/paginator';
74
74
  import { MatPaginatorModule } from '@angular/material/paginator';
75
75
  import * as i2$6 from '@angular/material/sidenav';
76
- import { MatSidenavContainer, MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
76
+ import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
77
77
  import * as i1$9 from '@angular/common/http';
78
78
  import { HttpHeaders } from '@angular/common/http';
79
79
  import { HmacSHA256 } from 'crypto-es/lib/sha256';
@@ -2411,6 +2411,9 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
2411
2411
  this.#isUpdatePage = false;
2412
2412
  this.#changes = new CumulativeChanges();
2413
2413
  }
2414
+ /**
2415
+ * You probably should not override this method. Instead, consider overriding `initForm()`.
2416
+ */
2414
2417
  ngOnInit() {
2415
2418
  if (this.isPanel) {
2416
2419
  this.initForm();
@@ -2555,6 +2558,13 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
2555
2558
  preDelete(model) {
2556
2559
  // noop
2557
2560
  }
2561
+ /**
2562
+ * Initialize the form whenever it is needed.
2563
+ *
2564
+ * You should override this method, and not `ngOnInit()` if you need to customize the form. Because this will
2565
+ * correctly be called more than one time per component instance if needed, when the route changes. But `ngOnInit()`
2566
+ * will incorrectly be called exactly 1 time per component instance, even if the object changes via route navigation.
2567
+ */
2558
2568
  initForm() {
2559
2569
  this.#isUpdatePage = !!this.data.model.id;
2560
2570
  this.form = this.service.getFormGroup(this.data.model);
@@ -6766,10 +6776,11 @@ class NaturalSelectComponent extends AbstractSelect {
6766
6776
  */
6767
6777
  this.loading = false;
6768
6778
  /**
6769
- * Number of items not shown in result list
6770
- * Shows a message after list if positive
6779
+ * If some items are not shown in result list
6780
+ * Shows a message after list if true
6771
6781
  */
6772
- this.moreNbItems = 0;
6782
+ this.hasMoreItems = false;
6783
+ this.nbTotal = 0;
6773
6784
  /**
6774
6785
  * Default page size
6775
6786
  */
@@ -6858,9 +6869,9 @@ class NaturalSelectComponent extends AbstractSelect {
6858
6869
  // Init query, and when query results arrive, finish loading, and count items
6859
6870
  this.items = this.service.watchAll(this.variablesManager).pipe(takeUntil$1(this.ngUnsubscribe), finalize$1(() => (this.loading = false)), map(data => {
6860
6871
  this.loading = false;
6861
- const nbTotal = data.length;
6872
+ this.nbTotal = data.length;
6862
6873
  const nbListed = Math.min(data.length, this.pageSize);
6863
- this.moreNbItems = nbTotal - nbListed;
6874
+ this.hasMoreItems = this.nbTotal > nbListed;
6864
6875
  return data.items;
6865
6876
  }));
6866
6877
  this.loading = true;
@@ -6939,7 +6950,7 @@ class NaturalSelectComponent extends AbstractSelect {
6939
6950
  return this.variablesManager.variables.value;
6940
6951
  }
6941
6952
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
6942
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n #ac=\"matAutocomplete\"\n (optionSelected)=\"propagateValue($event.option.value)\"\n [displayWith]=\"getDisplayFn()\"\n panelWidth=\"auto !important\"\n>\n @for (item of items | async; track item) {\n <mat-option [value]=\"item\">\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n />\n </mat-option>\n }\n @if (moreNbItems > 0) {\n <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n >Tapez pour chercher parmis les {{ moreNbItems }} elements</div\n >\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>\n <mat-label>{{ placeholder }}</mat-label>\n\n <input\n (blur)=\"onBlur()\"\n (change)=\"onInternalFormChange()\"\n (click)=\"autoTrigger.openPanel()\"\n (focus)=\"startSearch()\"\n (keydown.esc)=\"reset()\"\n (keydown.enter)=\"onKeyEnter()\"\n [formControl]=\"internalCtrl\"\n [matAutocomplete]=\"ac\"\n aria-label=\"Recherche et s\u00E9lection\"\n i18n-aria-label\n matInput\n [errorStateMatcher]=\"matcher\"\n />\n\n @if (hint) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n <!-- Meta data -->\n @if (!loading && showIcon) {\n <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n }\n\n @if (loading) {\n <div class=\"loading-wrapper\" matIconPrefix>\n <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n </div>\n }\n\n <!-- Clear button -->\n <div class=\"suffix-buttons\" matIconSuffix>\n @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n <button\n [routerLink]=\"navigateTo\"\n (click)=\"$event.stopPropagation()\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Naviguer vers\"\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 }\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 (click)=\"clear()\" color=\"warn\" mat-button>{{ 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 .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}: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$8.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: i1$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$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"] }] }); }
6953
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NaturalSelectComponent, isStandalone: true, selector: "natural-select", inputs: { service: "service", optionRequired: "optionRequired", searchField: "searchField", searchOperator: "searchOperator", filter: "filter", disabled: "disabled" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autoTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n #ac=\"matAutocomplete\"\n (optionSelected)=\"propagateValue($event.option.value)\"\n [displayWith]=\"getDisplayFn()\"\n panelWidth=\"auto !important\"\n>\n @for (item of items | async; track item) {\n <mat-option [value]=\"item\">\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : 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>\n <mat-label>{{ placeholder }}</mat-label>\n\n <input\n (blur)=\"onBlur()\"\n (change)=\"onInternalFormChange()\"\n (click)=\"autoTrigger.openPanel()\"\n (focus)=\"startSearch()\"\n (keydown.esc)=\"reset()\"\n (keydown.enter)=\"onKeyEnter()\"\n [formControl]=\"internalCtrl\"\n [matAutocomplete]=\"ac\"\n aria-label=\"Recherche et s\u00E9lection\"\n i18n-aria-label\n matInput\n [errorStateMatcher]=\"matcher\"\n />\n\n @if (hint) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n <!-- Meta data -->\n @if (!loading && showIcon) {\n <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n }\n\n @if (loading) {\n <div class=\"loading-wrapper\" matIconPrefix>\n <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n </div>\n }\n\n <!-- Clear button -->\n <div class=\"suffix-buttons\" matIconSuffix>\n @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n <button\n [routerLink]=\"navigateTo\"\n (click)=\"$event.stopPropagation()\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Naviguer vers\"\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 }\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 (click)=\"clear()\" color=\"warn\" mat-button>{{ 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 .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}: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$8.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: i1$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$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"] }] }); }
6943
6954
  }
6944
6955
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSelectComponent, decorators: [{
6945
6956
  type: Component,
@@ -6957,7 +6968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
6957
6968
  MatButtonModule,
6958
6969
  MatTooltipModule,
6959
6970
  RouterLink,
6960
- ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n #ac=\"matAutocomplete\"\n (optionSelected)=\"propagateValue($event.option.value)\"\n [displayWith]=\"getDisplayFn()\"\n panelWidth=\"auto !important\"\n>\n @for (item of items | async; track item) {\n <mat-option [value]=\"item\">\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultACItem\"\n />\n </mat-option>\n }\n @if (moreNbItems > 0) {\n <div class=\"mat-caption\" i18n style=\"padding: 5px 10px\"\n >Tapez pour chercher parmis les {{ moreNbItems }} elements</div\n >\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>\n <mat-label>{{ placeholder }}</mat-label>\n\n <input\n (blur)=\"onBlur()\"\n (change)=\"onInternalFormChange()\"\n (click)=\"autoTrigger.openPanel()\"\n (focus)=\"startSearch()\"\n (keydown.esc)=\"reset()\"\n (keydown.enter)=\"onKeyEnter()\"\n [formControl]=\"internalCtrl\"\n [matAutocomplete]=\"ac\"\n aria-label=\"Recherche et s\u00E9lection\"\n i18n-aria-label\n matInput\n [errorStateMatcher]=\"matcher\"\n />\n\n @if (hint) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n <!-- Meta data -->\n @if (!loading && showIcon) {\n <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n }\n\n @if (loading) {\n <div class=\"loading-wrapper\" matIconPrefix>\n <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n </div>\n }\n\n <!-- Clear button -->\n <div class=\"suffix-buttons\" matIconSuffix>\n @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n <button\n [routerLink]=\"navigateTo\"\n (click)=\"$event.stopPropagation()\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Naviguer vers\"\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 }\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 (click)=\"clear()\" color=\"warn\" mat-button>{{ 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 .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
6971
+ ], template: "<!-- Autocomplete menu -->\n<mat-autocomplete\n #ac=\"matAutocomplete\"\n (optionSelected)=\"propagateValue($event.option.value)\"\n [displayWith]=\"getDisplayFn()\"\n panelWidth=\"auto !important\"\n>\n @for (item of items | async; track item) {\n <mat-option [value]=\"item\">\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : 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>\n <mat-label>{{ placeholder }}</mat-label>\n\n <input\n (blur)=\"onBlur()\"\n (change)=\"onInternalFormChange()\"\n (click)=\"autoTrigger.openPanel()\"\n (focus)=\"startSearch()\"\n (keydown.esc)=\"reset()\"\n (keydown.enter)=\"onKeyEnter()\"\n [formControl]=\"internalCtrl\"\n [matAutocomplete]=\"ac\"\n aria-label=\"Recherche et s\u00E9lection\"\n i18n-aria-label\n matInput\n [errorStateMatcher]=\"matcher\"\n />\n\n @if (hint) {\n <mat-hint>{{ hint }}</mat-hint>\n }\n\n <!-- Meta data -->\n @if (!loading && showIcon) {\n <mat-icon [naturalIcon]=\"icon\" matIconPrefix />\n }\n\n @if (loading) {\n <div class=\"loading-wrapper\" matIconPrefix>\n <mat-progress-spinner [diameter]=\"21\" [strokeWidth]=\"5\" mode=\"indeterminate\" />\n </div>\n }\n\n <!-- Clear button -->\n <div class=\"suffix-buttons\" matIconSuffix>\n @if (internalCtrl.pristine && internalCtrl.value && internalCtrl.enabled && !clearLabel) {\n <button (click)=\"clear()\" mat-icon-button i18n-matTooltip matTooltip=\"D\u00E9s\u00E9lectionner\">\n <mat-icon naturalIcon=\"close\" />\n </button>\n }\n @if (internalCtrl.dirty && internalCtrl.enabled && optionRequired) {\n <button (click)=\"reset()\" mat-icon-button i18n-matTooltip matTooltip=\"Annuler la recherche\">\n <mat-icon naturalIcon=\"undo\" />\n </button>\n }\n @if (internalCtrl.pristine && internalCtrl.value && navigateTo) {\n <button\n [routerLink]=\"navigateTo\"\n (click)=\"$event.stopPropagation()\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Naviguer vers\"\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 }\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 (click)=\"clear()\" color=\"warn\" mat-button>{{ 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 .suffix-buttons,:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons{display:flex;flex-direction:row}:host .external-buttons>*:not(:last-child){margin-right:10px}:host .loading-wrapper{display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
6961
6972
  }], propDecorators: { autoTrigger: [{
6962
6973
  type: ViewChild,
6963
6974
  args: [MatAutocompleteTrigger]
@@ -7115,10 +7126,10 @@ class TypeNumberComponent {
7115
7126
  }
7116
7127
  initValidators() {
7117
7128
  const validators = [Validators.required];
7118
- if (this.configuration.min) {
7129
+ if (typeof this.configuration.min === 'number') {
7119
7130
  validators.push(Validators.min(this.configuration.min));
7120
7131
  }
7121
- if (this.configuration.max) {
7132
+ if (typeof this.configuration.max === 'number') {
7122
7133
  validators.push(Validators.max(this.configuration.max));
7123
7134
  }
7124
7135
  if (this.configuration.step) {
@@ -9848,6 +9859,20 @@ const fallbackIfNoOpenedPanels = (segments) => {
9848
9859
  * </natural-relations>
9849
9860
  */
9850
9861
  class NaturalRelationsComponent extends NaturalAbstractController {
9862
+ #service;
9863
+ get service() {
9864
+ return this.#service;
9865
+ }
9866
+ set service(service) {
9867
+ this.#service = service;
9868
+ this.loading = true;
9869
+ const items$ = this.#service.watchAll(this.variablesManager).pipe(takeUntil(this.ngUnsubscribe), tap({
9870
+ next: () => (this.loading = false),
9871
+ complete: () => (this.loading = false),
9872
+ error: () => (this.loading = false),
9873
+ }));
9874
+ this.dataSource = new NaturalDataSource(items$);
9875
+ }
9851
9876
  constructor(linkMutationService, hierarchicSelectorDialog) {
9852
9877
  super();
9853
9878
  this.linkMutationService = linkMutationService;
@@ -9890,9 +9915,6 @@ class NaturalRelationsComponent extends NaturalAbstractController {
9890
9915
  this.variablesManager.set('relations-filter', { filter: filter });
9891
9916
  }
9892
9917
  ngOnChanges() {
9893
- if (this.service) {
9894
- this.queryItems();
9895
- }
9896
9918
  if (this.disabled && this.displayedColumns.includes('unlink')) {
9897
9919
  this.displayedColumns.pop();
9898
9920
  }
@@ -9915,7 +9937,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
9915
9937
  this.removing.add(relation);
9916
9938
  this.linkMutationService
9917
9939
  .unlink(this.main, relation, this.otherName)
9918
- .pipe(finalize$1(() => this.removing.delete(relation)))
9940
+ .pipe(finalize(() => this.removing.delete(relation)))
9919
9941
  .subscribe(() => this.dataSource?.remove(relation));
9920
9942
  }
9921
9943
  /**
@@ -9973,21 +9995,6 @@ class NaturalRelationsComponent extends NaturalAbstractController {
9973
9995
  }
9974
9996
  });
9975
9997
  }
9976
- /**
9977
- * Get list from database
9978
- */
9979
- queryItems() {
9980
- if (!this.service) {
9981
- return;
9982
- }
9983
- this.loading = true;
9984
- const queryRef = this.service.watchAll(this.variablesManager).pipe(takeUntil$1(this.ngUnsubscribe), tap({
9985
- next: () => (this.loading = false),
9986
- complete: () => (this.loading = false),
9987
- error: () => (this.loading = false),
9988
- }));
9989
- this.dataSource = new NaturalDataSource(queryRef);
9990
- }
9991
9998
  getSelectKey() {
9992
9999
  if (!this.hierarchicSelectorConfig) {
9993
10000
  return;
@@ -9995,7 +10002,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
9995
10002
  return this.hierarchicSelectorConfig.filter(c => !!c.selectableAtKey)[0].selectableAtKey;
9996
10003
  }
9997
10004
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalRelationsComponent, deps: [{ token: NaturalLinkMutationService }, { token: NaturalHierarchicSelectorDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
9998
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n <ng-template #defaultNameCell let-item=\"item\">\n {{ getDisplayFn()(item) }}\n </ng-template>\n\n @if (dataSource) {\n <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n <td *matCellDef=\"let item\" mat-cell>\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n />\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"unlink\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let element\" mat-cell>\n @if (!disabled) {\n <button\n (click)=\"removeRelation(element)\"\n [disabled]=\"removing.has(element)\"\n color=\"warn\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Dissocier\"\n >\n <mat-icon naturalIcon=\"link_off\" />\n </button>\n }\n </td>\n </ng-container>\n </table>\n }\n\n @if (dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)) {\n <mat-paginator\n (page)=\"pagination($event)\"\n [length]=\"dataSource?.data?.length || 0\"\n [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSize]=\"dataSource?.data?.pageSize || 0\"\n />\n }\n\n @if (!loading && dataSource?.data?.length === 0) {\n <div class=\"margin-v mat-body\">\n <span i18n>Aucun r\u00E9sultat</span>\n </div>\n }\n\n @if (loading) {\n <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n }\n</div>\n\n@if (!hierarchicSelectorConfig && service && !disabled) {\n <natural-select\n (selectionChange)=\"addRelations([$event])\"\n [displayWith]=\"$any(getDisplayFn())\"\n [filter]=\"autocompleteSelectorFilter\"\n [placeholder]=\"placeholder\"\n [service]=\"service\"\n [showIcon]=\"false\"\n />\n}\n\n@if (hierarchicSelectorConfig && !disabled) {\n <div>\n <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: MatPaginatorModule }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
10005
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NaturalRelationsComponent, isStandalone: true, selector: "natural-relations", inputs: { service: "service", placeholder: "placeholder", autocompleteSelectorFilter: "autocompleteSelectorFilter", displayWith: "displayWith", disabled: "disabled", main: "main", hierarchicSelectorFilters: "hierarchicSelectorFilters", hierarchicSelectorConfig: "hierarchicSelectorConfig", otherName: "otherName", filter: "filter" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "select", first: true, predicate: NaturalSelectComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"body\">\n <ng-template #defaultNameCell let-item=\"item\">\n {{ getDisplayFn()(item) }}\n </ng-template>\n\n <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n <td *matCellDef=\"let item\" mat-cell>\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n />\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"unlink\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let element\" mat-cell>\n @if (!disabled) {\n <button\n (click)=\"removeRelation(element)\"\n [disabled]=\"removing.has(element)\"\n color=\"warn\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Dissocier\"\n >\n <mat-icon naturalIcon=\"link_off\" />\n </button>\n }\n </td>\n </ng-container>\n </table>\n\n @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n <mat-paginator\n (page)=\"pagination($event)\"\n [length]=\"dataSource.data.length || 0\"\n [pageIndex]=\"dataSource.data.pageIndex || 0\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSize]=\"dataSource.data.pageSize || 0\"\n />\n }\n\n @if (!loading && dataSource.data?.length === 0) {\n <div class=\"margin-v mat-body\">\n <span i18n>Aucun r\u00E9sultat</span>\n </div>\n }\n\n @if (loading) {\n <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n }\n</div>\n\n@if (!disabled) {\n @if (hierarchicSelectorConfig) {\n <div>\n <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n </div>\n } @else {\n <natural-select\n (selectionChange)=\"addRelations([$event])\"\n [displayWith]=\"$any(getDisplayFn())\"\n [filter]=\"autocompleteSelectorFilter\"\n [placeholder]=\"placeholder\"\n [service]=\"service\"\n [showIcon]=\"false\"\n />\n }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.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: MatPaginatorModule }, { kind: "component", type: i8$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: NaturalSelectComponent, selector: "natural-select", inputs: ["service", "optionRequired", "searchField", "searchOperator", "filter", "disabled"] }] }); }
9999
10006
  }
10000
10007
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalRelationsComponent, decorators: [{
10001
10008
  type: Component,
@@ -10009,7 +10016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
10009
10016
  MatPaginatorModule,
10010
10017
  MatProgressSpinnerModule,
10011
10018
  NaturalSelectComponent,
10012
- ], template: "<div class=\"body\">\n <ng-template #defaultNameCell let-item=\"item\">\n {{ getDisplayFn()(item) }}\n </ng-template>\n\n @if (dataSource) {\n <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n <td *matCellDef=\"let item\" mat-cell>\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n />\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"unlink\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let element\" mat-cell>\n @if (!disabled) {\n <button\n (click)=\"removeRelation(element)\"\n [disabled]=\"removing.has(element)\"\n color=\"warn\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Dissocier\"\n >\n <mat-icon naturalIcon=\"link_off\" />\n </button>\n }\n </td>\n </ng-container>\n </table>\n }\n\n @if (dataSource?.data && (dataSource?.data?.length || 0) > (dataSource?.data?.pageSize || 0)) {\n <mat-paginator\n (page)=\"pagination($event)\"\n [length]=\"dataSource?.data?.length || 0\"\n [pageIndex]=\"dataSource?.data?.pageIndex || 0\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSize]=\"dataSource?.data?.pageSize || 0\"\n />\n }\n\n @if (!loading && dataSource?.data?.length === 0) {\n <div class=\"margin-v mat-body\">\n <span i18n>Aucun r\u00E9sultat</span>\n </div>\n }\n\n @if (loading) {\n <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n }\n</div>\n\n@if (!hierarchicSelectorConfig && service && !disabled) {\n <natural-select\n (selectionChange)=\"addRelations([$event])\"\n [displayWith]=\"$any(getDisplayFn())\"\n [filter]=\"autocompleteSelectorFilter\"\n [placeholder]=\"placeholder\"\n [service]=\"service\"\n [showIcon]=\"false\"\n />\n}\n\n@if (hierarchicSelectorConfig && !disabled) {\n <div>\n <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
10019
+ ], template: "<div class=\"body\">\n <ng-template #defaultNameCell let-item=\"item\">\n {{ getDisplayFn()(item) }}\n </ng-template>\n\n <table [dataSource]=\"dataSource\" class=\"natural-row-click\" mat-table>\n <tr *matHeaderRowDef=\"displayedColumns\" mat-header-row style=\"display: none\"></tr>\n <tr *matRowDef=\"let row; columns: displayedColumns\" mat-row></tr>\n\n <ng-container matColumnDef=\"name\">\n <th *matHeaderCellDef i18n mat-header-cell>Titre</th>\n <td *matCellDef=\"let item\" mat-cell>\n <ng-template\n [ngTemplateOutletContext]=\"{item: item}\"\n [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultNameCell\"\n />\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"unlink\">\n <th *matHeaderCellDef mat-header-cell></th>\n <td *matCellDef=\"let element\" mat-cell>\n @if (!disabled) {\n <button\n (click)=\"removeRelation(element)\"\n [disabled]=\"removing.has(element)\"\n color=\"warn\"\n mat-icon-button\n i18n-matTooltip\n matTooltip=\"Dissocier\"\n >\n <mat-icon naturalIcon=\"link_off\" />\n </button>\n }\n </td>\n </ng-container>\n </table>\n\n @if (dataSource.data && (dataSource.data.length || 0) > (dataSource.data.pageSize || 0)) {\n <mat-paginator\n (page)=\"pagination($event)\"\n [length]=\"dataSource.data.length || 0\"\n [pageIndex]=\"dataSource.data.pageIndex || 0\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [pageSize]=\"dataSource.data.pageSize || 0\"\n />\n }\n\n @if (!loading && dataSource.data?.length === 0) {\n <div class=\"margin-v mat-body\">\n <span i18n>Aucun r\u00E9sultat</span>\n </div>\n }\n\n @if (loading) {\n <mat-progress-spinner [diameter]=\"40\" class=\"loading\" mode=\"indeterminate\" />\n }\n</div>\n\n@if (!disabled) {\n @if (hierarchicSelectorConfig) {\n <div>\n <button (click)=\"openNaturalHierarchicSelector()\" color=\"primary\" mat-flat-button>{{ placeholder }}</button>\n </div>\n } @else {\n <natural-select\n (selectionChange)=\"addRelations([$event])\"\n [displayWith]=\"$any(getDisplayFn())\"\n [filter]=\"autocompleteSelectorFilter\"\n [placeholder]=\"placeholder\"\n [service]=\"service\"\n [showIcon]=\"false\"\n />\n }\n}\n", styles: [":host{display:flex;flex-direction:column}:host>*:not(:last-child){margin-bottom:20px}:host .body{display:flex;flex-direction:column}:host .loading{margin:20px auto}:host .mat-column-unlink{width:2.5em}\n"] }]
10013
10020
  }], ctorParameters: () => [{ type: NaturalLinkMutationService }, { type: NaturalHierarchicSelectorDialogService }], propDecorators: { select: [{
10014
10021
  type: ViewChild,
10015
10022
  args: [NaturalSelectComponent]
@@ -10017,7 +10024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
10017
10024
  type: ContentChild,
10018
10025
  args: [TemplateRef]
10019
10026
  }], service: [{
10020
- type: Input
10027
+ type: Input,
10028
+ args: [{ required: true }]
10021
10029
  }], placeholder: [{
10022
10030
  type: Input
10023
10031
  }], autocompleteSelectorFilter: [{
@@ -10337,7 +10345,7 @@ class NaturalSidenavService extends NaturalAbstractController {
10337
10345
  destroy(component) {
10338
10346
  this.naturalSidenavStackService.unregister(component);
10339
10347
  }
10340
- init(name, container, drawer, component, autoClose = false) {
10348
+ init(name, component, autoClose = false) {
10341
10349
  if (!name || name === '') {
10342
10350
  throw new Error('No sidenav name provided, use <natural-sidenav-container name="menu">');
10343
10351
  }
@@ -10420,7 +10428,12 @@ class NaturalSidenavService extends NaturalAbstractController {
10420
10428
  getMenuOpenedStatus() {
10421
10429
  assert(this.openedStorageKeyWithName);
10422
10430
  const value = this.sessionStorage.getItem(this.openedStorageKeyWithName);
10423
- return value === null || value === 'true';
10431
+ if (value === null) {
10432
+ return !this.isMobileView();
10433
+ }
10434
+ else {
10435
+ return value === 'true';
10436
+ }
10424
10437
  }
10425
10438
  /**
10426
10439
  * Toggle menu but expand it if mobile mode is activated
@@ -10498,7 +10511,7 @@ class NaturalSidenavContainerComponent {
10498
10511
  return this.sidenavService.isMobileView();
10499
10512
  }
10500
10513
  ngOnInit() {
10501
- this.sidenavService.init(this.name, this.menuContainer, this.menuSidenav, this, this.mobileAutoClose);
10514
+ this.sidenavService.init(this.name, this, this.mobileAutoClose);
10502
10515
  }
10503
10516
  ngOnDestroy() {
10504
10517
  this.sidenavService.destroy(this);
@@ -10522,7 +10535,7 @@ class NaturalSidenavContainerComponent {
10522
10535
  this.sidenavService.toggleMinimized();
10523
10536
  }
10524
10537
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
10525
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuContainer", first: true, predicate: MatSidenavContainer, descendants: true, static: true }, { propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n <mat-sidenav\n [mode]=\"sidenavService.activeMode\"\n [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n [opened]=\"sidenavService.isOpened\"\n [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [position]=\"position\"\n >\n <ng-content select=\"natural-sidenav\" />\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-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
10538
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: NaturalSidenavContainerComponent, isStandalone: true, selector: "natural-sidenav-container", inputs: { name: "name", position: "position", mobileAutoClose: "mobileAutoClose", minimizedWidth: "minimizedWidth", noScroll: "noScroll" }, host: { properties: { "attr.no-scroll": "this.noScroll" } }, providers: [NaturalSidenavService], viewQueries: [{ propertyName: "menuSidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container (backdropClick)=\"sidenavService.setOpened(false)\">\n <mat-sidenav\n [mode]=\"sidenavService.activeMode\"\n [ngClass]=\"sidenavService.isMinimized ? 'menuMinimized' : ''\"\n [opened]=\"sidenavService.isOpened\"\n [style.min-width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [style.width.px]=\"sidenavService.isMinimized && minimizedWidth ? minimizedWidth : null\"\n [position]=\"position\"\n >\n <ng-content select=\"natural-sidenav\" />\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-direction:column;flex:1}:host mat-sidenav-content>div{overflow:auto}:host .menuMinimized{overflow-x:hidden}:host .buttons{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i2$6.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
10526
10539
  }
10527
10540
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
10528
10541
  type: Component,
@@ -10541,9 +10554,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
10541
10554
  args: ['attr.no-scroll']
10542
10555
  }, {
10543
10556
  type: Input
10544
- }], menuContainer: [{
10545
- type: ViewChild,
10546
- args: [MatSidenavContainer, { static: true }]
10547
10557
  }], menuSidenav: [{
10548
10558
  type: ViewChild,
10549
10559
  args: [MatSidenav, { static: true }]