@ecodev/natural 42.3.4 → 42.4.2

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.
@@ -1,7 +1,7 @@
1
1
  import '@angular/localize/init';
2
2
  import * as i0 from '@angular/core';
3
3
  import { Directive, Component, Inject, Injectable, HostBinding, HostListener, InjectionToken, Input, NgModule, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, Pipe, TemplateRef, ViewEncapsulation, ViewChild, Injector, Optional, Self, ContentChild, PLATFORM_ID, ErrorHandler } from '@angular/core';
4
- import { Subject, BehaviorSubject, of, timer, EMPTY, Observable, ReplaySubject, forkJoin, merge as merge$1, asyncScheduler, catchError } from 'rxjs';
4
+ import { Subject, BehaviorSubject, of, timer, EMPTY, Observable, ReplaySubject, forkJoin, merge as merge$1, asyncScheduler, catchError, first as first$1 } from 'rxjs';
5
5
  import * as i5 from '@angular/forms';
6
6
  import { FormGroup, FormArray, Validators, FormControl, FormsModule, FormControlDirective, FormControlName, ReactiveFormsModule } from '@angular/forms';
7
7
  import * as i2$1 from '@angular/router';
@@ -3554,6 +3554,7 @@ function cancellableTimeout(canceller, milliSeconds = 0) {
3554
3554
  */
3555
3555
  function debug(debugName) {
3556
3556
  return tap({
3557
+ subscribe: () => console.log('SUBSCRIBE', debugName),
3557
3558
  next: value => console.log('NEXT', debugName, value),
3558
3559
  error: error => console.log('ERROR', debugName, error),
3559
3560
  complete: () => console.log('COMPLETE', debugName),
@@ -5190,10 +5191,10 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
5190
5191
  }
5191
5192
  }
5192
5193
  NaturalDropdownContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalDropdownContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ConfigurableFocusTrapFactory }, { token: NATURAL_DROPDOWN_CONTAINER_DATA }], target: i0.ɵɵFactoryTarget.Component });
5193
- NaturalDropdownContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalDropdownContainerComponent, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button>Valider</button>\n </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
5194
+ NaturalDropdownContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalDropdownContainerComponent, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], encapsulation: i0.ViewEncapsulation.None });
5194
5195
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
5195
5196
  type: Component,
