@ecodev/natural 48.0.0 → 48.0.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.
@@ -3606,7 +3606,7 @@ class NaturalAbstractList extends NaturalAbstractPanel {
3606
3606
  /**
3607
3607
  * List of page sizes
3608
3608
  */
3609
- this.pageSizeOptions = [5, 10, 25, 50, 100, 200];
3609
+ this.pageSizeOptions = [5, 25, 50, 100, 200];
3610
3610
  /**
3611
3611
  * Initial pagination setup
3612
3612
  */
@@ -5994,10 +5994,10 @@ class NaturalDetailHeaderComponent {
5994
5994
  }
5995
5995
  }
5996
5996
  NaturalDetailHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5997
- NaturalDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalDetailHeaderComponent, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n rootLabel || label\n }}</a>\n <ng-container *ngFor=\"let parent of breadcrumbs\">\n /\n <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n {{ parent?.fullName || parent?.name }}</a\n >\n </ng-container>\n</div>\n\n<div class=\"body\">\n <div *ngIf=\"icon\" style=\"width: 30px\">\n <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n </div>\n <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
5997
+ NaturalDetailHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalDetailHeaderComponent, selector: "natural-detail-header", inputs: { currentBaseUrl: "currentBaseUrl", isPanel: "isPanel", icon: "icon", label: "label", rootLabel: "rootLabel", newLabel: "newLabel", model: "model", breadcrumbs: "breadcrumbs", listRoute: "listRoute", listFragment: "listFragment", link: "link" }, ngImport: i0, template: "<div class=\"breadcrumb\">\n <a\n *ngIf=\"rootLabel || label\"\n [routerLink]=\"isPanel ? [] : getRootLink()\"\n [fragment]=\"listFragment\"\n color=\"primary\"\n mat-button\n >{{ rootLabel || label }}</a\n >\n <ng-container *ngFor=\"let parent of breadcrumbs\">\n /\n <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n {{ parent?.fullName || parent?.name }}</a\n >\n </ng-container>\n</div>\n\n<div class=\"body\">\n <div *ngIf=\"icon\" style=\"width: 30px\">\n <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n </div>\n <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
5998
5998
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
5999
5999
  type: Component,
