@porscheinformatik/material-addons 22.0.2-alpha.8 → 22.0.3

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, NgModule, HostBinding, ElementRef, ViewChild, Optional, Directive, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, input, computed, signal, ChangeDetectionStrategy, EventEmitter, Output, forwardRef, HostListener, TemplateRef, ViewChildren, ContentChild, SkipSelf, ContentChildren, ViewEncapsulation, QueryList } from '@angular/core';
+import { Input, Component, NgModule, HostBinding, ElementRef, ViewChild, Optional, Directive, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, input, computed, signal, ChangeDetectionStrategy, EventEmitter, Output, forwardRef, HostListener, model, TemplateRef, ViewChildren, ContentChild, SkipSelf, ContentChildren, ViewEncapsulation, QueryList } from '@angular/core';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
@@ -19,7 +19,6 @@ import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ObserversModule } from '@angular/cdk/observers';
-import { trigger, transition, style, animate, state } from '@angular/animations';
 import { Subject, Subscription, of } from 'rxjs';
 import { throttleTime, switchMap, map, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$3 from '@angular/material/card';
@@ -38,6 +37,7 @@ import * as i2$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { DateTime } from 'luxon';
 import { v4 } from 'uuid';
@@ -1254,122 +1254,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 
 class CardComponent {
     constructor() {
-        this.cancelDisabled = false;
-        this.cancelText = 'NOT SET';
-        this.readonly = true;
-        this.editText = 'NOT SET';
-        this.expandable = true;
-        this.expanded = true;
-        this.saveDisabled = false;
-        this.saveText = 'NOT SET';
-        this.editMode = false;
-        this.additionalActionText = '';
-        this.edit = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.save = new EventEmitter();
-        this.additionalAction = new EventEmitter();
-    }
-    onCancel() {
-        this.cancel.emit(undefined);
+        this.cancelDisabled = input(false, ...(ngDevMode ? [{ debugName: "cancelDisabled" }] : []));
+        this.cancelText = input('NOT SET', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
+        this.readonly = input(true, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.editText = input('NOT SET', ...(ngDevMode ? [{ debugName: "editText" }] : []));
+        this.expandable = input(true, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
+        this.expanded = model(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        this.saveDisabled = input(false, ...(ngDevMode ? [{ debugName: "saveDisabled" }] : []));
+        this.saveText = input('NOT SET', ...(ngDevMode ? [{ debugName: "saveText" }] : []));
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+        this.additionalActionIcon = input(undefined, ...(ngDevMode ? [{ debugName: "additionalActionIcon" }] : []));
+        this.additionalActionText = input('', ...(ngDevMode ? [{ debugName: "additionalActionText" }] : []));
+        this.edit = output();
+        this.cancel = output();
+        this.save = output();
+        this.additionalAction = output();
+        this.showHeader = computed(() => Boolean(this.title()) || this.expandable(), ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+        this.showCollapseButton = computed(() => this.expandable() && !this.editMode(), ...(ngDevMode ? [{ debugName: "showCollapseButton" }] : []));
+        this.showAdditionalActionButton = computed(() => Boolean(this.additionalActionIcon()), ...(ngDevMode ? [{ debugName: "showAdditionalActionButton" }] : []));
+        this.showEditButton = computed(() => !this.readonly() && !this.editMode(), ...(ngDevMode ? [{ debugName: "showEditButton" }] : []));
+        this.showActions = computed(() => !this.readonly() && this.editMode(), ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+        this.collapseIconClasses = computed(() => ({
+            'collapse-icon': true,
+            'collapse-icon--collapsed': !this.expanded(),
+        }), ...(ngDevMode ? [{ debugName: "collapseIconClasses" }] : []));
     }
     onEdit() {
-        this.edit.emit(undefined);
-        this.expanded = true;
-    }
-    onSave() {
-        this.save.emit(undefined);
+        this.expanded.set(true);
+        this.edit.emit();
     }
     toggleCollapse() {
-        this.expanded = !this.expanded;
-    }
-    additionalActionClicked() {
-        this.additionalAction.emit(undefined);
+        this.expanded.update((expanded) => !expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CardComponent, isStandalone: true, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  @if (title || expandable) {\n    <mat-card-header class=\"header\">\n      <mat-card-title-group class=\"center\">\n        <mat-card-title data-cy=\"card-title\" class=\"small-title-container\">{{ title }}</mat-card-title>\n        <div data-cy=\"title-buttons-block\" class=\"top-right-icons\">\n          @if (expandable && !editMode) {\n            <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n              <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n            </mad-icon-button>\n          }\n          @if (additionalActionIcon) {\n            <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalActionClicked()\" [title]=\"additionalActionText\" type=\"button\">\n              <mat-icon>{{ additionalActionIcon }}</mat-icon>\n            </mad-icon-button>\n          }\n          @if (!readonly && !editMode) {\n            <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText\" (click)=\"onEdit()\">\n              <mat-icon>create</mat-icon>\n            </mad-icon-button>\n          }\n        </div>\n      </mat-card-title-group>\n    </mat-card-header>\n  }\n  @if (expanded) {\n    <mat-card-content [@collapseExpandAnimation]>\n      <ng-content></ng-content>\n    </mat-card-content>\n  }\n  @if (!readonly && editMode) {\n    <mat-card-actions>\n      <mad-primary-button data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n        {{ saveText }}\n      </mad-primary-button>\n      <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n        {{ cancelText }}\n      </mad-outline-button>\n    </mat-card-actions>\n  }\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }], animations: [
-            trigger('collapseExpandAnimation', [
-                transition(':enter', [
-                    style({ opacity: 0, height: 0, overflow: 'hidden' }),
-                    animate('100ms', style({
-                        opacity: 1,
-                        height: '*',
-                    })),
-                ]),
-                transition(':leave', [
-                    style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                    animate('100ms', style({
-                        opacity: 0,
-                        height: 0,
-                    })),
-                ]),
-            ]),
-            trigger('rotateIcon', [
-                state('true', style({ transform: 'rotate(0)' })),
-                state('false', style({ transform: 'rotate(180deg)' })),
-                transition('true => false', animate('100ms ease-out')),
-                transition('false => true', animate('100ms ease-in')),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CardComponent, isStandalone: true, selector: "mad-card", inputs: { cancelDisabled: { classPropertyName: "cancelDisabled", publicName: "cancelDisabled", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, editText: { classPropertyName: "editText", publicName: "editText", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveText: { classPropertyName: "saveText", publicName: "saveText", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, additionalActionIcon: { classPropertyName: "additionalActionIcon", publicName: "additionalActionIcon", isSignal: true, isRequired: false, transformFunction: null }, additionalActionText: { classPropertyName: "additionalActionText", publicName: "additionalActionText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  @if (showHeader()) {\n    <mat-card-header class=\"card-header\">\n      <mat-card-title-group class=\"card-title-group\">\n        @if (title(); as cardTitle) {\n          <mat-card-title data-cy=\"card-title\" class=\"card-title\">\n            {{ cardTitle }}\n          </mat-card-title>\n        }\n        <div data-cy=\"title-buttons-block\" class=\"header-actions\">\n          @if (showCollapseButton()) {\n            <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n              <mat-icon [class]=\"collapseIconClasses()\"> keyboard_arrow_up </mat-icon>\n            </mad-icon-button>\n          }\n          @if (showAdditionalActionButton()) {\n            <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalAction.emit()\" [title]=\"additionalActionText()\" type=\"button\">\n              <mat-icon>{{ additionalActionIcon() }}</mat-icon>\n            </mad-icon-button>\n          }\n          @if (showEditButton()) {\n            <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText()\" (click)=\"onEdit()\" type=\"button\">\n              <mat-icon>create</mat-icon>\n            </mad-icon-button>\n          }\n        </div>\n      </mat-card-title-group>\n    </mat-card-header>\n  }\n\n  @if (expanded()) {\n    <mat-card-content animate.enter=\"card-content-enter\" animate.leave=\"card-content-leave\">\n      <ng-content />\n    </mat-card-content>\n  }\n\n  @if (showActions()) {\n    <mat-card-actions class=\"card-actions\">\n      <mad-primary-button\n        data-testid=\"save-btn\"\n        [title]=\"saveText()\"\n        [disabled]=\"saveDisabled()\"\n        (throttleClick)=\"save.emit()\"\n        madThrottleClick\n      >\n        {{ saveText() }}\n      </mad-primary-button>\n      <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText()\" [disabled]=\"cancelDisabled()\" (click)=\"cancel.emit()\">\n        {{ cancelText() }}\n      </mad-outline-button>\n    </mat-card-actions>\n  }\n</mat-card>\n", styles: [":host{display:block}.card-header{height:48px}.card-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%}.card-title{display:flex;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-shrink:0}.collapse-icon{transition:transform .1s ease}.collapse-icon--collapsed{transform:rotate(180deg)}.card-actions{display:flex;gap:.75rem}.card-content-enter{animation:card-content-enter .18s cubic-bezier(.2,0,0,1)}.card-content-leave{animation:card-content-leave .22s cubic-bezier(.4,0,.2,1)}@keyframes card-content-enter{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes card-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-card', animations: [
-                        trigger('collapseExpandAnimation', [
-                            transition(':enter', [
-                                style({ opacity: 0, height: 0, overflow: 'hidden' }),
-                                animate('100ms', style({
-                                    opacity: 1,
-                                    height: '*',
-                                })),
-                            ]),
-                            transition(':leave', [
-                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                                animate('100ms', style({
-                                    opacity: 0,
-                                    height: 0,
-                                })),
-                            ]),
-                        ]),
-                        trigger('rotateIcon', [
-                            state('true', style({ transform: 'rotate(0)' })),
-                            state('false', style({ transform: 'rotate(180deg)' })),
-                            transition('true => false', animate('100ms ease-out')),
-                            transition('false => true', animate('100ms ease-in')),
-                        ]),
-                    ], imports: [MatCardModule, IconButtonComponent, MatIconModule, PrimaryButtonComponent, ThrottleClickDirective, OutlineButtonComponent], template: "<mat-card>\n  @if (title || expandable) {\n    <mat-card-header class=\"header\">\n      <mat-card-title-group class=\"center\">\n        <mat-card-title data-cy=\"card-title\" class=\"small-title-container\">{{ title }}</mat-card-title>\n        <div data-cy=\"title-buttons-block\" class=\"top-right-icons\">\n          @if (expandable && !editMode) {\n            <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n              <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n            </mad-icon-button>\n          }\n          @if (additionalActionIcon) {\n            <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalActionClicked()\" [title]=\"additionalActionText\" type=\"button\">\n              <mat-icon>{{ additionalActionIcon }}</mat-icon>\n            </mad-icon-button>\n          }\n          @if (!readonly && !editMode) {\n            <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText\" (click)=\"onEdit()\">\n              <mat-icon>create</mat-icon>\n            </mad-icon-button>\n          }\n        </div>\n      </mat-card-title-group>\n    </mat-card-header>\n  }\n  @if (expanded) {\n    <mat-card-content [@collapseExpandAnimation]>\n      <ng-content></ng-content>\n    </mat-card-content>\n  }\n  @if (!readonly && editMode) {\n    <mat-card-actions>\n      <mad-primary-button data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n        {{ saveText }}\n      </mad-primary-button>\n      <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n        {{ cancelText }}\n      </mad-outline-button>\n    </mat-card-actions>\n  }\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"] }]
-        }], propDecorators: { cancelDisabled: [{
-                type: Input
-            }], cancelText: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], editText: [{
-                type: Input
-            }], expandable: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], saveDisabled: [{
-                type: Input
-            }], saveText: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], editMode: [{
-                type: Input
-            }], additionalActionIcon: [{
-                type: Input
-            }], additionalActionText: [{
-                type: Input
-            }], edit: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], save: [{
-                type: Output
-            }], additionalAction: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'mad-card', imports: [MatCardModule, IconButtonComponent, MatIconModule, PrimaryButtonComponent, ThrottleClickDirective, OutlineButtonComponent], template: "<mat-card>\n  @if (showHeader()) {\n    <mat-card-header class=\"card-header\">\n      <mat-card-title-group class=\"card-title-group\">\n        @if (title(); as cardTitle) {\n          <mat-card-title data-cy=\"card-title\" class=\"card-title\">\n            {{ cardTitle }}\n          </mat-card-title>\n        }\n        <div data-cy=\"title-buttons-block\" class=\"header-actions\">\n          @if (showCollapseButton()) {\n            <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\">\n              <mat-icon [class]=\"collapseIconClasses()\"> keyboard_arrow_up </mat-icon>\n            </mad-icon-button>\n          }\n          @if (showAdditionalActionButton()) {\n            <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalAction.emit()\" [title]=\"additionalActionText()\" type=\"button\">\n              <mat-icon>{{ additionalActionIcon() }}</mat-icon>\n            </mad-icon-button>\n          }\n          @if (showEditButton()) {\n            <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText()\" (click)=\"onEdit()\" type=\"button\">\n              <mat-icon>create</mat-icon>\n            </mad-icon-button>\n          }\n        </div>\n      </mat-card-title-group>\n    </mat-card-header>\n  }\n\n  @if (expanded()) {\n    <mat-card-content animate.enter=\"card-content-enter\" animate.leave=\"card-content-leave\">\n      <ng-content />\n    </mat-card-content>\n  }\n\n  @if (showActions()) {\n    <mat-card-actions class=\"card-actions\">\n      <mad-primary-button\n        data-testid=\"save-btn\"\n        [title]=\"saveText()\"\n        [disabled]=\"saveDisabled()\"\n        (throttleClick)=\"save.emit()\"\n        madThrottleClick\n      >\n        {{ saveText() }}\n      </mad-primary-button>\n      <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText()\" [disabled]=\"cancelDisabled()\" (click)=\"cancel.emit()\">\n        {{ cancelText() }}\n      </mad-outline-button>\n    </mat-card-actions>\n  }\n</mat-card>\n", styles: [":host{display:block}.card-header{height:48px}.card-title-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%}.card-title{display:flex;align-items:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;flex-shrink:0}.collapse-icon{transition:transform .1s ease}.collapse-icon--collapsed{transform:rotate(180deg)}.card-actions{display:flex;gap:.75rem}.card-content-enter{animation:card-content-enter .18s cubic-bezier(.2,0,0,1)}.card-content-leave{animation:card-content-leave .22s cubic-bezier(.4,0,.2,1)}@keyframes card-content-enter{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes card-content-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-2px)}}\n"] }]
+        }], propDecorators: { cancelDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelDisabled", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], editText: [{ type: i0.Input, args: [{ isSignal: true, alias: "editText", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], saveText: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveText", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], additionalActionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActionIcon", required: false }] }], additionalActionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalActionText", required: false }] }], edit: [{ type: i0.Output, args: ["edit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], save: [{ type: i0.Output, args: ["save"] }], additionalAction: [{ type: i0.Output, args: ["additionalAction"] }] } });
 
 class ThrottleClickModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ThrottleClickModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3008,7 +2932,7 @@ class DataTableComponent {
         return this.filter?.getActiveFilterCount() === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", rowExpandable: "rowExpandable", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track tableAction.type) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", rowExpandable: "rowExpandable", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track tableAction.type) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -3045,7 +2969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         DataTableFilterHeader,
                         DataTableFilter,
                         MatTooltip,
-                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track tableAction.type) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"] }]
+                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track tableAction.type) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.MatDialog }, { type: DataTablePersistenceService, decorators: [{
                     type: Inject,
                     args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
@@ -4284,7 +4208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }] } });
 
