@ecodev/natural 57.0.2 → 57.0.4

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';
@@ -2479,7 +2479,6 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
2479
2479
  update.subscribe(model => {
2480
2480
  this.#changes.commit(newValues);
2481
2481
  this.alertService.info($localize `Mis à jour`);
2482
- this.form.patchValue(model);
2483
2482
  this.postUpdate(model);
2484
2483
  });
2485
2484
  });
@@ -2495,7 +2494,6 @@ class NaturalAbstractDetail extends NaturalAbstractPanel {
2495
2494
  .create(newValues)
2496
2495
  .pipe(switchMap$1(model => {
2497
2496
  this.alertService.info($localize `Créé`);
2498
- this.form.patchValue(model);
2499
2497
  return this.postCreate(model).pipe(endWith(model), last());
2500
2498
  }), switchMap$1(model => {
2501
2499
  if (redirect) {
@@ -6768,10 +6766,11 @@ class NaturalSelectComponent extends AbstractSelect {
6768
6766
  */
6769
6767
  this.loading = false;
6770
6768
  /**
6771
- * Number of items not shown in result list
6772
- * Shows a message after list if positive
6769
+ * If some items are not shown in result list
6770
+ * Shows a message after list if true
6773
6771
  */
6774
- this.moreNbItems = 0;
6772
+ this.hasMoreItems = false;
6773
+ this.nbTotal = 0;
6775
6774
  /**
6776
6775
  * Default page size
6777
6776
  */
@@ -6860,9 +6859,9 @@ class NaturalSelectComponent extends AbstractSelect {
6860
6859
  // Init query, and when query results arrive, finish loading, and count items
6861
6860
  this.items = this.service.watchAll(this.variablesManager).pipe(takeUntil$1(this.ngUnsubscribe), finalize$1(() => (this.loading = false)), map(data => {
6862
6861
  this.loading = false;
6863
- const nbTotal = data.length;
6862
+ this.nbTotal = data.length;
6864
6863
  const nbListed = Math.min(data.length, this.pageSize);
6865
- this.moreNbItems = nbTotal - nbListed;
6864
+ this.hasMoreItems = this.nbTotal > nbListed;
6866
6865
  return data.items;
6867
6866
  }));
6868
6867
  this.loading = true;
@@ -6941,7 +6940,7 @@ class NaturalSelectComponent extends AbstractSelect {
6941
6940
  return this.variablesManager.variables.value;
6942
6941
  }
6943
6942
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
6944
- 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"] }] }); }
6943
+ 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"] }] }); }
6945
6944
  }
6946
6945
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSelectComponent, decorators: [{
6947
6946
  type: Component,
@@ -6959,7 +6958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
6959
6958
  MatButtonModule,
6960
6959
  MatTooltipModule,
6961
6960
  RouterLink,
6962
- ], 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"] }]
6961
+ ], 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"] }]
6963
6962
  }], propDecorators: { autoTrigger: [{
6964
6963
  type: ViewChild,
6965
6964
  args: [MatAutocompleteTrigger]
@@ -10339,7 +10338,7 @@ class NaturalSidenavService extends NaturalAbstractController {
10339
10338
  destroy(component) {
10340
10339
  this.naturalSidenavStackService.unregister(component);
10341
10340
  }
10342
- init(name, container, drawer, component, autoClose = false) {
10341
+ init(name, component, autoClose = false) {
10343
10342
  if (!name || name === '') {
10344
10343
  throw new Error('No sidenav name provided, use <natural-sidenav-container name="menu">');
10345
10344
  }
@@ -10422,7 +10421,12 @@ class NaturalSidenavService extends NaturalAbstractController {
10422
10421
  getMenuOpenedStatus() {
10423
10422
  assert(this.openedStorageKeyWithName);
10424
10423
  const value = this.sessionStorage.getItem(this.openedStorageKeyWithName);
10425
- return value === null || value === 'true';
10424
+ if (value === null) {
10425
+ return !this.isMobileView();
10426
+ }
10427
+ else {
10428
+ return value === 'true';
10429
+ }
10426
10430
  }
10427
10431
  /**
10428
10432
  * Toggle menu but expand it if mobile mode is activated
@@ -10500,7 +10504,7 @@ class NaturalSidenavContainerComponent {
10500
10504
  return this.sidenavService.isMobileView();
10501
10505
  }
10502
10506
  ngOnInit() {
10503
- this.sidenavService.init(this.name, this.menuContainer, this.menuSidenav, this, this.mobileAutoClose);
10507
+ this.sidenavService.init(this.name, this, this.mobileAutoClose);
10504
10508
  }
10505
10509
  ngOnDestroy() {
10506
10510
  this.sidenavService.destroy(this);
@@ -10524,7 +10528,7 @@ class NaturalSidenavContainerComponent {
10524
10528
  this.sidenavService.toggleMinimized();
10525
10529
  }
10526
10530
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSidenavContainerComponent, deps: [{ token: NaturalSidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
10527
- 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"] }] }); }
10531
+ 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"] }] }); }
10528
10532
  }
10529
10533
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NaturalSidenavContainerComponent, decorators: [{
10530
10534
  type: Component,
@@ -10543,9 +10547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
10543
10547
  args: ['attr.no-scroll']
10544
10548
  }, {
10545
10549
  type: Input
10546
- }], menuContainer: [{
10547
- type: ViewChild,
10548
- args: [MatSidenavContainer, { static: true }]
10549
10550
  }], menuSidenav: [{
10550
10551
  type: ViewChild,
10551
10552
  args: [MatSidenav, { static: true }]