@ecodev/natural 66.0.2 → 66.0.4

package/fesm2022/ecodev-natural.mjs

@@ -2906,11 +2906,11 @@ class NaturalDropdownContainerComponent extends BasePortalOutlet {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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\" mat-raised-button 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDropdownContainerComponent, decorators: [{
             type: Component,
-            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\" mat-raised-button 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"] }]
+            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"] }]
         }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
 
 class NaturalDropdownRef {
@@ -6522,11 +6522,11 @@ class NaturalDetailHeaderComponent {
         return this.getRootLink().concat([id]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: { classPropertyName: "currentBaseUrl", publicName: "currentBaseUrl", isSignal: true, isRequired: false, transformFunction: null }, isPanel: { classPropertyName: "isPanel", publicName: "isPanel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: false, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: true, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, listRoute: { classPropertyName: "listRoute", publicName: "listRoute", isSignal: true, isRequired: false, transformFunction: null }, listFragment: { classPropertyName: "listFragment", publicName: "listFragment", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: NaturalDetailHeaderComponent, isStandalone: true, selector: "natural-detail-header", inputs: { currentBaseUrl: { classPropertyName: "currentBaseUrl", publicName: "currentBaseUrl", isSignal: true, isRequired: false, transformFunction: null }, isPanel: { classPropertyName: "isPanel", publicName: "isPanel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rootLabel: { classPropertyName: "rootLabel", publicName: "rootLabel", isSignal: false, isRequired: false, transformFunction: null }, newLabel: { classPropertyName: "newLabel", publicName: "newLabel", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: false, isRequired: true, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, listRoute: { classPropertyName: "listRoute", publicName: "listRoute", isSignal: true, isRequired: false, transformFunction: null }, listFragment: { classPropertyName: "listFragment", publicName: "listFragment", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-font-headline-sm nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-font-headline-sm nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"], dependencies: [{ kind: "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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalDetailHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'natural-detail-header', imports: [MatButton, RouterLink, MatIcon, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-headline-5 nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-headline-5 nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
+            args: [{ selector: 'natural-detail-header', imports: [MatButton, RouterLink, MatIcon, NaturalIconDirective], template: "<div class=\"breadcrumb\">\n    @if (rootLabel || label) {\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getRootLink()\" [fragment]=\"listFragment()\">{{\n            rootLabel || label\n        }}</a>\n    }\n    @for (parent of breadcrumbs(); track parent.id) {\n        /\n        <a color=\"primary\" mat-button [routerLink]=\"isPanel() ? [] : getLink(parent.id)\">\n            {{ parent?.fullName || parent?.name }}</a\n        >\n    }\n</div>\n\n<div class=\"body\">\n    @if (icon) {\n        <div style=\"width: 30px\">\n            <mat-icon [naturalIcon]=\"icon\" />\n        </div>\n    }\n    @if (!model.id) {\n        <div class=\"mat-font-headline-sm nat-no-margin newLabel\">{{ newLabel() }}</div>\n    }\n    @if (model.id) {\n        <div class=\"mat-font-headline-sm nat-no-margin label\">{{ model.name || model.fullName || label }}</div>\n    }\n    <div>\n        <ng-content />\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host .breadcrumb,:host .body{display:flex;flex-direction:row;align-items:center}:host .breadcrumb{position:relative;top:5px}:host .body{min-height:40px}:host .body>*:not(:last-child){margin-right:5px}:host .body .label,:host .body .newLabel{flex:1}@media screen and (max-width: 600px){:host .body{flex-direction:column;align-items:flex-start}:host .body>*:not(:last-child){margin-bottom:10px!important}:host .body mat-icon{display:none}}\n"] }]
         }], propDecorators: { currentBaseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentBaseUrl", required: false }] }], isPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPanel", required: false }] }], icon: [{
                 type: Input
             }], label: [{
@@ -7492,11 +7492,11 @@ class FacetSelectorComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacetSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FacetSelectorComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (data.title) {\n    <div class=\"dropdown-title nat-bold\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"], dependencies: [{ kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacetSelectorComponent, decorators: [{
             type: Component,
-            args: [{ imports: [MatNavList, MatListItem], template: "@if (data.title) {\n    <div class=\"dropdown-title mat-body-2\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
+            args: [{ imports: [MatNavList, MatListItem], template: "@if (data.title) {\n    <div class=\"dropdown-title nat-bold\">{{ data.title }}</div>\n}\n<mat-nav-list>\n    @for (facet of facets; track $index) {\n        <mat-list-item (click)=\"selection = facet; close()\">\n            <a>{{ facet.display }}</a>\n        </mat-list-item>\n    }\n</mat-nav-list>\n", styles: [".mat-nav-list{padding:0}.dropdown-title{opacity:.7;padding:5px;font-variant:all-small-caps;font-size:18px}\n"] }]
         }] });
 
 // Required to check invalid fields when initializing natural-search
@@ -9445,11 +9445,11 @@ class NaturalHierarchicSelectorDialogComponent {
         this.dialogRef.close(result);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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\" mat-raised-button (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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalHierarchicSelectorDialogComponent, decorators: [{
             type: Component,
-            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\" mat-raised-button (click)=\"close(config.hierarchicSelection)\"\n        ><span i18n>Valider</span>\n    </button>\n</mat-dialog-actions>\n" }]
+            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" }]
         }], ctorParameters: () => [] });
 
 class NaturalHierarchicSelectorDialogService {
@@ -10756,9 +10756,7 @@ class NaturalTableButtonComponent {
     fragment = input(...(ngDevMode ? [undefined, { debugName: "fragment" }] : []));
     preserveFragment = input(false, ...(ngDevMode ? [{ debugName: "preserveFragment" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    raised = input(false, ...(ngDevMode ? [{ debugName: "raised" }] : []));
-    appearance = computed(() => (this.raised() ? 'elevated' : 'text'), ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-    iconClass = computed(() => (this.raised() ? 'mat-elevation-z4' : ''), ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+    appearance = input('text', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
     buttonClick$ = new Subject();
     buttonClick = outputFromObservable(this.buttonClick$);
@@ -10778,12 +10776,12 @@ class NaturalTableButtonComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "type" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, raised: { classPropertyName: "raised", publicName: "raised", 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                    mat-icon-button\n                    [class]=\"iconClass()\"\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\n                    mat-icon-button\n                    target=\"_blank\"\n                    [class]=\"iconClass()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NaturalTableButtonComponent, decorators: [{
             type: Component,
-            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                    mat-icon-button\n                    [class]=\"iconClass()\"\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\n                    mat-icon-button\n                    target=\"_blank\"\n                    [class]=\"iconClass()\"\n                    [attr.href]=\"href()\"\n                    [color]=\"color()\"\n                    [disabled]=\"disabled()\"\n                >\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"] }]
-        }], 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 }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
+            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"] }]
+        }], 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"] }] } });
 
 /*
  * Public API Surface of natural