-const VERSION = '21.0.1';
+const VERSION = '22.0.3';
 
 const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
     providedIn: 'root',
@@ -4298,60 +4222,39 @@ function MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY() {
 }
 
 class AlertComponent {
-    get icon() {
-        switch (this.type) {
-            case 'success':
-                return 'check_circle';
-            case 'info':
-                return 'info';
-            case 'warning':
-                return 'warning';
-            case 'error':
-                return 'error';
-            default:
-                return '';
-        }
-    }
     constructor(alertConfig) {
         this.alertConfig = alertConfig;
-        this.type = this.alertConfig.type;
-        this.message = '';
-        this.size = this.alertConfig.size;
-        this.actionText = '';
-        this.closeable = true;
-        this.close = new EventEmitter();
-        this.action = new EventEmitter();
-    }
-    closeAlert() {
-        this.close.emit();
-    }
-    onAction() {
-        this.action.emit();
+        this.type = input(this.alertConfig.type, ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.message = input('', ...(ngDevMode ? [{ debugName: "message" }] : []));
+        this.size = input(this.alertConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.actionText = input('', ...(ngDevMode ? [{ debugName: "actionText" }] : []));
+        this.closeable = input(true, ...(ngDevMode ? [{ debugName: "closeable" }] : []));
+        this.close = output();
+        this.action = output();
+        this.classes = computed(() => `${this.type()} ${this.size()}`, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        this.icon = computed(() => {
+            switch (this.type()) {
+                case 'success':
+                    return 'check_circle';
+                case 'info':
+                    return 'info';
+                case 'warning':
+                    return 'warning';
+                case 'error':
+                    return 'error';
+            }
+        }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AlertComponent, deps: [{ token: MAD_ALERT_DEFAULT_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AlertComponent, isStandalone: true, selector: "mad-alert", inputs: { type: "type", message: "message", size: "size", actionText: "actionText", closeable: "closeable" }, outputs: { close: "close", action: "action" }, ngImport: i0, template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"\n    ><mat-icon>{{ icon }}</mat-icon></span\n  >\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  @if (actionText) {\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  }\n  @if (closeable) {\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"closeAlert()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AlertComponent, isStandalone: true, selector: "mad-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", action: "action" }, ngImport: i0, template: "<div data-cy=\"alert\" class=\"alert\" [class]=\"classes()\">\n  <span data-cy=\"alert-icon\" class=\"icon\">\n    <mat-icon>{{ icon() }}</mat-icon>\n  </span>\n  <span data-cy=\"alert-message\" class=\"message\">{{ message() }}</span>\n  @if (actionText()) {\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"action.emit()\">\n      {{ actionText() }}\n    </span>\n  }\n  @if (closeable()) {\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"close.emit()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px;display:flex;align-items:center}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert .close-btn{display:flex;align-items:center;justify-content:center}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-alert', imports: [CommonModule, MatIconModule, MatButtonModule], template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"\n    ><mat-icon>{{ icon }}</mat-icon></span\n  >\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  @if (actionText) {\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  }\n  @if (closeable) {\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"closeAlert()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"] }]
+            args: [{ selector: 'mad-alert', imports: [MatIconModule, MatButtonModule], template: "<div data-cy=\"alert\" class=\"alert\" [class]=\"classes()\">\n  <span data-cy=\"alert-icon\" class=\"icon\">\n    <mat-icon>{{ icon() }}</mat-icon>\n  </span>\n  <span data-cy=\"alert-message\" class=\"message\">{{ message() }}</span>\n  @if (actionText()) {\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"action.emit()\">\n      {{ actionText() }}\n    </span>\n  }\n  @if (closeable()) {\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"close.emit()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px;display:flex;align-items:center}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert .close-btn{display:flex;align-items:center;justify-content:center}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAD_ALERT_DEFAULT_CONFIGURATION]
-                }] }], propDecorators: { type: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], actionText: [{
-                type: Input
-            }], closeable: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }], action: [{
-                type: Output
-            }] } });
+                }] }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 /*
  * Public API Surface of material-addons