@ecodev/natural 42.4.1 → 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.
- package/esm2020/lib/modules/table-button/table-button.component.mjs +21 -6
- package/fesm2015/ecodev-natural.mjs +19 -3
- package/fesm2015/ecodev-natural.mjs.map +1 -1
- package/fesm2020/ecodev-natural.mjs +18 -3
- package/fesm2020/ecodev-natural.mjs.map +1 -1
- package/lib/modules/table-button/table-button.component.d.ts +9 -6
- package/package.json +1 -1
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "
|
|
4
|
-
import * as i2 from "
|
|
3
|
+
import * as i1 from "../icon/icon.component";
|
|
4
|
+
import * as i2 from "@angular/material/button";
|
|
5
5
|
import * as i3 from "@angular/common";
|
|
6
6
|
import * as i4 from "@angular/router";
|
|
7
7
|
/**
|
|
8
8
|
* Button that fits well in a `<mat-table>` and support either
|
|
9
9
|
* route navigation via `navigate` or external URL via `href`.
|
|
10
10
|
*
|
|
11
|
+
* If neither `navigate` nor `href` has a meaningful value, then
|
|
12
|
+
* it will show the icon and/or label in `<span>` instead of a button
|
|
13
|
+
*
|
|
11
14
|
* External URL will always be opened in new tab.
|
|
12
15
|
*/
|
|
13
16
|
export class NaturalTableButtonComponent {
|
|
@@ -17,14 +20,26 @@ export class NaturalTableButtonComponent {
|
|
|
17
20
|
this.navigate = [];
|
|
18
21
|
this.preserveFragment = false;
|
|
19
22
|
this.raised = false;
|
|
23
|
+
this.type = 'none';
|
|
24
|
+
}
|
|
25
|
+
ngOnChanges(changes) {
|
|
26
|
+
if (this.navigate?.length || Object.keys(this.queryParams).length) {
|
|
27
|
+
this.type = 'routerLink';
|
|
28
|
+
}
|
|
29
|
+
else if (this.href) {
|
|
30
|
+
this.type = 'href';
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
this.type = 'none';
|
|
34
|
+
}
|
|
20
35
|
}
|
|
21
36
|
}
|
|
22
37
|
NaturalTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
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=\"
|
|
38
|
+
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: i1.NaturalIconComponent, selector: "natural-icon", inputs: ["label", "labelColor", "labelPosition", "name", "size"] }, { type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
24
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
|
|
25
40
|
type: Component,
|
|
26
|
-
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=\"
|
|
27
|
-
}],
|
|
41
|
+
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"] }]
|
|
42
|
+
}], propDecorators: { queryParams: [{
|
|
28
43
|
type: Input
|
|
29
44
|
}], queryParamsHandling: [{
|
|
30
45
|
type: Input
|
|
@@ -45,4 +60,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
|
|
|
45
60
|
}], color: [{
|
|
46
61
|
type: Input
|
|
47
62
|
}] } });
|
|
48
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
63
|
+
//# 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==
|
|
@@ -9955,6 +9955,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
|
|
|
9955
9955
|
* Button that fits well in a `<mat-table>` and support either
|
|
9956
9956
|
* route navigation via `navigate` or external URL via `href`.
|
|
9957
9957
|
*
|
|
9958
|
+
* If neither `navigate` nor `href` has a meaningful value, then
|
|
9959
|
+
* it will show the icon and/or label in `<span>` instead of a button
|
|
9960
|
+
*
|
|
9958
9961
|
* External URL will always be opened in new tab.
|
|
9959
9962
|
*/
|
|
9960
9963
|
class NaturalTableButtonComponent {
|
|
@@ -9964,14 +9967,27 @@ class NaturalTableButtonComponent {
|
|
|
9964
9967
|
this.navigate = [];
|
|
9965
9968
|
this.preserveFragment = false;
|
|
9966
9969
|
this.raised = false;
|
|
9970
|
+
this.type = 'none';
|
|
9971
|
+
}
|
|
9972
|
+
ngOnChanges(changes) {
|
|
9973
|
+
var _a;
|
|
9974
|
+
if (((_a = this.navigate) === null || _a === void 0 ? void 0 : _a.length) || Object.keys(this.queryParams).length) {
|
|
9975
|
+
this.type = 'routerLink';
|
|
9976
|
+
}
|
|
9977
|
+
else if (this.href) {
|
|
9978
|
+
this.type = 'href';
|
|
9979
|
+
}
|
|
9980
|
+
else {
|
|
9981
|
+
this.type = 'none';
|
|
9982
|
+
}
|
|
9967
9983
|
}
|
|
9968
9984
|
}
|
|
9969
9985
|
NaturalTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9970
|
-
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=\"
|
|
9986
|
+
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 });
|
|
9971
9987
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
|
|
9972
9988
|
type: Component,
|
|
9973
|
-
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=\"
|
|
9974
|
-
}],
|
|
9989
|
+
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"] }]
|
|
9990
|
+
}], propDecorators: { queryParams: [{
|
|
9975
9991
|
type: Input
|
|
9976
9992
|
}], queryParamsHandling: [{
|
|
9977
9993
|
type: Input
|