@ecodev/natural 66.0.3 → 66.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ecodev-natural.mjs +8 -10
- package/fesm2022/ecodev-natural.mjs.map +1 -1
- package/index.d.ts +2 -4
- package/package.json +1 -1
- package/src/lib/_natural.scss +103 -29
|
@@ -2906,11 +2906,11 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
|
|
|
2906
2906
|
}
|
|
2907
2907
|
}
|
|
2908
2908
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2909
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"natural-dropdown-container\"\n role=\"menu\"\n tabindex=\"-1\"\n [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n (animationend)=\"onAnimationDone($event.animationName)\"\n (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button color=\"primary\"
|
|
2909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalDropdownContainerComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"natural-dropdown-container\"\n role=\"menu\"\n tabindex=\"-1\"\n [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n (animationend)=\"onAnimationDone($event.animationName)\"\n (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button color=\"primary\" matButton=\"filled\" i18n (click)=\"close()\">Valider</button>\n </div>\n }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);box-shadow:var(--mat-sys-level2);border-radius:2px;background:var(--mat-sys-surface-container-high);height:100%}.natural-dropdown-container>*>*>*{outline:none!important}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2910
2910
|
}
|
|
2911
2911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
|
|
2912
2912
|
type: Component,
|
|
2913
|
-
args: [{ imports: [CdkPortalOutlet, MatButton], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"natural-dropdown-container\"\n role=\"menu\"\n tabindex=\"-1\"\n [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n (animationend)=\"onAnimationDone($event.animationName)\"\n (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button color=\"primary\"
|
|
2913
|
+
args: [{ imports: [CdkPortalOutlet, MatButton], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"natural-dropdown-container\"\n role=\"menu\"\n tabindex=\"-1\"\n [class.mat-menu-panel-exit-animation]=\"panelAnimationState === 'void'\"\n (animationend)=\"onAnimationDone($event.animationName)\"\n (animationcancel)=\"onAnimationDone($event.animationName)\"\n>\n <div class=\"natural-dropdown-container-content\">\n <ng-template cdkPortalOutlet />\n </div>\n\n @if (data.showValidateButton) {\n <div class=\"natural-dropdown-validate-button\">\n <button color=\"primary\" matButton=\"filled\" i18n (click)=\"close()\">Valider</button>\n </div>\n }\n</div>\n", styles: ["@keyframes _mat-menu-enter{0%{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes _mat-menu-exit{0%{opacity:1}to{opacity:0}}.natural-dropdown-container{display:flex;flex-direction:column;animation:_mat-menu-enter .12s cubic-bezier(0,0,.2,1);box-shadow:var(--mat-sys-level2);border-radius:2px;background:var(--mat-sys-surface-container-high);height:100%}.natural-dropdown-container>*>*>*{outline:none!important}.natural-dropdown-container-content{flex:1;padding:5px;overflow:auto}.natural-dropdown-container .natural-dropdown-validate-button{display:flex;flex:none;flex-direction:row;justify-content:flex-end;margin:5px}.natural-dropdown-container.mat-menu-panel-exit-animation{animation:_mat-menu-exit .1s 25ms linear forwards}\n"] }]
|
|
2914
2914
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
|
|
2915
2915
|
|
|
2916
2916
|
class NaturalDropdownRef {
|
|
@@ -9445,11 +9445,11 @@ class NaturalHierarchicSelectorDialogComponent {
|
|
|
9445
9445
|
this.dialogRef.close(result);
|
|
9446
9446
|
}
|
|
9447
9447
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9448
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n <natural-hierarchic-selector\n [selected]=\"config.hierarchicSelection ?? {}\"\n [config]=\"config.hierarchicConfig\"\n [filters]=\"config.hierarchicFilters\"\n [multiple]=\"config.multiple ?? false\"\n [allowSelectAll]=\"config.allowSelectAll ?? false\"\n [searchFacets]=\"config.searchFacets ?? []\"\n [searchSelections]=\"config.searchSelections ?? []\"\n (selectionChange)=\"config.hierarchicSelection = $event\"\n (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-dialog-close mat-button i18n>Annuler</button>\n <button color=\"primary\"
|
|
9448
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: NaturalHierarchicSelectorDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n <natural-hierarchic-selector\n [selected]=\"config.hierarchicSelection ?? {}\"\n [config]=\"config.hierarchicConfig\"\n [filters]=\"config.hierarchicFilters\"\n [multiple]=\"config.multiple ?? false\"\n [allowSelectAll]=\"config.allowSelectAll ?? false\"\n [searchFacets]=\"config.searchFacets ?? []\"\n [searchSelections]=\"config.searchSelections ?? []\"\n (selectionChange)=\"config.hierarchicSelection = $event\"\n (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-dialog-close mat-button i18n>Annuler</button>\n <button color=\"primary\" matButton=\"filled\" (click)=\"close(config.hierarchicSelection)\"\n ><span i18n>Valider</span>\n </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NaturalHierarchicSelectorComponent, selector: "natural-hierarchic-selector", inputs: ["displayWith", "config", "multiple", "selected", "filters", "searchFacets", "searchSelections", "allowSelectAll"], outputs: ["searchSelectionChange", "selectionChange"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
|
|
9449
9449
|
}
|
|
9450
9450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
|
|
9451
9451
|
type: Component,
|
|
9452
|
-
args: [{ imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButton], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n <natural-hierarchic-selector\n [selected]=\"config.hierarchicSelection ?? {}\"\n [config]=\"config.hierarchicConfig\"\n [filters]=\"config.hierarchicFilters\"\n [multiple]=\"config.multiple ?? false\"\n [allowSelectAll]=\"config.allowSelectAll ?? false\"\n [searchFacets]=\"config.searchFacets ?? []\"\n [searchSelections]=\"config.searchSelections ?? []\"\n (selectionChange)=\"config.hierarchicSelection = $event\"\n (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-dialog-close mat-button i18n>Annuler</button>\n <button color=\"primary\"
|
|
9452
|
+
args: [{ imports: [MatDialogModule, NaturalHierarchicSelectorComponent, MatButton], template: "<h2 i18n mat-dialog-title>S\u00E9lection</h2>\n\n<mat-dialog-content>\n <natural-hierarchic-selector\n [selected]=\"config.hierarchicSelection ?? {}\"\n [config]=\"config.hierarchicConfig\"\n [filters]=\"config.hierarchicFilters\"\n [multiple]=\"config.multiple ?? false\"\n [allowSelectAll]=\"config.allowSelectAll ?? false\"\n [searchFacets]=\"config.searchFacets ?? []\"\n [searchSelections]=\"config.searchSelections ?? []\"\n (selectionChange)=\"config.hierarchicSelection = $event\"\n (searchSelectionChange)=\"searchSelectionsOutput = $event\"\n />\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <button mat-dialog-close mat-button i18n>Annuler</button>\n <button color=\"primary\" matButton=\"filled\" (click)=\"close(config.hierarchicSelection)\"\n ><span i18n>Valider</span>\n </button>\n</mat-dialog-actions>\n" }]
|
|
9453
9453
|
}], ctorParameters: () => [] });
|
|
9454
9454
|
|
|
9455
9455
|
class NaturalHierarchicSelectorDialogService {
|
|
@@ -10756,9 +10756,7 @@ class NaturalTableButtonComponent {
|
|
|
10756
10756
|
fragment = input(...(ngDevMode ? [undefined, { debugName: "fragment" }] : []));
|
|
10757
10757
|
preserveFragment = input(false, ...(ngDevMode ? [{ debugName: "preserveFragment" }] : []));
|
|
10758
10758
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
10759
|
-
|
|
10760
|
-
appearance = computed(() => (this.raised() ? 'elevated' : 'text'), ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
10761
|
-
iconClass = computed(() => (this.raised() ? 'mat-elevation-z4' : ''), ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
|
|
10759
|
+
appearance = input('text', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
10762
10760
|
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
10763
10761
|
buttonClick$ = new Subject();
|
|
10764
10762
|
buttonClick = outputFromObservable(this.buttonClick$);
|
|
@@ -10778,12 +10776,12 @@ class NaturalTableButtonComponent {
|
|
|
10778
10776
|
}
|
|
10779
10777
|
}, ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
10780
10778
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10781
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null },
|
|
10779
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalTableButtonComponent, isStandalone: true, selector: "natural-table-button", inputs: { queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, preserveFragment: { classPropertyName: "preserveFragment", publicName: "preserveFragment", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n <span>\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n @if (label()) {\n <span>{{ label() }}</span>\n }\n </span>\n} @else {\n @switch (type()) {\n <!-- App routed link -->\n @case ('routerLinkOrClick') {\n @if (label()) {\n <a\n [matButton]=\"appearance()\"\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [routerLink]=\"navigate()\"\n [fragment]=\"fragment()\"\n [preserveFragment]=\"preserveFragment()\"\n (click)=\"buttonClick$.next($event)\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n <span>{{ label() }}</span>\n </a>\n } @else {\n <a\n matIconButton\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [routerLink]=\"navigate()\"\n [fragment]=\"fragment()\"\n [preserveFragment]=\"preserveFragment()\"\n (click)=\"buttonClick$.next($event)\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n </a>\n }\n }\n <!-- External link -->\n @case ('href') {\n @if (label()) {\n <a\n target=\"_blank\"\n [matButton]=\"appearance()\"\n [attr.href]=\"href()\"\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n <span>{{ label() }}</span>\n </a>\n } @else {\n <a matIconButton target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n </a>\n }\n }\n }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NaturalIconDirective, selector: "mat-icon[naturalIcon]", inputs: ["naturalIcon", "size"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10782
10780
|
}
|
|
10783
10781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
|
|
10784
10782
|
type: Component,
|
|
10785
|
-
args: [{ selector: 'natural-table-button', imports: [MatIcon, NaturalIconDirective, MatButton, MatIconButton, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n <span>\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n @if (label()) {\n <span>{{ label() }}</span>\n }\n </span>\n} @else {\n @switch (type()) {\n <!-- App routed link -->\n @case ('routerLinkOrClick') {\n @if (label()) {\n <a\n [matButton]=\"appearance()\"\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [routerLink]=\"navigate()\"\n [fragment]=\"fragment()\"\n [preserveFragment]=\"preserveFragment()\"\n (click)=\"buttonClick$.next($event)\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n <span>{{ label() }}</span>\n </a>\n } @else {\n <a\n
|
|
10786
|
-
}], propDecorators: { queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], preserveFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveFragment", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }],
|
|
10783
|
+
args: [{ selector: 'natural-table-button', imports: [MatIcon, NaturalIconDirective, MatButton, MatIconButton, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->\n<!-- Because directives can't be applied conditionally (routerLink, mat-button and mat-icon-button), we have to use different elements -->\n@let theIcon = icon();\n\n<!-- Edge case of a button without any kind of link at all -->\n@if (type() === 'none') {\n <span>\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n @if (label()) {\n <span>{{ label() }}</span>\n }\n </span>\n} @else {\n @switch (type()) {\n <!-- App routed link -->\n @case ('routerLinkOrClick') {\n @if (label()) {\n <a\n [matButton]=\"appearance()\"\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [routerLink]=\"navigate()\"\n [fragment]=\"fragment()\"\n [preserveFragment]=\"preserveFragment()\"\n (click)=\"buttonClick$.next($event)\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n <span>{{ label() }}</span>\n </a>\n } @else {\n <a\n matIconButton\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [queryParams]=\"queryParams()\"\n [queryParamsHandling]=\"queryParamsHandling()\"\n [routerLink]=\"navigate()\"\n [fragment]=\"fragment()\"\n [preserveFragment]=\"preserveFragment()\"\n (click)=\"buttonClick$.next($event)\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n </a>\n }\n }\n <!-- External link -->\n @case ('href') {\n @if (label()) {\n <a\n target=\"_blank\"\n [matButton]=\"appearance()\"\n [attr.href]=\"href()\"\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n >\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n <span>{{ label() }}</span>\n </a>\n } @else {\n <a matIconButton target=\"_blank\" [attr.href]=\"href()\" [color]=\"color()\" [disabled]=\"disabled()\">\n @if (theIcon) {\n <mat-icon [naturalIcon]=\"theIcon\" />\n }\n </a>\n }\n }\n }\n}\n", styles: ["natural-table-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button mat-icon:not(:last-child){margin-right:5px}natural-table-button a.mat-mdc-button{display:flex;flex:1;flex-direction:row;justify-content:flex-start;align-items:center}natural-table-button a.mat-mdc-button .mdc-button__label{display:flex;flex-direction:row;align-items:center}natural-table-button>span{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 8px}\n"] }]
|
|
10784
|
+
}], propDecorators: { queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], navigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigate", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], preserveFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveFragment", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
10787
10785
|
|
|
10788
10786
|
/*
|
|
10789
10787
|
* Public API Surface of natural
|