@porscheinformatik/material-addons 18.0.0 → 18.0.1

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -871,11 +871,11 @@ class ReadOnlyFormFieldWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ReadOnlyFormFieldWrapperComponent, isStandalone: true, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\"  (cdkObserveContent)=\"onContentChange()\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["useProjectedContent", "value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }, { kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2$3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ReadOnlyFormFieldWrapperComponent, isStandalone: true, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\" (cdkObserveContent)=\"onContentChange()\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["useProjectedContent", "value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }, { kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2$3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-readonly-form-field-wrapper', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], standalone: true, imports: [NgIf, ReadOnlyFormFieldComponent, ObserversModule], template: "<div #contentWrapper [hidden]=\"readonly\"  (cdkObserveContent)=\"onContentChange()\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"] }]
+            args: [{ selector: 'mad-readonly-form-field-wrapper', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], standalone: true, imports: [NgIf, ReadOnlyFormFieldComponent, ObserversModule], template: "<div #contentWrapper [hidden]=\"readonly\" (cdkObserveContent)=\"onContentChange()\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormGroupDirective }], propDecorators: { originalContent: [{
                 type: ViewChild,
                 args: ['contentWrapper', { static: false }]
@@ -1600,18 +1600,11 @@ class QuickListCompactComponent extends BaseQuickListComponent {
         this.formBuilder = formBuilder;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: QuickListCompactComponent, isStandalone: true, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last\">\n  <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.allItems.length\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: QuickListCompactComponent, isStandalone: true, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last\">\n  <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.allItems.length\"\n  (click)=\"addItem()\"\n  [disabled]=\"!isAddAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: QuickListCompactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-quick-list-compact', standalone: true, imports: [
-                        NgFor,
-                        NgIf,
-                        NgTemplateOutlet,
-                        IconButtonComponent,
-                        MatIconModule,
-                        LinkButtonComponent,
-                    ], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last\">\n  <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.allItems.length\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n" }]
+            args: [{ selector: 'mad-quick-list-compact', standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, LinkButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last\">\n  <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.allItems.length\"\n  (click)=\"addItem()\"\n  [disabled]=\"!isAddAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
 
 // Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
@@ -1640,14 +1633,7 @@ class ReactiveFormQuickListComponent extends BaseQuickListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ReactiveFormQuickListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-reactive-form-quick-list', standalone: true, imports: [
-                        NgFor,
-                        NgIf,
-                        NgTemplateOutlet,
-                        IconButtonComponent,
-                        MatIconModule,
-                        OutlineButtonComponent,
-                    ], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n\n<mad-outline-button data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n" }]
+            args: [{ selector: 'mad-reactive-form-quick-list', standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, OutlineButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n\n<mad-outline-button data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
 
 class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
@@ -1657,18 +1643,11 @@ class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
         this.formBuilder = formBuilder;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ReactiveFormQuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ReactiveFormQuickListCompactComponent, isStandalone: true, selector: "mad-reactive-form-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.formArray?.controls.length\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ReactiveFormQuickListCompactComponent, isStandalone: true, selector: "mad-reactive-form-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.formArray?.controls.length\"\n  (click)=\"addReactiveItem()\"\n  [disabled]=\"!isAddReactiveAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ReactiveFormQuickListCompactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-reactive-form-quick-list-compact', standalone: true, imports: [
-                        NgFor,
-                        NgIf,
-                        NgTemplateOutlet,
-                        IconButtonComponent,
-                        MatIconModule,
-                        LinkButtonComponent,
-                    ], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button data-cy=\"add-first-item-button\" *ngIf=\"!readonly && !this.formArray?.controls.length\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n" }]
+            args: [{ selector: 'mad-reactive-form-quick-list-compact', standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, LinkButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.formArray?.controls.length\"\n  (click)=\"addReactiveItem()\"\n  [disabled]=\"!isAddReactiveAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
 
 class QuickListModule {
@@ -2053,9 +2032,10 @@ class DataTableSortUtil {
             const stringY = String(y ?? '');
             // a string could be a date
             if (!!dateTimeFormat.length) {
-                const dates = dateTimeFormat.map(it => ({
+                const dates = dateTimeFormat
+                    .map((it) => ({
                     x: DateTime.fromFormat(stringX, it),
-                    y: DateTime.fromFormat(stringY, it)
+                    y: DateTime.fromFormat(stringY, it),
                 }))
                     .find(({ x, y }) => x.isValid && y.isValid);
                 if (!!dates) {
@@ -3111,7 +3091,7 @@ class DataTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", 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", 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  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n  </div>\n  <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n    <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n      >filter_alt_off</mat-icon\n    >\n  </ng-container>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\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    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\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        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n        </div>\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        <div *ngIf=\"showCheckbox(element)\" 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        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\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        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" 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        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\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        [ngSwitch]=\"column.transformer\"\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    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [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    <!-- 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)=\"onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\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<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    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\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<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\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:#fff}.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{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:#fff;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:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.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$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$3.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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.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: "pipe", type: i2$5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { 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"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", 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", 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  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n  </div>\n  <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n    <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n      >filter_alt_off</mat-icon\n    >\n  </ng-container>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\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    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\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        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n        </div>\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        <div *ngIf=\"showCheckbox(element)\" 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        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\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        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" 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        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\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        [ngSwitch]=\"column.transformer\"\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    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [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    <!-- 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)=\"onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\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<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    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\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<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\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:#fff}.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{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:#fff;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:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { 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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.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$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$3.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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.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: "pipe", type: i2$5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { 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"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -3151,7 +3131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         DataTableTemplateCellDefinition,
                         DataTableTemplateExpandableColumnDefinition,
                         DataTableTemplateExpandableCellDefinition,
-                    ], 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  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n  </div>\n  <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n    <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n      >filter_alt_off</mat-icon\n    >\n  </ng-container>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\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    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\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        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n        </div>\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        <div *ngIf=\"showCheckbox(element)\" 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        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\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        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" 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        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\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        [ngSwitch]=\"column.transformer\"\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    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [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    <!-- 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)=\"onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\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<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    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\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<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\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:#fff}.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{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:#fff;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:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\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  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n  </div>\n  <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n    <mat-icon fontSet=\"material-icons-outlined\" class=\"delete-filter-action\" color=\"primary\" (click)=\"onDeleteFilter()\"\n      >filter_alt_off</mat-icon\n    >\n  </ng-container>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\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    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\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  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\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        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n        </div>\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        <div *ngIf=\"showCheckbox(element)\" 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        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\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        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" 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        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchCase=\"'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        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\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        [ngSwitch]=\"column.transformer\"\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    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [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    <!-- 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)=\"onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\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<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    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\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<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\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:#fff}.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{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:#fff;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:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }, { type: DataTablePersistenceService, decorators: [{
                     type: Inject,
                     args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
@@ -3908,11 +3888,11 @@ class SidebarLayoutComponent {
         this.location.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SidebarLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$8.Router }, { token: i2$4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n    <div class=\"sidebar-wrapper default-header-wrapper\">\n      <div class=\"back-and-title\">\n        <button class=\"back-button\" *ngIf=\"hasBackButton\">\n          <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n        </button>\n        <h2 class=\"title\">\n          {{ title }}\n        </h2>\n      </div>\n      <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n    </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          <button class=\"back-button\" *ngIf=\"hasBackButton\">\n            <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n          </button>\n          <h2 class=\"title\">\n            {{ title }}\n          </h2>\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-sidebar-layout', standalone: true, imports: [CommonModule, ContentPanelModule, PortalModule, MatIconModule, RouterModule], template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n    <div class=\"sidebar-wrapper default-header-wrapper\">\n      <div class=\"back-and-title\">\n        <button class=\"back-button\" *ngIf=\"hasBackButton\">\n          <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n        </button>\n        <h2 class=\"title\">\n          {{ title }}\n        </h2>\n      </div>\n      <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n    </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"] }]
+            args: [{ selector: 'mad-sidebar-layout', standalone: true, imports: [CommonModule, ContentPanelModule, PortalModule, MatIconModule, RouterModule], template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          <button class=\"back-button\" *ngIf=\"hasBackButton\">\n            <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n          </button>\n          <h2 class=\"title\">\n            {{ title }}\n          </h2>\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$8.Router }, { type: i2$4.Location }], propDecorators: { title: [{
                 type: Input
             }], hasBackButton: [{
@@ -4102,7 +4082,7 @@ class ToolbarComponent {
         return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$9.BreakpointObserver }, { token: i2$6.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.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$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.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$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -4120,7 +4100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         MatBadgeModule,
                         MatMenuModule,
                         AsyncPipe,
-                    ], template: "<mat-toolbar class=\"content-toolbar\">\n  <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"] }]
+                    ], template: "<mat-toolbar class=\"content-toolbar\">\n  <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$9.BreakpointObserver }, { type: i2$6.Title }, { type: ToolbarService }] });
 
 class ToolbarModule {
@@ -4332,16 +4312,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 
 const VERSION = '17.3.4';
 
+const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
+    providedIn: 'root',
+    factory: MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY,
+});
+function MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY() {
+    return {
+        size: 'medium',
+        type: 'info',
+    };
+}
+
 class AlertComponent {
-    constructor() {
-        this.type = 'info';
-        this.message = '';
-        this.size = 'medium';
-        this.actionText = '';
-        this.closeable = true;
-        this.close = new EventEmitter();
-        this.action = new EventEmitter();
-    }
     get icon() {
         switch (this.type) {
             case 'success':
@@ -4356,19 +4338,32 @@ class AlertComponent {
                 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();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", 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\"><mat-icon>{{ icon }}</mat-icon></span>\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"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  </ng-container>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AlertComponent, deps: [{ token: MAD_ALERT_DEFAULT_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", 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  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"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  </ng-container>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-alert', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule], template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"><mat-icon>{{ icon }}</mat-icon></span>\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"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  </ng-container>\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"] }]
-        }], propDecorators: { type: [{
+            args: [{ selector: 'mad-alert', standalone: true, 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  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"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  </ng-container>\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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAD_ALERT_DEFAULT_CONFIGURATION]
+                }] }], propDecorators: { type: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -4392,5 +4387,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
+export { AlertComponent, BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
 //# sourceMappingURL=porscheinformatik-material-addons.mjs.map