5196
- args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button>Valider</button>\n </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
5197
+ args: [{ encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, animations: [naturalDropdownAnimations.transformMenu, naturalDropdownAnimations.fadeInItems], template: "<div\n (@transformMenu.done)=\"onAnimationDone($event)\"\n [@transformMenu]=\"panelAnimationState\"\n class=\"natural-dropdown-container mat-elevation-z2\"\n role=\"menu\"\n tabindex=\"-1\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <div *ngIf=\"data.showValidateButton\" class=\"natural-dropdown-validate-button\">\n <button (click)=\"close()\" color=\"primary\" mat-raised-button i18n>Valider</button>\n </div>\n</div>\n", styles: [".natural-dropdown-container{display:flex;flex-direction:column;border-radius:2px;height:100%}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{flex:none;display:flex;flex-direction:row;justify-content:flex-end;margin:5px}\n"] }]
5197
5198
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$6.ConfigurableFocusTrapFactory }, { type: undefined, decorators: [{
5198
5199
  type: Inject,
5199
5200
  args: [NATURAL_DROPDOWN_CONTAINER_DATA]
@@ -9885,6 +9886,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
9885
9886
  * Button that fits well in a `<mat-table>` and support either
9886
9887
  * route navigation via `navigate` or external URL via `href`.
9887
9888
  *
9889
+ * If neither `navigate` nor `href` has a meaningful value, then
9890
+ * it will show the icon and/or label in `<span>` instead of a button
9891
+ *
9888
9892
  * External URL will always be opened in new tab.
9889
9893
  */
9890
9894
  class NaturalTableButtonComponent {
@@ -9894,14 +9898,26 @@ class NaturalTableButtonComponent {
9894
9898
  this.navigate = [];
9895
9899
  this.preserveFragment = false;
9896
9900
  this.raised = false;
9901
+ this.type = 'none';
9902
+ }
9903
+ ngOnChanges(changes) {
9904
+ if (this.navigate?.length || Object.keys(this.queryParams).length) {
9905
+ this.type = 'routerLink';
9906
+ }
9907
+ else if (this.href) {
9908
+ this.type = 'href';
9909
+ }
9910
+ else {
9911
+ this.type = 'none';
9912
+ }
9897
9913
  }
9898
9914
  }
9899
9915
  NaturalTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
9900
- NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalTableButtonComponent, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", raised: "raised", color: "color" }, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<ng-container *ngIf=\"!raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"!href && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"!href && !label\"\n [color]=\"color\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"href && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a *ngIf=\"href && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"!href && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"!href && !label\"\n [color]=\"color\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"href && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a *ngIf=\"href && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button mat-raised-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}\n"], components: [{ type: i1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
9916
+ NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: NaturalTableButtonComponent, selector: "natural-table-button", inputs: { queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", label: "label", icon: "icon", href: "href", navigate: "navigate", fragment: "fragment", preserveFragment: "preserveFragment", raised: "raised", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n<span *ngIf=\"type === 'none'\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"type === 'routerLink' && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"type === 'routerLink' && !label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a *ngIf=\"type === 'href' && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"type === 'routerLink' && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"type === 'routerLink' && !label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"type === 'href' && !label\"\n [attr.href]=\"href\"\n [color]=\"color\"\n mat-icon-button\n mat-raised-button\n target=\"_blank\"\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}natural-table-button>span{padding:0 16px}\n"], components: [{ type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { type: i1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
9901
9917
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
9902
9918
  type: Component,
9903
- args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<ng-container *ngIf=\"!raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"!href && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"!href && !label\"\n [color]=\"color\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"href && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a *ngIf=\"href && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"!href && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"!href && !label\"\n [color]=\"color\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"href && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a *ngIf=\"href && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button mat-raised-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}\n"] }]
9904
- }], ctorParameters: function () { return []; }, propDecorators: { queryParams: [{
9919
+ args: [{ selector: 'natural-table-button', encapsulation: ViewEncapsulation.None, template: "<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n\n<!-- Edge case of a button without any kind of link at all -->\n<span *ngIf=\"type === 'none'\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span *ngIf=\"label\">{{ label }}</span>\n</span>\n\n<ng-container *ngIf=\"!raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"type === 'routerLink' && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"type === 'routerLink' && !label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a *ngIf=\"type === 'href' && !label\" [attr.href]=\"href\" [color]=\"color\" mat-icon-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n\n<ng-container *ngIf=\"raised\">\n <!-- App routed link with label... -->\n <a\n *ngIf=\"type === 'routerLink' && label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"type === 'routerLink' && !label\"\n [color]=\"color\"\n [queryParams]=\"queryParams\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [routerLink]=\"navigate\"\n [fragment]=\"fragment\"\n [preserveFragment]=\"preserveFragment\"\n mat-icon-button\n mat-raised-button\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n\n <!-- External link with label... -->\n <a *ngIf=\"type === 'href' && label\" [attr.href]=\"href\" [color]=\"color\" mat-raised-button target=\"_blank\">\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n <span>{{ label }}</span>\n </a>\n\n <!-- ... and without label -->\n <a\n *ngIf=\"type === 'href' && !label\"\n [attr.href]=\"href\"\n [color]=\"color\"\n mat-icon-button\n mat-raised-button\n target=\"_blank\"\n >\n <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n </a>\n</ng-container>\n", styles: ["natural-table-button{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}natural-table-button a.mat-button .mat-button-wrapper{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>*{display:flex;flex-direction:row;align-items:center}natural-table-button a.mat-button .mat-button-wrapper>:not(:last-child){margin-right:5px}natural-table-button>span{padding:0 16px}\n"] }]
9920
+ }], propDecorators: { queryParams: [{
9905
9921
  type: Input
9906
9922
  }], queryParamsHandling: [{
9907
9923
  type: Input
@@ -10487,8 +10503,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
10487
10503
  * Public API Surface of natural
10488
10504
  */
10489
10505
 
10490
- const NaturalLoggerConfigUrl = new InjectionToken('NaturalLoggerConfigUrl');
10491
- const NaturalLoggerConfigExtra = new InjectionToken('NaturalLoggerConfigExtra');
10506
+ const NaturalLoggerConfigUrl = new InjectionToken('Absolute URL of the log server');
10507
+ const NaturalLoggerConfigExtra = new InjectionToken('Class that may provide extra data to log');
10508
+ /**
10509
+ * Replace Angular's error handler to also send the log to a remote server via HTTP POST.
10510
+ *
10511
+ * Usage is automatic as soon we import the module via:
10512
+ *
10513
+ * ```ts
10514
+ * NaturalErrorModule.forRoot('http://example.com', ExtraService),
10515
+ * ```
10516
+ */
10492
10517
  class NaturalErrorHandler extends ErrorHandler {
10493
10518
  constructor(http, document, url, loggerExtra) {
10494
10519
  super();
@@ -10500,18 +10525,13 @@ class NaturalErrorHandler extends ErrorHandler {
10500
10525
  handleError(error) {
10501
10526
  console.error(error);
10502
10527
  const params = {
10528
+ message: this.toMessage(error),
10503
10529
  href: this.document.defaultView?.window.location.href,
10504
10530
  host: this.document.defaultView?.window.location.hostname,
10505
10531
  path: this.document.defaultView?.window.location.pathname,
10506
10532
  agent: this.document.defaultView?.window.navigator.userAgent,
10507
10533
  level: 'error',
10508
10534
  };
10509
- if (error?.message) {
10510
- params.message = error.message;
10511
- }
10512
- else {
10513
- params.message = error;
10514
- }
10515
10535
  if (error?.stack) {
10516
10536
  params.stacktrace = error.stack;
10517
10537
  }
@@ -10525,7 +10545,10 @@ class NaturalErrorHandler extends ErrorHandler {
10525
10545
  params.url = error.url;
10526
10546
  }
10527
10547
  if (this.loggerExtra) {
10528
- this.loggerExtra?.getExtras(error).subscribe(result => {
10548
+ this.loggerExtra
10549
+ .getExtras(error)
10550
+ .pipe(catchError(e => of({ getExtrasErrorMessage: this.toMessage(e) })), first$1())
10551
+ .subscribe(result => {
10529
10552
  this.postLog(Object.assign(params, result));
10530
10553
  });
10531
10554
  }
@@ -10533,6 +10556,14 @@ class NaturalErrorHandler extends ErrorHandler {
10533
10556
  this.postLog(params);
10534
10557
  }
10535
10558
  }
10559
+ toMessage(error) {
10560
+ if (error && typeof error === 'object' && 'message' in error) {
10561
+ return '' + error.message;
10562
+ }
10563
+ else {
10564
+ return '' + error;
10565
+ }
10566
+ }
10536
10567
  /**
10537
10568
  * Send parameters to remote log
10538
10569
  */