@ecodev/natural 45.2.0 → 45.3.0

package/esm2020/lib/modules/table-button/table-button.component.mjs

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/router";
@@ -20,6 +20,7 @@ export class NaturalTableButtonComponent {
         this.navigate = [];
         this.preserveFragment = false;
         this.raised = false;
+        this.buttonClick = new EventEmitter();
         this.type = 'none';
     }
     ngOnChanges(changes) {
@@ -29,16 +30,19 @@ export class NaturalTableButtonComponent {
         else if (this.href) {
             this.type = 'href';
         }
+        else if (this.buttonClick.observed) {
+            this.type = 'click';
+        }
         else {
             this.type = 'none';
         }
     }
 }
 NaturalTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], encapsulation: i0.ViewEncapsulation.None });
+NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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" }, outputs: { buttonClick: "buttonClick" }, 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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\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 === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            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"] }]
+            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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\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 === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\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"] }]
         }], propDecorators: { queryParams: [{
                 type: Input
             }], queryParamsHandling: [{
@@ -59,5 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                 type: Input
             }], color: [{
                 type: Input
+            }], buttonClick: [{
+                type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25hdHVyYWwvc3JjL2xpYi9tb2R1bGVzL3RhYmxlLWJ1dHRvbi90YWJsZS1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmF0dXJhbC9zcmMvbGliL21vZHVsZXMvdGFibGUtYnV0dG9uL3RhYmxlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBNEIsaUJBQWlCLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7OztBQUk1Rjs7Ozs7Ozs7R0FRRztBQU9ILE1BQU0sT0FBTywyQkFBMkI7SUFOeEM7UUFPb0IsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFDekIsd0JBQW1CLEdBQXdCLEVBQUUsQ0FBQztRQUk5QyxhQUFRLEdBQTZCLEVBQUUsQ0FBQztRQUV4QyxxQkFBZ0IsR0FBRyxLQUFLLENBQUM7UUFDekIsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUV4QixTQUFJLEdBQW1DLE1BQU0sQ0FBQztLQVd4RDtJQVRVLFdBQVcsQ0FBQyxPQUFzQjtRQUNyQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsTUFBTSxJQUFJLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLE1BQU0sRUFBRTtZQUMvRCxJQUFJLENBQUMsSUFBSSxHQUFHLFlBQVksQ0FBQztTQUM1QjthQUFNLElBQUksSUFBSSxDQUFDLElBQUksRUFBRTtZQUNsQixJQUFJLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQztTQUN0QjthQUFNO1lBQ0gsSUFBSSxDQUFDLElBQUksR0FBRyxNQUFNLENBQUM7U0FDdEI7SUFDTCxDQUFDOzt3SEFyQlEsMkJBQTJCOzRHQUEzQiwyQkFBMkIscVVDbkJ4QywrM0dBbUdBOzJGRGhGYSwyQkFBMkI7a0JBTnZDLFNBQVM7K0JBQ0ksc0JBQXNCLGlCQUdqQixpQkFBaUIsQ0FBQyxJQUFJOzhCQUdyQixXQUFXO3NCQUExQixLQUFLO2dCQUNVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLO2dCQUNVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLO2dCQUNVLE1BQU07c0JBQXJCLEtBQUs7Z0JBQ1UsS0FBSztzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBWaWV3RW5jYXBzdWxhdGlvbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1BhcmFtcywgUXVlcnlQYXJhbXNIYW5kbGluZywgUm91dGVyTGlua30gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7VGhlbWVQYWxldHRlfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcblxuLyoqXG4gKiBCdXR0b24gdGhhdCBmaXRzIHdlbGwgaW4gYSBgPG1hdC10YWJsZT5gIGFuZCBzdXBwb3J0IGVpdGhlclxuICogcm91dGUgbmF2aWdhdGlvbiB2aWEgYG5hdmlnYXRlYCBvciBleHRlcm5hbCBVUkwgdmlhIGBocmVmYC5cbiAqXG4gKiBJZiBuZWl0aGVyIGBuYXZpZ2F0ZWAgbm9yIGBocmVmYCBoYXMgYSBtZWFuaW5nZnVsIHZhbHVlLCB0aGVuXG4gKiBpdCB3aWxsIHNob3cgdGhlIGljb24gYW5kL29yIGxhYmVsIGluIGA8c3Bhbj5gIGluc3RlYWQgb2YgYSBidXR0b25cbiAqXG4gKiBFeHRlcm5hbCBVUkwgd2lsbCBhbHdheXMgYmUgb3BlbmVkIGluIG5ldyB0YWIuXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmF0dXJhbC10YWJsZS1idXR0b24nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3RhYmxlLWJ1dHRvbi5jb21wb25lbnQuc2NzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE5hdHVyYWxUYWJsZUJ1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gICAgQElucHV0KCkgcHVibGljIHF1ZXJ5UGFyYW1zOiBQYXJhbXMgPSB7fTtcbiAgICBASW5wdXQoKSBwdWJsaWMgcXVlcnlQYXJhbXNIYW5kbGluZzogUXVlcnlQYXJhbXNIYW5kbGluZyA9ICcnO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBsYWJlbD86IHN0cmluZyB8IG51bGw7XG4gICAgQElucHV0KCkgcHVibGljIGljb24/OiBzdHJpbmcgfCBudWxsO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBocmVmPzogc3RyaW5nIHwgbnVsbDtcbiAgICBASW5wdXQoKSBwdWJsaWMgbmF2aWdhdGU6IFJvdXRlckxpbmtbJ3JvdXRlckxpbmsnXSA9IFtdO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBmcmFnbWVudD86IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgICBASW5wdXQoKSBwdWJsaWMgcHJlc2VydmVGcmFnbWVudCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIHB1YmxpYyByYWlzZWQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBwdWJsaWMgY29sb3I6IFRoZW1lUGFsZXR0ZTtcbiAgICBwdWJsaWMgdHlwZTogJ3JvdXRlckxpbmsnIHwgJ2hyZWYnIHwgJ25vbmUnID0gJ25vbmUnO1xuXG4gICAgcHVibGljIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMubmF2aWdhdGU/Lmxlbmd0aCB8fCBPYmplY3Qua2V5cyh0aGlzLnF1ZXJ5UGFyYW1zKS5sZW5ndGgpIHtcbiAgICAgICAgICAgIHRoaXMudHlwZSA9ICdyb3V0ZXJMaW5rJztcbiAgICAgICAgfSBlbHNlIGlmICh0aGlzLmhyZWYpIHtcbiAgICAgICAgICAgIHRoaXMudHlwZSA9ICdocmVmJztcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMudHlwZSA9ICdub25lJztcbiAgICAgICAgfVxuICAgIH1cbn1cbiIsIjwhLS0gQmVjYXVzZSBkaXJlY3RpdmVzIGNhbid0IGJlIGFwcGxpZWQgY29uZGl0aW9uYWxseSAocm91dGVyTGluaywgbWF0LWJ1dHRvbiBhbmQgbWF0LWljb24tYnV0dG9uKSwgd2UgaGF2ZSB0byB1c2UgZGlmZmVyZW50IGVsZW1lbnRzIC0tPlxuXG48IS0tIEVkZ2UgY2FzZSBvZiBhIGJ1dHRvbiB3aXRob3V0IGFueSBraW5kIG9mIGxpbmsgYXQgYWxsIC0tPlxuPHNwYW4gKm5nSWY9XCJ0eXBlID09PSAnbm9uZSdcIj5cbiAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICA8c3BhbiAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L3NwYW4+XG48L3NwYW4+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCIhcmFpc2VkXCI+XG4gICAgPCEtLSBBcHAgcm91dGVkIGxpbmsgd2l0aCBsYWJlbC4uLiAtLT5cbiAgICA8YVxuICAgICAgICAqbmdJZj1cInR5cGUgPT09ICdyb3V0ZXJMaW5rJyAmJiBsYWJlbFwiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIFtxdWVyeVBhcmFtc109XCJxdWVyeVBhcmFtc1wiXG4gICAgICAgIFtxdWVyeVBhcmFtc0hhbmRsaW5nXT1cInF1ZXJ5UGFyYW1zSGFuZGxpbmdcIlxuICAgICAgICBbcm91dGVyTGlua109XCJuYXZpZ2F0ZVwiXG4gICAgICAgIFtmcmFnbWVudF09XCJmcmFnbWVudFwiXG4gICAgICAgIFtwcmVzZXJ2ZUZyYWdtZW50XT1cInByZXNlcnZlRnJhZ21lbnRcIlxuICAgICAgICBtYXQtYnV0dG9uXG4gICAgPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICAgICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XG4gICAgPC9hPlxuXG4gICAgPCEtLSAuLi4gYW5kIHdpdGhvdXQgbGFiZWwgLS0+XG4gICAgPGFcbiAgICAgICAgKm5nSWY9XCJ0eXBlID09PSAncm91dGVyTGluaycgJiYgIWxhYmVsXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zXT1cInF1ZXJ5UGFyYW1zXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zSGFuZGxpbmddPVwicXVlcnlQYXJhbXNIYW5kbGluZ1wiXG4gICAgICAgIFtyb3V0ZXJMaW5rXT1cIm5hdmlnYXRlXCJcbiAgICAgICAgW2ZyYWdtZW50XT1cImZyYWdtZW50XCJcbiAgICAgICAgW3ByZXNlcnZlRnJhZ21lbnRdPVwicHJlc2VydmVGcmFnbWVudFwiXG4gICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgID5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgPC9hPlxuXG4gICAgPCEtLSBFeHRlcm5hbCBsaW5rIHdpdGggbGFiZWwuLi4gLS0+XG4gICAgPGEgKm5nSWY9XCJ0eXBlID09PSAnaHJlZicgJiYgbGFiZWxcIiBbYXR0ci5ocmVmXT1cImhyZWZcIiBbY29sb3JdPVwiY29sb3JcIiBtYXQtYnV0dG9uIHRhcmdldD1cIl9ibGFua1wiPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICAgICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XG4gICAgPC9hPlxuXG4gICAgPCEtLSAuLi4gYW5kIHdpdGhvdXQgbGFiZWwgLS0+XG4gICAgPGEgKm5nSWY9XCJ0eXBlID09PSAnaHJlZicgJiYgIWxhYmVsXCIgW2F0dHIuaHJlZl09XCJocmVmXCIgW2NvbG9yXT1cImNvbG9yXCIgbWF0LWljb24tYnV0dG9uIHRhcmdldD1cIl9ibGFua1wiPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICA8L2E+XG48L25nLWNvbnRhaW5lcj5cblxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInJhaXNlZFwiPlxuICAgIDwhLS0gQXBwIHJvdXRlZCBsaW5rIHdpdGggbGFiZWwuLi4gLS0+XG4gICAgPGFcbiAgICAgICAgKm5nSWY9XCJ0eXBlID09PSAncm91dGVyTGluaycgJiYgbGFiZWxcIlxuICAgICAgICBbY29sb3JdPVwiY29sb3JcIlxuICAgICAgICBbcXVlcnlQYXJhbXNdPVwicXVlcnlQYXJhbXNcIlxuICAgICAgICBbcXVlcnlQYXJhbXNIYW5kbGluZ109XCJxdWVyeVBhcmFtc0hhbmRsaW5nXCJcbiAgICAgICAgW3JvdXRlckxpbmtdPVwibmF2aWdhdGVcIlxuICAgICAgICBbZnJhZ21lbnRdPVwiZnJhZ21lbnRcIlxuICAgICAgICBbcHJlc2VydmVGcmFnbWVudF09XCJwcmVzZXJ2ZUZyYWdtZW50XCJcbiAgICAgICAgbWF0LXJhaXNlZC1idXR0b25cbiAgICA+XG4gICAgICAgIDxuYXR1cmFsLWljb24gKm5nSWY9XCJpY29uXCIgW25hbWVdPVwiaWNvblwiPjwvbmF0dXJhbC1pY29uPlxuICAgICAgICA8c3Bhbj57eyBsYWJlbCB9fTwvc3Bhbj5cbiAgICA8L2E+XG5cbiAgICA8IS0tIC4uLiBhbmQgd2l0aG91dCBsYWJlbCAtLT5cbiAgICA8YVxuICAgICAgICAqbmdJZj1cInR5cGUgPT09ICdyb3V0ZXJMaW5rJyAmJiAhbGFiZWxcIlxuICAgICAgICBbY29sb3JdPVwiY29sb3JcIlxuICAgICAgICBbcXVlcnlQYXJhbXNdPVwicXVlcnlQYXJhbXNcIlxuICAgICAgICBbcXVlcnlQYXJhbXNIYW5kbGluZ109XCJxdWVyeVBhcmFtc0hhbmRsaW5nXCJcbiAgICAgICAgW3JvdXRlckxpbmtdPVwibmF2aWdhdGVcIlxuICAgICAgICBbZnJhZ21lbnRdPVwiZnJhZ21lbnRcIlxuICAgICAgICBbcHJlc2VydmVGcmFnbWVudF09XCJwcmVzZXJ2ZUZyYWdtZW50XCJcbiAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICA8L2E+XG5cbiAgICA8IS0tIEV4dGVybmFsIGxpbmsgd2l0aCBsYWJlbC4uLiAtLT5cbiAgICA8YSAqbmdJZj1cInR5cGUgPT09ICdocmVmJyAmJiBsYWJlbFwiIFthdHRyLmhyZWZdPVwiaHJlZlwiIFtjb2xvcl09XCJjb2xvclwiIG1hdC1yYWlzZWQtYnV0dG9uIHRhcmdldD1cIl9ibGFua1wiPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICAgICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XG4gICAgPC9hPlxuXG4gICAgPCEtLSAuLi4gYW5kIHdpdGhvdXQgbGFiZWwgLS0+XG4gICAgPGFcbiAgICAgICAgKm5nSWY9XCJ0eXBlID09PSAnaHJlZicgJiYgIWxhYmVsXCJcbiAgICAgICAgW2F0dHIuaHJlZl09XCJocmVmXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICA8L2E+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25hdHVyYWwvc3JjL2xpYi9tb2R1bGVzL3RhYmxlLWJ1dHRvbi90YWJsZS1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmF0dXJhbC9zcmMvbGliL21vZHVsZXMvdGFibGUtYnV0dG9uL3RhYmxlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFpQixpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBSWxIOzs7Ozs7OztHQVFHO0FBT0gsTUFBTSxPQUFPLDJCQUEyQjtJQU54QztRQU9vQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUN6Qix3QkFBbUIsR0FBd0IsRUFBRSxDQUFDO1FBSTlDLGFBQVEsR0FBNkIsRUFBRSxDQUFDO1FBRXhDLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQUN6QixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRUwsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBQ2hFLFNBQUksR0FBNkMsTUFBTSxDQUFDO0tBYWxFO0lBWFUsV0FBVyxDQUFDLE9BQXNCO1FBQ3JDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxNQUFNLElBQUksTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsTUFBTSxFQUFFO1lBQy9ELElBQUksQ0FBQyxJQUFJLEdBQUcsWUFBWSxDQUFDO1NBQzVCO2FBQU0sSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxJQUFJLEdBQUcsTUFBTSxDQUFDO1NBQ3RCO2FBQU0sSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRTtZQUNsQyxJQUFJLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQztTQUN2QjthQUFNO1lBQ0gsSUFBSSxDQUFDLElBQUksR0FBRyxNQUFNLENBQUM7U0FDdEI7SUFDTCxDQUFDOzt3SEF4QlEsMkJBQTJCOzRHQUEzQiwyQkFBMkIsOFdDbkJ4Qyx1NUlBOEhBOzJGRDNHYSwyQkFBMkI7a0JBTnZDLFNBQVM7K0JBQ0ksc0JBQXNCLGlCQUdqQixpQkFBaUIsQ0FBQyxJQUFJOzhCQUdyQixXQUFXO3NCQUExQixLQUFLO2dCQUNVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLO2dCQUNVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLO2dCQUNVLE1BQU07c0JBQXJCLEtBQUs7Z0JBQ1UsS0FBSztzQkFBcEIsS0FBSztnQkFDb0IsV0FBVztzQkFBcEMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0VuY2Fwc3VsYXRpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtQYXJhbXMsIFF1ZXJ5UGFyYW1zSGFuZGxpbmcsIFJvdXRlckxpbmt9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQge1RoZW1lUGFsZXR0ZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5cbi8qKlxuICogQnV0dG9uIHRoYXQgZml0cyB3ZWxsIGluIGEgYDxtYXQtdGFibGU+YCBhbmQgc3VwcG9ydCBlaXRoZXJcbiAqIHJvdXRlIG5hdmlnYXRpb24gdmlhIGBuYXZpZ2F0ZWAgb3IgZXh0ZXJuYWwgVVJMIHZpYSBgaHJlZmAuXG4gKlxuICogSWYgbmVpdGhlciBgbmF2aWdhdGVgIG5vciBgaHJlZmAgaGFzIGEgbWVhbmluZ2Z1bCB2YWx1ZSwgdGhlblxuICogaXQgd2lsbCBzaG93IHRoZSBpY29uIGFuZC9vciBsYWJlbCBpbiBgPHNwYW4+YCBpbnN0ZWFkIG9mIGEgYnV0dG9uXG4gKlxuICogRXh0ZXJuYWwgVVJMIHdpbGwgYWx3YXlzIGJlIG9wZW5lZCBpbiBuZXcgdGFiLlxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ25hdHVyYWwtdGFibGUtYnV0dG9uJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGFibGUtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBOYXR1cmFsVGFibGVCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAgIEBJbnB1dCgpIHB1YmxpYyBxdWVyeVBhcmFtczogUGFyYW1zID0ge307XG4gICAgQElucHV0KCkgcHVibGljIHF1ZXJ5UGFyYW1zSGFuZGxpbmc6IFF1ZXJ5UGFyYW1zSGFuZGxpbmcgPSAnJztcbiAgICBASW5wdXQoKSBwdWJsaWMgbGFiZWw/OiBzdHJpbmcgfCBudWxsO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBpY29uPzogc3RyaW5nIHwgbnVsbDtcbiAgICBASW5wdXQoKSBwdWJsaWMgaHJlZj86IHN0cmluZyB8IG51bGw7XG4gICAgQElucHV0KCkgcHVibGljIG5hdmlnYXRlOiBSb3V0ZXJMaW5rWydyb3V0ZXJMaW5rJ10gPSBbXTtcbiAgICBASW5wdXQoKSBwdWJsaWMgZnJhZ21lbnQ/OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gICAgQElucHV0KCkgcHVibGljIHByZXNlcnZlRnJhZ21lbnQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBwdWJsaWMgcmFpc2VkID0gZmFsc2U7XG4gICAgQElucHV0KCkgcHVibGljIGNvbG9yOiBUaGVtZVBhbGV0dGU7XG4gICAgQE91dHB1dCgpIHB1YmxpYyByZWFkb25seSBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbiAgICBwdWJsaWMgdHlwZTogJ3JvdXRlckxpbmsnIHwgJ2hyZWYnIHwgJ2NsaWNrJyB8ICdub25lJyA9ICdub25lJztcblxuICAgIHB1YmxpYyBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLm5hdmlnYXRlPy5sZW5ndGggfHwgT2JqZWN0LmtleXModGhpcy5xdWVyeVBhcmFtcykubGVuZ3RoKSB7XG4gICAgICAgICAgICB0aGlzLnR5cGUgPSAncm91dGVyTGluayc7XG4gICAgICAgIH0gZWxzZSBpZiAodGhpcy5ocmVmKSB7XG4gICAgICAgICAgICB0aGlzLnR5cGUgPSAnaHJlZic7XG4gICAgICAgIH0gZWxzZSBpZiAodGhpcy5idXR0b25DbGljay5vYnNlcnZlZCkge1xuICAgICAgICAgICAgdGhpcy50eXBlID0gJ2NsaWNrJztcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMudHlwZSA9ICdub25lJztcbiAgICAgICAgfVxuICAgIH1cbn1cbiIsIjwhLS0gQmVjYXVzZSBkaXJlY3RpdmVzIGNhbid0IGJlIGFwcGxpZWQgY29uZGl0aW9uYWxseSAocm91dGVyTGluaywgbWF0LWJ1dHRvbiBhbmQgbWF0LWljb24tYnV0dG9uKSwgd2UgaGF2ZSB0byB1c2UgZGlmZmVyZW50IGVsZW1lbnRzIC0tPlxuXG48IS0tIEVkZ2UgY2FzZSBvZiBhIGJ1dHRvbiB3aXRob3V0IGFueSBraW5kIG9mIGxpbmsgYXQgYWxsIC0tPlxuPHNwYW4gKm5nSWY9XCJ0eXBlID09PSAnbm9uZSdcIj5cbiAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICA8c3BhbiAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L3NwYW4+XG48L3NwYW4+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCIhcmFpc2VkXCI+XG4gICAgPCEtLSBBcHAgcm91dGVkIGxpbmsgd2l0aCBsYWJlbC4uLiAtLT5cbiAgICA8YVxuICAgICAgICAqbmdJZj1cInR5cGUgPT09ICdyb3V0ZXJMaW5rJyAmJiBsYWJlbFwiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIFtxdWVyeVBhcmFtc109XCJxdWVyeVBhcmFtc1wiXG4gICAgICAgIFtxdWVyeVBhcmFtc0hhbmRsaW5nXT1cInF1ZXJ5UGFyYW1zSGFuZGxpbmdcIlxuICAgICAgICBbcm91dGVyTGlua109XCJuYXZpZ2F0ZVwiXG4gICAgICAgIFtmcmFnbWVudF09XCJmcmFnbWVudFwiXG4gICAgICAgIFtwcmVzZXJ2ZUZyYWdtZW50XT1cInByZXNlcnZlRnJhZ21lbnRcIlxuICAgICAgICBtYXQtYnV0dG9uXG4gICAgPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICAgICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XG4gICAgPC9hPlxuXG4gICAgPCEtLSAuLi4gYW5kIHdpdGhvdXQgbGFiZWwgLS0+XG4gICAgPGFcbiAgICAgICAgKm5nSWY9XCJ0eXBlID09PSAncm91dGVyTGluaycgJiYgIWxhYmVsXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zXT1cInF1ZXJ5UGFyYW1zXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zSGFuZGxpbmddPVwicXVlcnlQYXJhbXNIYW5kbGluZ1wiXG4gICAgICAgIFtyb3V0ZXJMaW5rXT1cIm5hdmlnYXRlXCJcbiAgICAgICAgW2ZyYWdtZW50XT1cImZyYWdtZW50XCJcbiAgICAgICAgW3ByZXNlcnZlRnJhZ21lbnRdPVwicHJlc2VydmVGcmFnbWVudFwiXG4gICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgID5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgPC9hPlxuXG4gICAgPCEtLSBDbGljayB3aXRoIGxhYmVsLi4uIC0tPlxuICAgIDxhICpuZ0lmPVwidHlwZSA9PT0gJ2NsaWNrJyAmJiBsYWJlbFwiIFtjb2xvcl09XCJjb2xvclwiIChjbGljayk9XCJidXR0b25DbGljay5lbWl0KCRldmVudClcIiBtYXQtYnV0dG9uPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICAgICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XG4gICAgPC9hPlxuXG4gICAgPCEtLSAuLi4gYW5kIHdpdGhvdXQgbGFiZWwgLS0+XG4gICAgPGEgKm5nSWY9XCJ0eXBlID09PSAnY2xpY2snICYmICFsYWJlbFwiIChjbGljayk9XCJidXR0b25DbGljay5lbWl0KCRldmVudClcIiBtYXQtaWNvbi1idXR0b24+XG4gICAgICAgIDxuYXR1cmFsLWljb24gKm5nSWY9XCJpY29uXCIgW25hbWVdPVwiaWNvblwiPjwvbmF0dXJhbC1pY29uPlxuICAgIDwvYT5cblxuICAgIDwhLS0gRXh0ZXJuYWwgbGluayB3aXRoIGxhYmVsLi4uIC0tPlxuICAgIDxhICpuZ0lmPVwidHlwZSA9PT0gJ2hyZWYnICYmIGxhYmVsXCIgW2F0dHIuaHJlZl09XCJocmVmXCIgW2NvbG9yXT1cImNvbG9yXCIgbWF0LWJ1dHRvbiB0YXJnZXQ9XCJfYmxhbmtcIj5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgICAgIDxzcGFuPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIDwvYT5cblxuICAgIDwhLS0gLi4uIGFuZCB3aXRob3V0IGxhYmVsIC0tPlxuICAgIDxhICpuZ0lmPVwidHlwZSA9PT0gJ2hyZWYnICYmICFsYWJlbFwiIFthdHRyLmhyZWZdPVwiaHJlZlwiIFtjb2xvcl09XCJjb2xvclwiIG1hdC1pY29uLWJ1dHRvbiB0YXJnZXQ9XCJfYmxhbmtcIj5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgPC9hPlxuPC9uZy1jb250YWluZXI+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJyYWlzZWRcIj5cbiAgICA8IS0tIEFwcCByb3V0ZWQgbGluayB3aXRoIGxhYmVsLi4uIC0tPlxuICAgIDxhXG4gICAgICAgICpuZ0lmPVwidHlwZSA9PT0gJ3JvdXRlckxpbmsnICYmIGxhYmVsXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zXT1cInF1ZXJ5UGFyYW1zXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zSGFuZGxpbmddPVwicXVlcnlQYXJhbXNIYW5kbGluZ1wiXG4gICAgICAgIFtyb3V0ZXJMaW5rXT1cIm5hdmlnYXRlXCJcbiAgICAgICAgW2ZyYWdtZW50XT1cImZyYWdtZW50XCJcbiAgICAgICAgW3ByZXNlcnZlRnJhZ21lbnRdPVwicHJlc2VydmVGcmFnbWVudFwiXG4gICAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgPlxuICAgICAgICA8bmF0dXJhbC1pY29uICpuZ0lmPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L25hdHVyYWwtaWNvbj5cbiAgICAgICAgPHNwYW4+e3sgbGFiZWwgfX08L3NwYW4+XG4gICAgPC9hPlxuXG4gICAgPCEtLSAuLi4gYW5kIHdpdGhvdXQgbGFiZWwgLS0+XG4gICAgPGFcbiAgICAgICAgKm5nSWY9XCJ0eXBlID09PSAncm91dGVyTGluaycgJiYgIWxhYmVsXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zXT1cInF1ZXJ5UGFyYW1zXCJcbiAgICAgICAgW3F1ZXJ5UGFyYW1zSGFuZGxpbmddPVwicXVlcnlQYXJhbXNIYW5kbGluZ1wiXG4gICAgICAgIFtyb3V0ZXJMaW5rXT1cIm5hdmlnYXRlXCJcbiAgICAgICAgW2ZyYWdtZW50XT1cImZyYWdtZW50XCJcbiAgICAgICAgW3ByZXNlcnZlRnJhZ21lbnRdPVwicHJlc2VydmVGcmFnbWVudFwiXG4gICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICBtYXQtcmFpc2VkLWJ1dHRvblxuICAgID5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgPC9hPlxuICAgIDwhLS0gQ2xpY2sgd2l0aCBsYWJlbC4uLiAtLT5cbiAgICA8YSAqbmdJZj1cInR5cGUgPT09ICdjbGljaycgJiYgbGFiZWxcIiBbY29sb3JdPVwiY29sb3JcIiAoY2xpY2spPVwiYnV0dG9uQ2xpY2suZW1pdCgkZXZlbnQpXCIgbWF0LXJhaXNlZC1idXR0b24+XG4gICAgICAgIDxuYXR1cmFsLWljb24gKm5nSWY9XCJpY29uXCIgW25hbWVdPVwiaWNvblwiPjwvbmF0dXJhbC1pY29uPlxuICAgICAgICA8c3Bhbj57eyBsYWJlbCB9fTwvc3Bhbj5cbiAgICA8L2E+XG5cbiAgICA8IS0tIC4uLiBhbmQgd2l0aG91dCBsYWJlbCAtLT5cbiAgICA8YVxuICAgICAgICAqbmdJZj1cInR5cGUgPT09ICdjbGljaycgJiYgIWxhYmVsXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgKGNsaWNrKT1cImJ1dHRvbkNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICBtYXQtcmFpc2VkLWJ1dHRvblxuICAgID5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgPC9hPlxuXG4gICAgPCEtLSBFeHRlcm5hbCBsaW5rIHdpdGggbGFiZWwuLi4gLS0+XG4gICAgPGEgKm5nSWY9XCJ0eXBlID09PSAnaHJlZicgJiYgbGFiZWxcIiBbYXR0ci5ocmVmXT1cImhyZWZcIiBbY29sb3JdPVwiY29sb3JcIiBtYXQtcmFpc2VkLWJ1dHRvbiB0YXJnZXQ9XCJfYmxhbmtcIj5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgICAgIDxzcGFuPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIDwvYT5cblxuICAgIDwhLS0gLi4uIGFuZCB3aXRob3V0IGxhYmVsIC0tPlxuICAgIDxhXG4gICAgICAgICpuZ0lmPVwidHlwZSA9PT0gJ2hyZWYnICYmICFsYWJlbFwiXG4gICAgICAgIFthdHRyLmhyZWZdPVwiaHJlZlwiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICBtYXQtcmFpc2VkLWJ1dHRvblxuICAgICAgICB0YXJnZXQ9XCJfYmxhbmtcIlxuICAgID5cbiAgICAgICAgPG5hdHVyYWwtaWNvbiAqbmdJZj1cImljb25cIiBbbmFtZV09XCJpY29uXCI+PC9uYXR1cmFsLWljb24+XG4gICAgPC9hPlxuPC9uZy1jb250YWluZXI+XG4iXX0=

package/fesm2015/ecodev-natural.mjs

@@ -10243,6 +10243,7 @@ class NaturalTableButtonComponent {
         this.navigate = [];
         this.preserveFragment = false;
         this.raised = false;
+        this.buttonClick = new EventEmitter();
         this.type = 'none';
     }
     ngOnChanges(changes) {
@@ -10253,16 +10254,19 @@ class NaturalTableButtonComponent {
         else if (this.href) {
             this.type = 'href';
         }
+        else if (this.buttonClick.observed) {
+            this.type = 'click';
+        }
         else {
             this.type = 'none';
         }
     }
 }
 NaturalTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], encapsulation: i0.ViewEncapsulation.None });
+NaturalTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", 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" }, outputs: { buttonClick: "buttonClick" }, 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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\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 === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\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"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: i4.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"] }, { kind: "component", type: NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            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"] }]
+            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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-button>\n        <natural-icon *ngIf=\"icon\" [name]=\"icon\"></natural-icon>\n        <span>{{ label }}</span>\n    </a>\n\n    <!-- ... and without label -->\n    <a *ngIf=\"type === 'click' && !label\" (click)=\"buttonClick.emit($event)\" mat-icon-button>\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    <!-- Click with label... -->\n    <a *ngIf=\"type === 'click' && label\" [color]=\"color\" (click)=\"buttonClick.emit($event)\" mat-raised-button>\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 === 'click' && !label\"\n        [color]=\"color\"\n        (click)=\"buttonClick.emit($event)\"\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"] }]
         }], propDecorators: { queryParams: [{
                 type: Input
             }], queryParamsHandling: [{
@@ -10283,6 +10287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
                 type: Input
             }], color: [{
                 type: Input
+            }], buttonClick: [{
+                type: Output
             }] } });
 
 class NaturalTableButtonModule {