6000
- args: [{ selector: 'natural-detail-header', template: "<div class=\"breadcrumb\">\n <a [routerLink]=\"isPanel ? [] : getRootLink()\" [fragment]=\"listFragment\" color=\"primary\" mat-button>{{\n rootLabel || label\n }}</a>\n <ng-container *ngFor=\"let parent of breadcrumbs\">\n /\n <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n {{ parent?.fullName || parent?.name }}</a\n >\n </ng-container>\n</div>\n\n<div class=\"body\">\n <div *ngIf=\"icon\" style=\"width: 30px\">\n <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n </div>\n <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
6000
+ args: [{ selector: 'natural-detail-header', template: "<div class=\"breadcrumb\">\n <a\n *ngIf=\"rootLabel || label\"\n [routerLink]=\"isPanel ? [] : getRootLink()\"\n [fragment]=\"listFragment\"\n color=\"primary\"\n mat-button\n >{{ rootLabel || label }}</a\n >\n <ng-container *ngFor=\"let parent of breadcrumbs\">\n /\n <a [routerLink]=\"isPanel ? [] : getLink(parent.id)\" color=\"primary\" mat-button>\n {{ parent?.fullName || parent?.name }}</a\n >\n </ng-container>\n</div>\n\n<div class=\"body\">\n <div *ngIf=\"icon\" style=\"width: 30px\">\n <mat-icon [naturalIcon]=\"icon\"></mat-icon>\n </div>\n <div *ngIf=\"!model.id\" class=\"mat-headline-5 no-margin newLabel\">{{ newLabel }}</div>\n <div *ngIf=\"model.id\" class=\"mat-headline-5 no-margin label\">{{ model.name || model.fullName || label }}</div>\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
6001
6001
  }], propDecorators: { currentBaseUrl: [{
6002
6002
  type: Input
6003
6003
  }], isPanel: [{
@@ -7449,10 +7449,10 @@ class NaturalInputComponent {
7449
7449
  }
7450
7450
  }
7451
7451
  NaturalInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalInputComponent, deps: [{ token: i0.ElementRef }, { token: NaturalDropdownService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
7452
- NaturalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalInputComponent, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n <!-- TODO : replace this void button -->\n <div *ngIf=\"!facet && !selection\" class=\"search-icon\" matIconPrefix>\n <mat-icon naturalIcon=\"search\"></mat-icon>\n </div>\n\n <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\"></mat-icon>\n </button>\n\n <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\"></mat-icon>\n </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon mat-icon{margin:5px auto 0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
7452
+ NaturalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: NaturalInputComponent, selector: "natural-input", inputs: { placeholder: "placeholder", searchFieldName: "searchFieldName", selection: "selection", facets: "facets" }, outputs: { selectionChange: "selectionChange", cleared: "cleared" }, host: { listeners: { "focus": "focus()" } }, viewQueries: [{ propertyName: "ripple", first: true, predicate: MatRipple, descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n <mat-icon *ngIf=\"!facet && !selection\" naturalIcon=\"search\" matIconPrefix></mat-icon>\n\n <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\"></mat-icon>\n </button>\n\n <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\"></mat-icon>\n </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: i1$6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
7453
7453
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: NaturalInputComponent, decorators: [{
7454
7454
  type: Component,
7455
- args: [{ selector: 'natural-input', template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n <!-- TODO : replace this void button -->\n <div *ngIf=\"!facet && !selection\" class=\"search-icon\" matIconPrefix>\n <mat-icon naturalIcon=\"search\"></mat-icon>\n </div>\n\n <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\"></mat-icon>\n </button>\n\n <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\"></mat-icon>\n </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}:host .search-icon{display:block;width:35px;height:35px}:host .search-icon mat-icon{margin:5px auto 0}\n"] }]
7455
+ args: [{ selector: 'natural-input', template: "<!-- click condition should match to allow click action only when no other button is visible -->\n<mat-form-field #field matRipple (click)=\"!selection && !(facet && !selection) ? openDropdown() : null\">\n <mat-label *ngIf=\"facet\">{{ facet.display }}</mat-label>\n <mat-label *ngIf=\"!facet\">{{ placeholder }}</mat-label>\n\n <input\n #input\n (blur)=\"search($event)\"\n (keydown.enter)=\"search($event)\"\n [attr.size]=\"length\"\n [errorStateMatcher]=\"errorMatcher\"\n [formControl]=\"formCtrl\"\n [readonly]=\"(isDropdown() && !!selection) || isFlag()\"\n autocomplete=\"off\"\n matInput\n type=\"text\"\n />\n\n <mat-icon *ngIf=\"!facet && !selection\" naturalIcon=\"search\" matIconPrefix></mat-icon>\n\n <button (click)=\"clear()\" *ngIf=\"selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"close\"></mat-icon>\n </button>\n\n <button (click)=\"clear()\" *ngIf=\"facet && !selection\" mat-icon-button matIconSuffix>\n <mat-icon naturalIcon=\"undo\"></mat-icon>\n </button>\n</mat-form-field>\n<div class=\"hide\">{{ formCtrl.value ? formCtrl.value : facet ? facet.display : placeholder }}</div>\n", styles: [":host{position:relative;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}:host .hide{color:transparent;height:0;margin:0 50px 0 10px;font-size:inherit;white-space:nowrap;font-family:Roboto,Helvetica Neue,sans-serif}\n"] }]
7456
7456
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NaturalDropdownService }, { type: i0.EnvironmentInjector }]; }, propDecorators: { ripple: [{
7457
7457
  type: ViewChild,
7458
7458
  args: [MatRipple, { static: true }]
@@ -9837,7 +9837,7 @@ class NaturalRelationsComponent extends NaturalAbstractController {
9837
9837
  * Table columns
9838
9838
  */
9839
9839
  this.displayedColumns = ['name'];
9840
- this.pageSizeOptions = [5, 10, 50, 100];
9840
+ this.pageSizeOptions = [5, 25, 50, 100];
9841
9841
  this.defaultPagination = {
9842
9842
  pageIndex: 0,
9843
9843
  pageSize: 25,