@porscheinformatik/material-addons 17.1.2 → 17.2.0

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule, HostBinding, ElementRef, ViewChild, Directive, Optional, LOCALE_ID, Injectable, Inject, EventEmitter, Output, forwardRef, HostListener, TemplateRef, ContentChild, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, QueryList, ContentChildren } from '@angular/core';
+import { Component, Input, NgModule, HostBinding, ElementRef, ViewChild, Directive, Optional, LOCALE_ID, Injectable, Inject, EventEmitter, Output, forwardRef, HostListener, TemplateRef, ContentChild, ViewChildren, InjectionToken, SkipSelf, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, QueryList } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/router';
@@ -16,13 +16,13 @@ import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i5$1 from '@angular/cdk/text-field';
 import * as i1$2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
 import { style, animate, transition, trigger, state } from '@angular/animations';
 import * as i2$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { Subject, Subscription, of } from 'rxjs';
 import { throttleTime, map, tap, startWith, switchMap, takeUntil, distinctUntilChanged } from 'rxjs/operators';
-import * as i8 from '@angular/material/table';
+import * as i9 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i6$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -32,29 +32,35 @@ import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1$3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i10 from '@angular/cdk/drag-drop';
+import * as i3$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { SelectionModel } from '@angular/cdk/collections';
+import { DateTime } from 'luxon';
 import { v4 } from 'uuid';
-import * as i10$1 from '@angular/material/progress-spinner';
+import * as i10 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i13 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i14 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
+import * as i15 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i16 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5$2 from '@angular/material/core';
 import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import * as i1$4 from '@angular/cdk/a11y';
-import * as i3$2 from '@angular/cdk/bidi';
+import * as i3$3 from '@angular/cdk/bidi';
 import * as i2$3 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import * as i1$5 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i2$4 from '@angular/platform-browser';
-import * as i8$1 from '@angular/material/toolbar';
+import * as i8 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i4$1 from '@angular/material/chips';
+import * as i4$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
 class MaterialActionButtonComponent {
@@ -522,6 +528,7 @@ class ReadOnlyFormFieldComponent {
         this.changeDetector = changeDetector;
         this.renderer = renderer;
         this.numberFormatService = numberFormatService;
+        this.useProjectedContent = false;
         this.textAlign = 'left';
         this.formatNumber = false;
         this.decimalPlaces = 2;
@@ -622,14 +629,17 @@ class ReadOnlyFormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: NumberFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: { value: "value", label: "label", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", multiline: "multiline", rows: "rows", id: "id", shrinkIfEmpty: "shrinkIfEmpty", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign + ' content'\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline content\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    [cdkTextareaAutosize]=\"multilineAutoSize\"\n  ></textarea>\n  <mat-error>{{ errorMessage }}</mat-error>\n  <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix }}</mat-icon>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: { useProjectedContent: "useProjectedContent", value: "value", label: "label", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", multiline: "multiline", rows: "rows", id: "id", shrinkIfEmpty: "shrinkIfEmpty", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign + ' content'\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    [disabled]=\"!useProjectedContent\"\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline content\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    [disabled]=\"!useProjectedContent\"\n    matInput\n    [cdkTextareaAutosize]=\"multilineAutoSize\"\n  ></textarea>\n  <ng-content *ngIf=\"useProjectedContent\" />\n  <mat-error>{{ errorMessage }}</mat-error>\n  <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix }}</mat-icon>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign + ' content'\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline content\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    [cdkTextareaAutosize]=\"multilineAutoSize\"\n  ></textarea>\n  <mat-error>{{ errorMessage }}</mat-error>\n  <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix }}</mat-icon>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"] }]
+            args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign + ' content'\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    [disabled]=\"!useProjectedContent\"\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [ngStyle]=\"{ display: useProjectedContent ? 'none' : 'block' }\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline content\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    [disabled]=\"!useProjectedContent\"\n    matInput\n    [cdkTextareaAutosize]=\"multilineAutoSize\"\n  ></textarea>\n  <ng-content *ngIf=\"useProjectedContent\" />\n  <mat-error>{{ errorMessage }}</mat-error>\n  <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix }}</mat-icon>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: NumberFormatService }], propDecorators: { originalContent: [{
                 type: ViewChild,
                 args: ['contentWrapper', { static: false }]
+            }], useProjectedContent: [{
+                type: Input,
+                args: ['useProjectedContent']
             }], value: [{
                 type: Input,
                 args: ['value']
@@ -822,7 +832,7 @@ class ReadOnlyFormFieldWrapperComponent {
         return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldWrapperComponent, 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\">\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      matTooltip=\"{{ toolTipText }}\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldWrapperComponent, 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\">\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      matTooltip=\"{{ toolTipText }}\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
             type: Component,
@@ -1276,7 +1286,7 @@ class CardComponent {
         this.additionalAction.emit(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: CardComponent, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header class=\"header\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div class=\"top-right-icons\">\n        <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n          <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n          <mat-icon>{{ additionalActionIcon }}</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n          <mat-icon>create</mat-icon>\n        </mad-icon-button>\n      </div>\n    </mat-card-title-group>\n  </mat-card-header>\n  <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"!readonly && editMode\">\n    <mad-primary-button data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$1.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "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: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: CardComponent, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header class=\"header\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div class=\"top-right-icons\">\n        <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n          <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button\n          data-testid=\"additional-btn\"\n          (click)=\"additionalActionClicked()\"\n          *ngIf=\"additionalActionIcon\"\n          [title]=\"additionalActionText\"\n          type=\"button\"\n        >\n          <mat-icon>{{ additionalActionIcon }}</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n          <mat-icon>create</mat-icon>\n        </mad-icon-button>\n      </div>\n    </mat-card-title-group>\n  </mat-card-header>\n  <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"!readonly && editMode\">\n    <mad-primary-button data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$1.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "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: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }], animations: [
             trigger('collapseExpandAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0, overflow: 'hidden' }),
@@ -1326,7 +1336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                             transition('true => false', animate('100ms ease-out')),
                             transition('false => true', animate('100ms ease-in')),
                         ]),
-                    ], template: "<mat-card>\n  <mat-card-header class=\"header\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div class=\"top-right-icons\">\n        <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n          <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button data-testid=\"additional-btn\" (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n          <mat-icon>{{ additionalActionIcon }}</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n          <mat-icon>create</mat-icon>\n        </mad-icon-button>\n      </div>\n    </mat-card-title-group>\n  </mat-card-header>\n  <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"!readonly && editMode\">\n    <mad-primary-button data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"] }]
+                    ], template: "<mat-card>\n  <mat-card-header class=\"header\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div class=\"top-right-icons\">\n        <mad-icon-button data-testid=\"collapse-btn\" (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n          <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button\n          data-testid=\"additional-btn\"\n          (click)=\"additionalActionClicked()\"\n          *ngIf=\"additionalActionIcon\"\n          [title]=\"additionalActionText\"\n          type=\"button\"\n        >\n          <mat-icon>{{ additionalActionIcon }}</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button data-testid=\"edit-btn\" [title]=\"editText\" (click)=\"onEdit()\" *ngIf=\"!readonly && !editMode\">\n          <mat-icon>create</mat-icon>\n        </mad-icon-button>\n      </div>\n    </mat-card-title-group>\n  </mat-card-header>\n  <mat-card-content [@collapseExpandAnimation] *ngIf=\"expanded\">\n    <ng-content></ng-content>\n  </mat-card-content>\n  <mat-card-actions *ngIf=\"!readonly && editMode\">\n    <mad-primary-button data-testid=\"save-btn\" [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button data-testid=\"cancel-btn\" [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"] }]
         }], propDecorators: { cancelDisabled: [{
                 type: Input
             }], cancelText: [{
@@ -1675,7 +1685,7 @@ class TableComponent {
         return event?.target?.classList.contains('mat-icon');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableComponent, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\" sticky>\n      <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n</div>\n<!-- Pagination -->\n<mat-paginator\n  [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n  [pageSize]=\"defaultPageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableComponent, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\" sticky>\n      <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n</div>\n<!-- Pagination -->\n<mat-paginator\n  [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n  [pageSize]=\"defaultPageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: ["sticky", "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: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1836,11 +1846,11 @@ class DataTableColumnsModalComponent {
         this.filteredAvailableColumns = [...this.availableColumns];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableColumnsModalComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableColumnsModalComponent, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div class=\"column-drag-box\" *ngFor=\"let selectedColumn of selectedColumns; let i = index\" cdkDrag [id]=\"selectedColumn.id\">\n          {{ i + 1 }}. {{ selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n          <input\n            matInput\n            autocomplete=\"off\"\n            (keyup)=\"updateFilterValue()\"\n            placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{ availableColumn.label }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data?.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data?.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n    {{ data?.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: DangerButtonComponent, selector: "mad-danger-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableColumnsModalComponent, isStandalone: true, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div class=\"column-drag-box\" *ngFor=\"let selectedColumn of selectedColumns; let i = index\" cdkDrag [id]=\"selectedColumn.id\">\n          {{ i + 1 }}. {{ selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data.filterColumnsLabel | translate }}</mat-label>\n          <input\n            matInput\n            autocomplete=\"off\"\n            (keyup)=\"updateFilterValue()\"\n            placeholder=\"{{ data.filterColumnsPlaceHolder | translate }}\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{ availableColumn.label }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!((this.selectedColumns.length || 0) > 0)\">\n    {{ data.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: DangerButtonComponent, selector: "mad-danger-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableColumnsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-data-table-columns-modal.component', template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div class=\"column-drag-box\" *ngFor=\"let selectedColumn of selectedColumns; let i = index\" cdkDrag [id]=\"selectedColumn.id\">\n          {{ i + 1 }}. {{ selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n          <input\n            matInput\n            autocomplete=\"off\"\n            (keyup)=\"updateFilterValue()\"\n            placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{ availableColumn.label }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data?.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data?.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n    {{ data?.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'mad-data-table-columns-modal.component', standalone: true, imports: [CommonModule, DragDropModule, MatFormFieldModule, MatIconModule, FormsModule, ButtonModule, TranslateModule], template: "<h1 mat-dialog-title>{{ data.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div class=\"column-drag-box\" *ngFor=\"let selectedColumn of selectedColumns; let i = index\" cdkDrag [id]=\"selectedColumn.id\">\n          {{ i + 1 }}. {{ selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data.filterColumnsLabel | translate }}</mat-label>\n          <input\n            matInput\n            autocomplete=\"off\"\n            (keyup)=\"updateFilterValue()\"\n            placeholder=\"{{ data.filterColumnsPlaceHolder | translate }}\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{ availableColumn.label }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!((this.selectedColumns.length || 0) > 0)\">\n    {{ data.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1852,140 +1862,77 @@ class DataTableActionType {
     static { this.NONE = 'NONE'; }
 }
 
-class DataTableComponent {
-    set filterValue(filterValue) {
-        const filterString = '' + filterValue;
-        if (this.dataSource) {
-            this.setFilterValue(filterString);
-        }
-    }
-    set displayedColumns(cols) {
-        if (!this.displayedColumnDefinition) {
-            this.columns = cols ? [...cols] : [];
-            this.columnIds = this.columns.map((column) => column.id);
-            this.columnIds.unshift(this.ACTION_COLUMN_NAME);
-        }
+class DataTableFilter {
+    constructor() {
+        this.filterChange = new EventEmitter();
+        this.filterables = new Map();
     }
-    set displayedColumnDefinition(def) {
-        this.selectedColumnDefinion = def;
-        this.columns = def.displayedColumns;
-        this.columnIds = this.columns.map((column) => column.id);
-        this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+    register(filterable) {
+        this.filterables.set(filterable.id, filterable);
     }
-    set tableData(data) {
-        const dataArray = data ? data : [];
-        if (!this.dataSource) {
-            this.dataSource = new MatTableDataSource(dataArray);
-        }
-        this.createDataMapsAndSetDisplayedDataSourceData(dataArray);
+    unregister(filterable) {
+        this.filterables.delete(filterable.id);
     }
-    set page(page) {
-        this.paginatorPageIndex = page.pageIndex;
-        this.paginatorPageSize = page.pageSize;
-        this.paginatorLength = page.length;
+    changeFilter() {
+        this.filterChange.emit(this.createFilter());
     }
-    set columnDefinitions(definitions) {
-        this.editableColumnDefinitions = [];
-        this.viewableColumnDefinitions = [];
-        this.allColumnDefinitions = [...definitions];
-        for (const definition of definitions) {
-            if (definition.editable) {
-                this.editableColumnDefinitions.push(definition);
-            }
-            if (definition.displayedColumns?.length > 0) {
-                this.viewableColumnDefinitions.push(definition);
-            }
+    updateFilterables(dataTableFilterObject) {
+        if (!!dataTableFilterObject) {
+            Object.entries(dataTableFilterObject).forEach(([key, value]) => {
+                const filterable = this.filterables.get(key);
+                if (!!filterable) {
+                    filterable.filterValue = value;
+                }
+            });
         }
-    }
-    set loading(isLoading) {
-        this.isLoading = isLoading;
-    }
-    set defaultPageSize(defaultSize) {
-        this.paginatorPageSize = defaultSize;
-    }
-    set externalPaginator(paginator) {
-        this.extPaginator = paginator;
-    }
-    set paginationEnabled(isPaginationEnabled) {
-        this.isPaginationEnabled = isPaginationEnabled;
-        this.unsetPageSizeIfNecessary();
-    }
-    set allColumns(allColumns) {
-        this.allAvailableColumns = allColumns;
-        if (allColumns && this.showColumnModal) {
-            this.openColumnModal();
+        else {
+            this.filterables.forEach((value) => (value.filterValue = null));
         }
     }
-    set filterEnabled(isFilterEnabled) {
-        this.isFilterEnabled = !this.useAsync ? isFilterEnabled : false;
-        this.setFilterValue(undefined);
+    createFilter() {
+        return Array.from(this.filterables.values()).reduce((result, current) => ({ ...result, [current.id]: current.filterValue }), {});
     }
-    set forceMode(mode) {
-        if (mode === this.SINGLE || mode === this.BATCH || mode === this.NONE) {
-            this._forceMode = mode;
-            this.mode = mode;
-            this.selectionModel.clear();
-            this.setActions();
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DataTableFilter, isStandalone: true, selector: "[madFilter]", outputs: { filterChange: "madFilterChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableFilter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madFilter]',
+                    standalone: true,
+                }]
+        }], propDecorators: { filterChange: [{
+                type: Output,
+                args: ['madFilterChange']
+            }] } });
+
+class DataTableSortUtil {
+    static sortData(format) {
+        return (tableData, matSort) => [...tableData].sort((a, b) => DataTableSortUtil.compare(a, b, matSort, format));
     }
-    constructor(matDialog) {
-        this.matDialog = matDialog;
-        // Translations
-        this.filterLabel = 'Filter';
-        this.filterPlaceholder = '';
-        this.filterColumnsLabel = 'Filter';
-        this.filterColumnsPlaceHolder = 'Filter available columns';
-        this.noDataText = 'No matching data found';
-        this.columnSettingsModalTitleLabel = 'Column settings';
-        this.selectedLabel = 'Selected columns';
-        this.availableLabel = 'Available columns';
-        this.saveLabel = 'Save';
-        this.deleteLabel = 'Delete';
-        this.cancelLabel = 'Cancel';
-        this.infoTextLabel = 'Drag and drop a column to select or reorder it.';
-        this.pageSizeOptions = [5, 10, 15];
-        this.actions = [];
-        this.deleteDefinitionAllowed = false;
-        this.useAsync = false;
-        this.translateLabels = true;
-        this.sortEvent = new EventEmitter();
-        this.actionEvent = new EventEmitter();
-        this.pageEvent = new EventEmitter();
-        this.allColumnsEvent = new EventEmitter();
-        this.columnDefinitionChangeEvent = new EventEmitter();
-        this.viewDefinitionChangeEvent = new EventEmitter();
-        this.ACTION_COLUMN_NAME = '__action__';
-        this.SINGLE = DataTableActionType.SINGLE;
-        this.BATCH = DataTableActionType.BATCH;
-        this.NONE = DataTableActionType.NONE;
-        this.tableActions = [];
-        this.rowActions = [];
-        this.columns = [];
-        this.allSelected = false;
-        this.rowMap = new Map();
-        this.selectionModel = new SelectionModel(true);
-        this.allColumnDefinitions = [];
-        this.isFilterEnabled = false;
-        this.isPaginationEnabled = false;
-        this.mode = this.NONE;
-        this.isRowClickable = false;
-        this.showColumnModal = false;
-        this.isLoading = false;
-        this.paginatorLength = 0;
-        this.paginatorPageIndex = 0;
-        this.paginatorPageSize = 50;
-    }
-    static compare(a, b, sort) {
+    static sortNothing() {
+        return (tableData, _) => tableData;
+    }
+    static compare(a, b, sort, format) {
         const x = a[sort.active];
         const y = b[sort.active];
         const ascending = sort.direction === 'asc';
         switch (typeof x) {
             case 'number':
-                return DataTableComponent.compareNumber(x, y, ascending);
-            case 'string':
-                return DataTableComponent.compareString(x, y, ascending);
+                if (typeof y !== 'number') {
+                    return DataTableSortUtil.compareString(String(x), y, ascending);
+                }
+                return DataTableSortUtil.compareNumber(x, y, ascending);
+            case 'string': {
+                const stringY = String(y);
+                const dateX = DateTime.fromFormat(x, format);
+                const dateY = DateTime.fromFormat(stringY, format);
+                return dateX.isValid && dateY.isValid
+                    ? DataTableSortUtil.compareDate(dateX, dateY, ascending)
+                    : DataTableSortUtil.compareString(x, stringY, ascending);
+            }
             case 'boolean':
-                return DataTableComponent.compareBoolean(x, y, ascending);
+                return DataTableSortUtil.compareBoolean(x, y, ascending);
             default:
                 // cannot compare -> return equal
                 return 0;
@@ -1994,6 +1941,9 @@ class DataTableComponent {
     static compareNumber(x, y, ascending) {
         return ascending ? x - y : y - x;
     }
+    static compareDate(x, y, ascending) {
+        return DataTableSortUtil.compareNumber(+x, +y, ascending);
+    }
     static compareString(x, y, ascending) {
         return ascending ? x.localeCompare(y) : y.localeCompare(x);
     }
@@ -2010,267 +1960,1015 @@ class DataTableComponent {
             return x ? 1 : -1;
         }
     }
+}
+
+class DataTableActionUtil {
+    static getDisplayActions(actions, selectionMode) {
+        const rowActions = [];
+        const tableActions = [];
+        for (const action of actions) {
+            if (selectionMode !== action.hiddenInMode) {
+                switch (action.type) {
+                    case 'SINGLE':
+                        if (selectionMode === 'SINGLE') {
+                            rowActions.push(action);
+                        }
+                        else {
+                            tableActions.push(action);
+                        }
+                        break;
+                    case 'BATCH':
+                        if (selectionMode !== 'SINGLE') {
+                            tableActions.push(action);
+                        }
+                        break;
+                    default:
+                        tableActions.push(action);
+                }
+            }
+        }
+        return {
+            rowActions: rowActions,
+            groupedTableActions: DataTableActionUtil.getGroupedTableActions(tableActions),
+        };
+    }
+    static getGroupedTableActions(tableActions) {
+        return Object.values(tableActions.reduce((result, current) => {
+            const index = Object.entries(result).findIndex(([, actions]) => actions.find((it) => !!current.groupId && it.groupId === current.groupId));
+            const key = index !== -1 ? index : Object.keys(result).length || 0;
+            (result[key] = result[key] || []).push(current);
+            return result;
+        }, {}));
+    }
+}
+
+class DataTableDataUtil {
+    static updateRowMap(rowMap, data, columns, idGenerator, parentIdGenerator) {
+        rowMap.clear();
+        data?.forEach((it) => {
+            const rowId = DataTableDataUtil.createRowId(it, idGenerator);
+            const dataRow = DataTableDataUtil.createDataTableRow(it, rowId, parentIdGenerator, columns);
+            rowMap.set(rowId, dataRow);
+        });
+        return rowMap;
+    }
+    static createRowId(data, idGenerator) {
+        let id;
+        if (!!idGenerator) {
+            id = idGenerator(data);
+        }
+        return (!!id ? id : v4()).toString();
+    }
+    static createDataTableRow(data, rowId, parentIdGenerator, columns) {
+        const parentId = parentIdGenerator ? parentIdGenerator(data) : undefined;
+        const displayedData = DataTableDataUtil.createDisplayedData(rowId, parentId, data, columns);
+        const dataRow = {
+            id: rowId,
+            parentId: parentId,
+            actualData: data,
+            displayedData: displayedData,
+        };
+        return dataRow;
+    }
+    static createDisplayedData(rowId, parentId, actualDataElement, columns) {
+        const displayedData = {};
+        displayedData['rowId'] = rowId;
+        displayedData['parentId'] = parentId;
+        // keep non displayed data in row
+        for (const key of Object.keys(actualDataElement)) {
+            const column = columns.find((it) => it.dataPropertyName === key);
+            const actualValue = actualDataElement[key];
+            displayedData[key] = DataTableDataUtil.transformData(actualValue, column?.transformer, column?.transformerParams);
+        }
+        return displayedData;
+    }
     static transformData(value, transformer, transformerParams) {
         if (!transformer || !(transformer instanceof Function)) {
             return value;
         }
         return transformer(value, transformerParams);
     }
-    static generateRowId() {
-        return v4();
+}
+
+class DataTableFilterUtil {
+    static columnBasedFilterPredicate(rowMap) {
+        return (row, filterString) => {
+            const actualData = rowMap.get(row.rowId)?.actualData;
+            const displayedData = row;
+            const filters = JSON.parse(filterString);
+            return Object.entries(filters).every(([key, value]) => !value || this.contains(actualData, key, value) || this.contains(displayedData, key, value));
+        };
     }
-    static isClickOnRowMenuIcon(event) {
-        return event?.target?.classList.contains('mat-icon');
+    static tableBasedFilterPredicate() {
+        return (data, filter) => {
+            const transform = (str) => str
+                .trim()
+                .toLowerCase()
+                .replace(/^"(.*)"$/, '$1');
+            const dataStr = transform(JSON.stringify(data));
+            return dataStr.indexOf(transform(filter)) != -1;
+        };
     }
-    ngOnInit() {
-        this.mode = this.getTableMode();
-        this.setActions();
-        if (this.mode !== this.NONE) {
-            this.isRowClickable = true;
-            this.defaultAction = this.rowActions[0];
-        }
+    static contains(data, key, searchTerm) {
+        return (String(data[key]) ?? '').toLowerCase().includes(searchTerm.toLowerCase());
     }
-    ngAfterViewInit() {
-        if (!this.useAsync) {
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort;
-        }
+}
+
+class DataTablePersistenceService {
+    constructor() {
+        this.sortKey = 'sort';
+        this.filterKey = 'filter';
+        this.pageSizeKey = 'pageSize';
     }
-    onColumnSettings(definition) {
-        this.showColumnModal = true;
-        this.selectedDefinition = definition ? definition : this.allColumnDefinitions[0];
-        if (this.allAvailableColumns) {
-            this.openColumnModal();
+    saveSort(tableId, sort) {
+        this.save(this.getId(tableId, this.sortKey), sort);
+    }
+    loadSort(tableId) {
+        return this.load(this.getId(tableId, this.sortKey));
+    }
+    saveFilter(tableId, filter) {
+        this.save(this.getId(tableId, this.filterKey), filter);
+    }
+    loadFilter(tableId) {
+        return this.load(this.getId(tableId, this.filterKey));
+    }
+    savePageSize(tableId, pageSize) {
+        this.save(this.getId(tableId, this.pageSizeKey), pageSize);
+    }
+    loadPageSize(tableId) {
+        return this.load(this.getId(tableId, this.pageSizeKey));
+    }
+    save(id, item) {
+        if (!!item) {
+            localStorage.setItem(id, JSON.stringify(item));
         }
         else {
-            // if no complete definitions have been loaded yet send an event so the app can load it
-            this.allColumnsEvent.emit();
+            localStorage.removeItem(id);
         }
     }
-    onViewDefinition(definition) {
-        this.selectedDefinition = definition;
-        this.viewDefinitionChangeEvent.emit(definition);
+    load(id) {
+        const item = localStorage.getItem(id);
+        return !!item ? JSON.parse(item) : undefined;
     }
-    isCurrentDefinition(definition) {
-        return this.selectedDefinition && this.selectedDefinition.id === definition.id;
+    getId(tableId, key) {
+        return `${tableId}.${key}`;
     }
-    get selectedCount() {
-        return this.selectionModel?.selected ? this.selectionModel.selected.length : 0;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTablePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTablePersistenceService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTablePersistenceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+const MAD_DATA_TABLE_PERSISTENCE_SERVICE = new InjectionToken('mad-data-table-persistence-service');
+function DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER_FACTORY(persistenceService) {
+    return persistenceService || new DataTablePersistenceService();
+}
+const DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER = {
+    // If there is a custom DataTablePersistenceService available, use that. Otherwise, provide the "local storage" default one.
+    provide: MAD_DATA_TABLE_PERSISTENCE_SERVICE,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MAD_DATA_TABLE_PERSISTENCE_SERVICE)]],
+    useFactory: DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER_FACTORY,
+};
+
+const MAD_DATA_TABLE_GLOBAL_CONFIGURATION = new InjectionToken('mad-data-table-global-configuration');
+// If there is a custom DATA_TABLE_CONFIG_PROVIDER available, use that. Otherwise, provide the default one.
+const MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER = {
+    provide: MAD_DATA_TABLE_GLOBAL_CONFIGURATION,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MAD_DATA_TABLE_GLOBAL_CONFIGURATION)]],
+    useFactory: (dataTableConfig) => dataTableConfig ?? {
+        dateTimeFormat: 'dd.MM.yyyy',
+    },
+};
+
+class DataTableFilterDialogComponent {
+    set filterValue(value) {
+        this.control.setValue(value);
     }
-    get rowCount() {
-        return this.getAllDataSourceRowsOfCurrentPage() ? this.getAllDataSourceRowsOfCurrentPage().length : 0;
+    constructor() {
+        this.filterChanged = new EventEmitter();
+        this.control = new FormControl(null);
+        this._subscription = new Subscription();
+        this._subscription.add(this.control.valueChanges.subscribe((value) => this.filterChanged.emit(value)));
     }
-    getAllDataSourceRowsOfCurrentPage() {
-        return this.dataSource?._pageData(this.dataSource.data);
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
     }
-    getSelectedCount(actionType) {
-        const count = this.selectedCount;
-        if (actionType !== this.BATCH || count < 2) {
-            return '';
-        }
-        return ' (' + count + ')';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableFilterDialogComponent, isStandalone: true, selector: "mad-data-table-filter-dialog", inputs: { filterOptions: "filterOptions", filterValue: "filterValue" }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"filter-dialog-box\">\n  <ng-container *ngIf=\"!filterOptions?.length; else selectInput\">\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <input matInput type=\"text\" required=\"false\" [formControl]=\"control\" />\n    </mat-form-field>\n  </ng-container>\n</div>\n\n<ng-template #selectInput>\n  <mat-form-field class=\"filter-dialog-input\">\n    <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n    <mat-select [formControl]=\"control\">\n      <mat-option></mat-option>\n      <mat-option *ngFor=\"let entry of filterOptions\" [value]=\"entry.key\">{{ entry.label }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</ng-template>\n", styles: [".container{position:relative;width:12px;height:12px;margin:5px 0 5px 5px}.overlay{position:absolute;width:12px;height:12px;background-color:#fff;display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:#757575}.filter-dialog-box{display:flex;align-items:center;width:auto;height:80px;padding:12px 12px 0;margin-top:22px;background-color:#fff;box-shadow:0 1px 3px #0000000d}.filter-dialog-input{width:auto;max-width:180px;margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableFilterDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-data-table-filter-dialog', standalone: true, imports: [CommonModule, MatFormFieldModule, MatInputModule, MatSelectModule, FormsModule, ReactiveFormsModule, TranslateModule], template: "<div class=\"filter-dialog-box\">\n  <ng-container *ngIf=\"!filterOptions?.length; else selectInput\">\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <input matInput type=\"text\" required=\"false\" [formControl]=\"control\" />\n    </mat-form-field>\n  </ng-container>\n</div>\n\n<ng-template #selectInput>\n  <mat-form-field class=\"filter-dialog-input\">\n    <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n    <mat-select [formControl]=\"control\">\n      <mat-option></mat-option>\n      <mat-option *ngFor=\"let entry of filterOptions\" [value]=\"entry.key\">{{ entry.label }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</ng-template>\n", styles: [".container{position:relative;width:12px;height:12px;margin:5px 0 5px 5px}.overlay{position:absolute;width:12px;height:12px;background-color:#fff;display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:#757575}.filter-dialog-box{display:flex;align-items:center;width:auto;height:80px;padding:12px 12px 0;margin-top:22px;background-color:#fff;box-shadow:0 1px 3px #0000000d}.filter-dialog-input{width:auto;max-width:180px;margin:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filterOptions: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }], filterChanged: [{
+                type: Output
+            }] } });
+
+class FilterComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.filterValueChange = new EventEmitter();
     }
-    isDisabled(actionType) {
-        switch (actionType) {
-            case this.SINGLE:
-                return this.selectedCount !== 1;
-            case this.BATCH:
-                return this.selectedCount < 1;
-            default:
-                return false;
-        }
+    toggleFilter(event) {
+        event.preventDefault();
+        this.showFilterDialog = !this.showFilterDialog;
     }
-    onToggleSelectAll() {
-        // clear all selection first
-        this.selectionModel.clear();
-        // toggle all checkbox
-        this.allSelected = !this.allSelected;
-        if (this.allSelected) {
-            // select all rows of the current page
-            this.getAllDataSourceRowsOfCurrentPage().forEach((row) => {
-                if (!row.parentId) {
-                    this.selectionModel.select('' + row.rowId);
-                }
-            });
+    onFilterChanged(filterValue) {
+        this.isActive = !!filterValue;
+        this.filterValue = filterValue;
+        this.filterValueChange.emit(this.filterValue);
+    }
+    onClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.showFilterDialog = false;
         }
     }
-    isSelected(rowId) {
-        return this.selectionModel.isSelected(rowId);
+    get opacity() {
+        return this.isActive ? '1' : this.isHovered || this.showFilterDialog ? '0.54' : '0';
     }
-    setFilterValue(value) {
-        if (this.dataSource) {
-            this.dataSource.filter = value?.trim().toLowerCase();
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FilterComponent, isStandalone: true, selector: "mad-data-table-filter", outputs: { filterValueChange: "filterValueChange" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"overlay\" [style.opacity]=\"opacity\">\n    <mat-icon fontSet=\"material-icons-outlined\" (click)=\"toggleFilter($event)\">filter_alt</mat-icon>\n  </div>\n  <mad-data-table-filter-dialog\n    class=\"filter-dialog\"\n    [filterOptions]=\"filterOptions\"\n    [hidden]=\"!showFilterDialog\"\n    [filterValue]=\"filterValue\"\n    (filterChanged)=\"onFilterChanged($event)\"\n  />\n</div>\n", styles: [".container{position:relative;width:12px;height:12px}.overlay{position:absolute;width:12px;height:12px;background-color:#fff;display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:#757575}.filter-dialog{position:absolute;margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataTableFilterDialogComponent, selector: "mad-data-table-filter-dialog", inputs: ["filterOptions", "filterValue"], outputs: ["filterChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-data-table-filter', standalone: true, imports: [CommonModule, MatIconModule, DataTableFilterDialogComponent], template: "<div class=\"container\">\n  <div class=\"overlay\" [style.opacity]=\"opacity\">\n    <mat-icon fontSet=\"material-icons-outlined\" (click)=\"toggleFilter($event)\">filter_alt</mat-icon>\n  </div>\n  <mad-data-table-filter-dialog\n    class=\"filter-dialog\"\n    [filterOptions]=\"filterOptions\"\n    [hidden]=\"!showFilterDialog\"\n    [filterValue]=\"filterValue\"\n    (filterChanged)=\"onFilterChanged($event)\"\n  />\n</div>\n", styles: [".container{position:relative;width:12px;height:12px}.overlay{position:absolute;width:12px;height:12px;background-color:#fff;display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:#757575}.filter-dialog{position:absolute;margin-top:12px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { filterValueChange: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DataTableFilterHeader {
+    set madFilterOptions(filterOptions) {
+        this._filterOptions = filterOptions || [];
     }
-    onRowEvent(event, row, action = this.defaultAction) {
-        if (row?.parentId) {
-            return;
-        }
-        switch (this.mode) {
-            case this.BATCH:
-                this.selectionModel.toggle(row.rowId);
-                break;
-            case this.SINGLE:
-                // emit the default action if the row (not the icon!) was clicked
-                if (!!action && !DataTableComponent.isClickOnRowMenuIcon(event)) {
-                    const selected = [];
-                    // if ID-generator is provided, return the ID, else return the ACTUAL data
-                    selected.push(this.idGenerator ? row.rowId : this.rowMap.get(row.rowId)?.actualData);
-                    this.emitTableAction(action, selected);
-                }
-                break;
-            default:
-                // do nothing if mode is NONE (or null)
-                return;
-        }
+    constructor(element, viewContainerRef, renderer, madFilter, matSortHeader) {
+        this.element = element;
+        this.viewContainerRef = viewContainerRef;
+        this.renderer = renderer;
+        this.madFilter = madFilter;
+        this.matSortHeader = matSortHeader;
+        this._subscription = new Subscription();
     }
-    onSortingEvent(sort) {
-        if (this.useAsync) {
-            this.sortEvent.emit(sort);
+    ngOnInit() {
+        this._filterComponent = this.viewContainerRef.createComponent(FilterComponent);
+        this._filterComponent.instance.filterOptions = this._filterOptions;
+        this._filterComponent.changeDetectorRef.detectChanges();
+        this.insertFilterComponent();
+        this.observeFilterComponent();
+    }
+    ngAfterViewInit() {
+        if (!!this.matSortHeader) {
+            const reference = this.matSortHeader._handleClick.bind(this.matSortHeader);
+            this.matSortHeader._handleClick = () => { };
+            this.findArrow(this.element.nativeElement).addEventListener('click', reference);
         }
-        else {
-            this.internalSort(sort);
+        if (!!this.madFilter) {
+            this.madFilter.register(this);
         }
     }
-    onPageEvent(event) {
-        if (this.useAsync) {
-            this.pageEvent.emit(event);
-        }
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+        this.madFilter.unregister(this);
     }
-    onTableAction(tableAction) {
-        if (!!tableAction) {
-            const selection = [];
-            for (const selected of this.selectionModel.selected) {
-                selection.push(this.idGenerator ? selected : this.rowMap.get(selected)?.actualData);
-            }
-            tableAction.selected = selection;
-            this.actionEvent.emit(tableAction);
-        }
+    observeFilterComponent() {
+        this._subscription.add(this._filterComponent.instance.filterValueChange.subscribe((value) => {
+            this._filterValue = value;
+            this.madFilter.changeFilter();
+        }));
     }
-    emitTableAction(action, selected) {
-        const emitAction = { ...action };
-        if (action.type !== this.NONE) {
-            emitAction.selected = [...selected];
-        }
-        this.actionEvent.emit(emitAction);
+    get filterValue() {
+        return this._filterValue;
     }
-    generateDisplayedDataElement(rowId, parentId, actualDataElement) {
-        const displayedDataElement = {};
-        displayedDataElement.rowId = rowId;
-        displayedDataElement.parentId = parentId;
-        for (const column of this.columns) {
-            const actualValue = actualDataElement[column.dataPropertyName];
-            displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
-        }
-        return displayedDataElement;
+    set filterValue(filterValue) {
+        this._filterComponent.instance.filterValue = filterValue;
+        this._filterComponent.changeDetectorRef.detectChanges();
     }
-    internalSort(sort) {
-        const sortedData = [...this.dataSource.data].sort((a, b) => DataTableComponent.compare(a, b, sort));
-        this.dataSource.data = [...sortedData];
+    onMouseenter() {
+        this._filterComponent.instance.isHovered = true;
     }
-    setActions() {
-        this.rowActions = [];
-        this.tableActions = [];
-        for (const action of this.actions) {
-            if (this.mode !== action.hiddenInMode) {
-                switch (action.type) {
-                    case this.SINGLE:
-                        if (this.mode === this.SINGLE) {
-                            this.rowActions.push(action);
-                        }
-                        else {
-                            this.tableActions.push(action);
-                        }
-                        break;
-                    case this.BATCH:
-                        if (this.mode !== this.SINGLE) {
-                            this.tableActions.push(action);
-                        }
-                        break;
-                    default:
-                        this.tableActions.push(action);
-                }
-            }
-        }
+    onMouseleave() {
+        this._filterComponent.instance.isHovered = false;
     }
-    createDataMapsAndSetDisplayedDataSourceData(data) {
-        const displayedDataList = [];
-        this.rowMap.clear();
-        if (data?.length > 0) {
-            for (const dataEntry of data) {
-                const rowId = this.idGenerator ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
-                const parentId = this.parentIdGenerator ? this.parentIdGenerator(dataEntry) : undefined;
-                const displayedDataElement = this.generateDisplayedDataElement(rowId, parentId, dataEntry);
-                const dataRow = {
-                    id: rowId,
-                    parentId: parentId,
-                    actualData: dataEntry,
-                    displayedData: displayedDataElement,
-                };
-                this.rowMap.set(rowId, dataRow);
-                displayedDataList.push(displayedDataElement);
+    insertFilterComponent() {
+        const componentNativeElement = this._filterComponent.location.nativeElement;
+        const div = this.getWrappedHeader();
+        if (!!this.matSortHeader) {
+            const sortHeader = div.firstChild;
+            this.renderer.insertBefore(sortHeader, componentNativeElement, sortHeader.firstChild.nextSibling);
+        }
+        else {
+            this.renderer.appendChild(div, componentNativeElement);
+        }
+    }
+    getWrappedHeader() {
+        const headerContent = this.element.nativeElement.firstChild;
+        this.renderer.removeChild(this.element.nativeElement, headerContent);
+        const div = this.renderer.createElement('div');
+        this.renderer.setStyle(div, 'display', 'flex');
+        this.renderer.setStyle(div, 'align-items', 'center');
+        if (this.madFilterColumnRightAligned) {
+            this.renderer.setStyle(div, 'justify-content', 'flex-end');
+            this.renderer.setStyle(headerContent.firstChild, 'justify-content', 'flex-end');
+        }
+        this.renderer.appendChild(div, headerContent);
+        this.renderer.appendChild(this.element.nativeElement, div);
+        return div;
+    }
+    findArrow(element) {
+        return this.isArrowElement(element) ? element : this.findArrowInList(element.children);
+    }
+    findArrowInList(nativeElements) {
+        for (let nativeElement of Array.from(nativeElements)) {
+            const foundElement = this.findArrow(nativeElement);
+            if (!!foundElement) {
+                return foundElement;
             }
         }
-        this.dataSource.data = displayedDataList;
-        this.unsetPageSizeIfNecessary();
+        return null;
     }
-    openColumnModal() {
-        const dialogData = {
-            allColumns: this.allAvailableColumns,
-            definition: this.selectedDefinition,
-            deleteDefinitionAllowed: this.deleteDefinitionAllowed,
-            filterColumnsLabel: this.filterColumnsLabel,
-            filterColumnsPlaceHolder: this.filterColumnsPlaceHolder,
-            noDataText: this.noDataText,
-            titleLabel: this.columnSettingsModalTitleLabel,
-            selectedLabel: this.selectedLabel,
-            availableLabel: this.availableLabel,
-            saveLabel: this.saveLabel,
-            deleteLabel: this.deleteLabel,
-            cancelLabel: this.cancelLabel,
-            infoTextLabel: this.infoTextLabel,
-        };
-        const dialog = this.matDialog.open(DataTableColumnsModalComponent, { data: dialogData });
-        dialog.afterClosed().subscribe((result) => {
-            // no event on CANCEL
-            if (result) {
-                this.columnDefinitionChangeEvent.emit(result);
+    isArrowElement(nativeElement) {
+        return nativeElement.classList.contains('mat-sort-header-arrow');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableFilterHeader, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: DataTableFilter, optional: true }, { token: i7.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DataTableFilterHeader, isStandalone: true, selector: "th[mad-filter-header]", inputs: { id: ["mad-filter-header", "id"], madFilterColumnRightAligned: "madFilterColumnRightAligned", madFilterOptions: "madFilterOptions" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableFilterHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[mad-filter-header]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: DataTableFilter, decorators: [{
+                    type: Optional
+                }] }, { type: i7.MatSortHeader, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { id: [{
+                type: Input,
+                args: ['mad-filter-header']
+            }], madFilterColumnRightAligned: [{
+                type: Input
+            }], madFilterOptions: [{
+                type: Input
+            }], onMouseenter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseleave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class DataTableTemplateColumnDefinition {
+    register(cellDef) {
+        this.cellDef = cellDef;
+    }
+    unregister() {
+        this.cellDef = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateColumnDefinition, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DataTableTemplateColumnDefinition, isStandalone: true, selector: "[madColumnDef]", inputs: { madColumnDef: "madColumnDef" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateColumnDefinition, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madColumnDef]',
+                    standalone: true,
+                }]
+        }], propDecorators: { madColumnDef: [{
+                type: Input
+            }] } });
+
+class DataTableTemplateCellDefinition {
+    constructor(templateRef, columnDef) {
+        this.templateRef = templateRef;
+        this.columnDef = columnDef;
+    }
+    ngOnInit() {
+        this.columnDef.register(this);
+    }
+    ngOnDestroy() {
+        this.columnDef.unregister();
+    }
+    getCellTemplate() {
+        return this.templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateCellDefinition, deps: [{ token: i0.TemplateRef }, { token: DataTableTemplateColumnDefinition }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DataTableTemplateCellDefinition, isStandalone: true, selector: "[madCellDef]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateCellDefinition, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madCellDef]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: DataTableTemplateColumnDefinition }] });
+
+class DataTableTemplateExpandableColumnDefinition {
+    register(cellDef) {
+        this.cellDef = cellDef;
+    }
+    unregister() {
+        this.cellDef = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateExpandableColumnDefinition, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DataTableTemplateExpandableColumnDefinition, isStandalone: true, selector: "[madExpandableColumnDef]", inputs: { madExpandableColumnDef: "madExpandableColumnDef" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateExpandableColumnDefinition, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madExpandableColumnDef]',
+                    standalone: true,
+                }]
+        }], propDecorators: { madExpandableColumnDef: [{
+                type: Input
+            }] } });
+
+class DataTableTemplateExpandableCellDefinition {
+    constructor(templateRef, columnDef) {
+        this.templateRef = templateRef;
+        this.columnDef = columnDef;
+    }
+    ngOnInit() {
+        this.columnDef.register(this);
+    }
+    ngOnDestroy() {
+        this.columnDef.unregister();
+    }
+    getCellTemplate() {
+        return this.templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateExpandableCellDefinition, deps: [{ token: i0.TemplateRef }, { token: DataTableTemplateExpandableColumnDefinition }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DataTableTemplateExpandableCellDefinition, isStandalone: true, selector: "[madExpandableCellDef]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableTemplateExpandableCellDefinition, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madExpandableCellDef]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: DataTableTemplateExpandableColumnDefinition }] });
+
+class DataTableComponent {
+    set useAsync(useAsync) {
+        this._useAsync = useAsync;
+        this.applySortData();
+    }
+    set selection(selection) {
+        this._selection = selection;
+        this.updateSelectionModel(selection);
+    }
+    /**
+     * @deprecated
+     * Please use "filterMode" instead
+     */
+    set filterEnabled(isFilterEnabled) {
+        this._filterMode = isFilterEnabled ? 'TABLE_BASED' : 'NONE';
+        this.applyFilterPredicate();
+    }
+    set filterMode(filterMode) {
+        this._filterMode = filterMode;
+        this.applyFilterPredicate();
+    }
+    set filterValue(filterValue) {
+        this._filterValue = filterValue;
+        this.applyFilterValue(this._filterValue);
+    }
+    set externalPaginator(paginator) {
+        this.extPaginator = paginator;
+    }
+    set defaultPageSize(defaultSize) {
+        this.page = {
+            ...this.page,
+            pageSize: defaultSize,
+        };
+    }
+    set selectionEmitMode(selectionEmitMode) {
+        this._selectionEmitMode = selectionEmitMode;
+    }
+    /**
+     * @deprecated
+     * This function mixes up 2 responsibilities:
+     *  - determining if actions should be displayed / handled
+     *  - determining whether actions are row based (single) or table based (batch)
+     * Please use a combination of "selectionEmitMode" and "selectionMode" instead:
+     *  - selectionEmitMode determines how selected items are handled (as part of actions, as selections or not at all)
+     *  - selectionMode determines if selected items are treated separately (single) or together (batch)
+     */
+    set forceMode(selectionMode) {
+        if (selectionMode === 'SINGLE' || selectionMode === 'BATCH') {
+            this._selectionEmitMode = 'ON_ACTION';
+            this._forceSelectionMode = selectionMode;
+            this._selectionModel.clear();
+        }
+    }
+    set forceSelectionMode(selectionMode) {
+        this._forceSelectionMode = selectionMode;
+        this._selectionModel.clear();
+    }
+    set displayedColumns(cols) {
+        if (!this.displayedColumnDefinition) {
+            this.columns = cols ? [...cols] : [];
+            this.columnIds = this.columns.map((column) => column.id);
+            this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+        }
+    }
+    set displayedColumnDefinition(def) {
+        this.columns = def.displayedColumns;
+        this.columnIds = this.columns.map((column) => column.id);
+        this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+        this._selectedColumnDefinition = def;
+    }
+    set columnDefinitions(definitions) {
+        this.editableColumnDefinitions = [];
+        this.viewableColumnDefinitions = [];
+        this._allColumnDefinitions = [...definitions];
+        for (const definition of definitions) {
+            if (definition.editable) {
+                this.editableColumnDefinitions.push(definition);
+            }
+            if (definition.displayedColumns?.length > 0) {
+                this.viewableColumnDefinitions.push(definition);
+            }
+        }
+    }
+    set allColumns(allColumns) {
+        this._allAvailableColumns = allColumns;
+        if (allColumns && this._showColumnModal) {
+            this.openColumnModal();
+        }
+    }
+    constructor(changeDetectorRef, matDialog, persistenceService, dataTableGlobalConfig) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.matDialog = matDialog;
+        this.persistenceService = persistenceService;
+        this.dataTableGlobalConfig = dataTableGlobalConfig;
+        // Translations
+        this.filterLabel = 'common.filter';
+        this.filterPlaceholder = '';
+        this.filterColumnsLabel = 'Filter';
+        this.filterColumnsPlaceHolder = 'Filter available columns';
+        this.showEmptyTable = false;
+        this.noDataText = 'No matching data found';
+        this.columnSettingsModalTitleLabel = 'Column settings';
+        this.selectedLabel = 'Selected columns';
+        this.availableLabel = 'Available columns';
+        this.saveLabel = 'Save';
+        this.deleteLabel = 'Delete';
+        this.cancelLabel = 'Cancel';
+        this.infoTextLabel = 'Drag and drop a column to select or reorder it.';
+        this.translateLabels = true;
+        this.stateful = false;
+        this.loading = false;
+        this.paginationEnabled = false;
+        this.page = { pageIndex: 0, pageSize: 50, length: 0 };
+        this.pageSizeOptions = [5, 10, 15];
+        this.actions = [];
+        this.selectionEmitType = 'ID';
+        this.showDeleteFilterAction = true;
+        this.disableRowClick = false;
+        this.deleteDefinitionAllowed = false;
+        this.actionEvent = new EventEmitter();
+        this.selectionEvent = new EventEmitter();
+        this.sortEvent = new EventEmitter();
+        this.filterEvent = new EventEmitter();
+        this.pageEvent = new EventEmitter();
+        this.allColumnsEvent = new EventEmitter();
+        this.columnDefinitionChangeEvent = new EventEmitter();
+        this.viewDefinitionChangeEvent = new EventEmitter();
+        this.allSelected = false;
+        this.ACTION_COLUMN_NAME = '__action__';
+        this.tableActions = [];
+        this.rowActions = [];
+        this.columns = [];
+        this._useAsync = false;
+        this._rowMap = new Map();
+        this._selectionModel = new SelectionModel(true);
+        this._selectionEmitMode = 'NONE';
+        this._filterMode = 'NONE';
+        this._allColumnDefinitions = [];
+        this._showColumnModal = false;
+        this.dataSource = new MatTableDataSource();
+    }
+    ngAfterViewInit() {
+        if (!this._useAsync) {
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+        }
+        this.applySortData();
+        this.initState();
+    }
+    ngOnChanges(changes) {
+        if ('tableData' in changes) {
+            this.updateDataTableData();
+            this.updateSelectionModel(this.getSelection('ID').length ? this.getSelection('ID') : this._selection);
+            if (this.showAll) {
+                this.updatePaginator();
+            }
+        }
+        if ('idGenerator' in changes || 'displayedColumns' in changes) {
+            this.updateDataTableData();
+        }
+        // performance reasons (same behaviour could be achived in getters)
+        if ('forceMode' in changes || 'forceSelectionMode' in changes || 'actions' in changes) {
+            const actions = DataTableActionUtil.getDisplayActions(this.actions, this.selectionMode);
+            this.rowActions = actions.rowActions;
+            this.tableActions = actions.groupedTableActions;
+        }
+    }
+    /** TABLE DISPLAY HANDLING */
+    getDataTableHeaderType(column) {
+        if (column.isSortable && !column.isFilterable) {
+            return 'SORT';
+        }
+        if (!column.isSortable && column.isFilterable) {
+            return 'FILTER';
+        }
+        if (column.isSortable && column.isFilterable) {
+            return 'SORT_AND_FILTER';
+        }
+        return 'PLAIN';
+    }
+    getCustomCellTemplate(columnId) {
+        const columnDef = this.columnDefs.find((it) => it.madColumnDef === columnId);
+        return columnDef && columnDef.cellDef ? columnDef.cellDef.getCellTemplate() : null;
+    }
+    getCustomExpandableTemplate() {
+        return this.expandableDef?.getCellTemplate() || null;
+    }
+    get expandableColumnDef() {
+        return this.expandableDef?.columnDef.madExpandableColumnDef || '';
+    }
+    onExpand(event, element) {
+        this.expandedElement = this.expandedElement === element ? null : element;
+        event.stopPropagation();
+    }
+    /** ACTION BUTTON DISPLAY HANDLING */
+    hasVisibleRowActions(displayedData) {
+        return !this.rowActions.every((action) => this.isHiddenForData(action, [this._rowMap.get(displayedData.rowId)?.actualData]));
+    }
+    isHidden(action) {
+        return this.isHiddenForData(action, this.getSelection('DATA'));
+    }
+    isHiddenForData(action, data) {
+        return !!action.isHidden && action.isHidden(data);
+    }
+    isDisabled(action) {
+        return this.isDisabledForActionType(action.type) || (!!action.isDisabled && action.isDisabled(this.getSelection('DATA')));
+    }
+    isDisabledForActionType(actionType) {
+        switch (actionType) {
+            case 'SINGLE':
+                return this.selectedCount !== 1;
+            case 'BATCH':
+                return this.selectedCount < 1;
+            default:
+                return false;
+        }
+    }
+    getSelectedCount(actionType) {
+        const count = this.selectedCount;
+        if (actionType !== 'BATCH' || count < 2) {
+            return '';
+        }
+        return ` (${count})`;
+    }
+    get selectedCount() {
+        return this._selectionModel?.selected ? this._selectionModel.selected.length : 0;
+    }
+    /** TABLE DATA CHANGE HANDLING */
+    updateDataTableData() {
+        // do not make this function immutable - we desparately need the reference of rowMap to stay the same
+        DataTableDataUtil.updateRowMap(this._rowMap, this.tableData, this.columns, this.idGenerator, this.parentIdGenerator);
+        this.dataSource.data = Array.from(this._rowMap.values()).map((it) => it.displayedData);
+    }
+    updateSelectionModel(selection) {
+        this._selectionModel.clear();
+        selection?.forEach((it) => {
+            const item = this._rowMap.get(it) || [...this._rowMap.values()].find((row) => row.actualData === it);
+            if (!!item) {
+                this.onSelectionEvent(item.id);
             }
         });
+        this.emitSelection();
     }
-    getTableMode() {
-        if (this._forceMode) {
-            return this._forceMode;
+    /** ACTION & SELECTION HANDLING */
+    get selectionEmitMode() {
+        return this._selectionEmitMode === 'NONE' && !!this.actions.length ? 'ON_ACTION' : this._selectionEmitMode;
+    }
+    get selectionMode() {
+        return !!this._forceSelectionMode ? this._forceSelectionMode : this.actions.find((it) => it.type === 'BATCH') ? 'BATCH' : 'SINGLE';
+    }
+    get filteredPageData() {
+        // only use filtered data
+        return this.dataSource?._pageData(this.dataSource.filteredData);
+    }
+    get showActionColumn() {
+        return !(this.selectionEmitMode === 'NONE' || this.hideActionColumn) || !!this.expandableDef;
+    }
+    showCheckbox(displayedData) {
+        return !displayedData.parentId && this.selectionMode === 'BATCH' && !this.hideActionColumn;
+    }
+    showRowActionIcon(displayedData) {
+        return !displayedData.parentId && this.selectionEmitMode === 'ON_ACTION' && this.selectionMode === 'SINGLE' && !this.hideActionColumn;
+    }
+    showRadioButton(displayedData) {
+        return !displayedData.parentId && this.selectionEmitMode === 'ON_SELECTION' && this.selectionMode === 'SINGLE';
+    }
+    showExpandableButton(displayedData) {
+        return !displayedData.parentId && !!this.expandableDef;
+    }
+    isSelected(rowId) {
+        return this._selectionModel.isSelected(rowId);
+    }
+    onToggleSelectAll() {
+        // clear all selection first
+        this._selectionModel.clear();
+        // toggle all checkbox
+        this.allSelected = !this.allSelected;
+        if (this.allSelected) {
+            // select all rows of the current page
+            this.filteredPageData.forEach((row) => {
+                if (!row.parentId) {
+                    this._selectionModel.select(row.rowId);
+                }
+            });
         }
-        if (!this.actions) {
-            return this.NONE;
+        this.emitSelection();
+    }
+    onActionEvent(action) {
+        const emitAction = { ...action };
+        if (!!emitAction && this.selectionEmitMode !== 'NONE') {
+            emitAction.selected = this.getSelection(this.selectionEmitType);
+            this.actionEvent.emit(emitAction);
         }
-        const distinctActionTypes = new Set();
-        for (const rowAction of this.actions) {
-            distinctActionTypes.add(rowAction.type);
+    }
+    onSelectionEvent(id) {
+        switch (this.selectionMode) {
+            case 'BATCH':
+                this._selectionModel.toggle(id);
+                break;
+            case 'SINGLE':
+                this._selectionModel.clear();
+                this._selectionModel.toggle(id);
+                break;
         }
-        if (distinctActionTypes.has(this.BATCH)) {
-            return this.BATCH;
+    }
+    onRowEvent(event, row, action = this.defaultAction) {
+        if (this.selectionEmitMode === 'NONE' || row?.parentId) {
+            return;
+        }
+        this.onSelectionEvent(row.rowId);
+        this.processSelection(event, action);
+    }
+    get defaultAction() {
+        return this.selectionEmitMode !== 'NONE' ? this.rowActions[0] : undefined;
+    }
+    get hideActionColumn() {
+        return this.selectionEmitMode === 'ON_ACTION' && this.actions.every((it) => it.type === 'NONE');
+    }
+    processSelection(event, action) {
+        if (this.selectionEmitMode === 'ON_ACTION' &&
+            this.selectionMode === 'SINGLE' &&
+            !!action &&
+            !DataTableComponent.isClickOnRowMenuIcon(event)) {
+            this.onActionEvent(action);
+        }
+        this.emitSelection();
+    }
+    emitSelection() {
+        if (this.selectionEmitMode === 'ON_SELECTION') {
+            this.selectionEvent.emit(this.getSelection(this.selectionEmitType));
+        }
+    }
+    getSelection(selectionEmitType) {
+        const selection = [];
+        this._selectionModel.selected.forEach((it) => 
+        // if ID-generator is provided, return the ID, else return the ACTUAL data
+        selection.push(this.idGenerator && selectionEmitType === 'ID' ? it : this._rowMap.get(it)?.actualData));
+        return selection;
+    }
+    static isClickOnRowMenuIcon(event) {
+        return event?.target?.classList.contains('mat-icon');
+    }
+    /** SORT HANDLING */
+    onSortingEvent(sort) {
+        if (this._useAsync) {
+            this.sortEvent.emit(sort);
         }
-        if (distinctActionTypes.has(this.SINGLE)) {
-            return this.SINGLE;
+        if (this.stateful) {
+            this.persistenceService.saveSort(this.id, sort);
         }
-        return this.NONE;
     }
-    unsetPageSizeIfNecessary() {
-        if (!this.useAsync && !this.isPaginationEnabled) {
-            const dataCount = this.dataSource?.data ? this.dataSource.data.length : 0;
-            this.paginatorPageSize = dataCount;
-            this.paginatorLength = dataCount;
+    applySortData() {
+        this.dataSource.sortData = this._useAsync
+            ? DataTableSortUtil.sortNothing()
+            : DataTableSortUtil.sortData(this.dataTableGlobalConfig.dateTimeFormat);
+    }
+    /** FILTER HANDLING */
+    get filterMode() {
+        return this._useAsync && this._filterMode === 'TABLE_BASED' ? 'NONE' : this._filterMode;
+    }
+    onTableBasedFilterEvent(event) {
+        this.onFilteringEvent(event.target.value);
+    }
+    onColumnBasedFilterEvent(filter) {
+        this.onFilteringEvent(filter);
+    }
+    onDeleteFilter() {
+        this.onFilteringEvent(undefined);
+        this.filter.updateFilterables(undefined);
+    }
+    onFilteringEvent(filter) {
+        if (this._useAsync) {
+            this.filterEvent.emit(filter);
+        }
+        else {
+            this.allSelected = false;
+            this._selectionModel.clear();
+            this.applyFilterValue(filter);
         }
+        if (this.stateful) {
+            this.persistenceService.saveFilter(this.id, filter);
+        }
+    }
+    applyFilterPredicate() {
+        this.dataSource.filterPredicate =
+            this.filterMode === 'COLUMN_BASED'
+                ? DataTableFilterUtil.columnBasedFilterPredicate(this._rowMap)
+                : DataTableFilterUtil.tableBasedFilterPredicate();
+        this.applyFilterValue(this._filterValue);
+    }
+    applyFilterValue(value) {
+        const isString = typeof this._filterValue === 'string';
+        this.dataSource.filter = !!value ? (isString ? value.trim().toLowerCase() : JSON.stringify(value)) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableComponent, selector: "mad-data-table", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", pageSizeOptions: "pageSizeOptions", externalFilter: "externalFilter", actions: "actions", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", deleteDefinitionAllowed: "deleteDefinitionAllowed", useAsync: "useAsync", translateLabels: "translateLabels", filterValue: "filterValue", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", tableData: "tableData", page: "page", columnDefinitions: "columnDefinitions", loading: "loading", defaultPageSize: "defaultPageSize", externalPaginator: "externalPaginator", paginationEnabled: "paginationEnabled", allColumns: "allColumns", filterEnabled: "filterEnabled", forceMode: "forceMode" }, outputs: { sortEvent: "sortEvent", actionEvent: "actionEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length\">\n    <mad-outline-button\n      [disabled]=\"isDisabled(tableAction.type)\"\n      class=\"table-action\"\n      *ngFor=\"let tableAction of tableActions\"\n      (click)=\"onTableAction(tableAction)\"\n    >\n      {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n    </mad-outline-button>\n  </div>\n  <!-- Table filter -->\n  <mat-form-field *ngIf=\"isFilterEnabled\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\" 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    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n    </button>\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 *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"mode === 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]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"!element.parentId && mode === BATCH\" 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          *ngIf=\"!element.parentId && mode === SINGLE\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n        >\n          <mat-icon>more_vert</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 *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-template>\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)=\"onRowEvent($event, element)\"\n      >\n        <span>\n          {{ element[column.dataPropertyName] }}\n        </span>\n      </td>\n    </ng-container>\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 mat-row [class.clickable-table-row]=\"!row.parentId && isRowClickable\" *matRowDef=\"let row; columns: columnIds\"></tr>\n  </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n  <div class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"this.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=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [length]=\"paginatorLength\"\n    [pageIndex]=\"paginatorPageIndex\"\n    [pageSize]=\"paginatorPageSize\"\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 class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ noDataText }}\n  </div>\n</ng-template>\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{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{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}.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-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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.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: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: i13.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: "pipe", type: i2$2.TranslatePipe, name: "translate" }] }); }
+    /** PAGINATION HANDLING */
+    onPageEvent(event) {
+        if (this._useAsync) {
+            this.pageEvent.emit(event);
+        }
+        if (this.stateful) {
+            this.persistenceService.savePageSize(this.id, event.pageSize);
+        }
+    }
+    get pageIndex() {
+        return this.showAll ? 0 : this.page.pageIndex;
+    }
+    get pageSize() {
+        return this.showAll ? this.dataLength : this.page.pageSize;
+    }
+    get pageLength() {
+        return this.showAll ? this.dataLength : this.page.length;
+    }
+    updatePaginator() {
+        if (this.paginator) {
+            this.paginator.pageSize = this.pageSize;
+            this.paginator.page.emit(this.page);
+        }
+    }
+    get dataLength() {
+        return this.dataSource.data?.length || 0;
+    }
+    get showAll() {
+        return !this._useAsync && !this.paginationEnabled;
+    }
+    /** INIT STATE */
+    initState() {
+        // only set default sort if there is no other sort persisted
+        if (!!this.defaultSort && !this.persistenceService.loadSort(this.id)?.direction) {
+            this.setSort(this.defaultSort);
+        }
+        if (this.stateful) {
+            this.initPaginatorState();
+            this.initSortState();
+            this.initFilterState();
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    initSortState() {
+        const sort = this.persistenceService.loadSort(this.id);
+        if (!!sort) {
+            this.setSort(sort);
+        }
+    }
+    setSort(sort) {
+        this.sort.active = sort.active;
+        this.sort.direction = sort.direction;
+        this.sort.sortChange.emit(sort);
+    }
+    initFilterState() {
+        const filter = this.persistenceService.loadFilter(this.id);
+        this.filter.updateFilterables(filter);
+    }
+    initPaginatorState() {
+        this.page = {
+            pageIndex: 0,
+            pageSize: this.persistenceService.loadPageSize(this.id) || this.pageSize,
+            length: 0,
+        };
+        this.updatePaginator();
+    }
+    /** COLUMN HANDLING */
+    onViewDefinition(definition) {
+        this._selectedColumnDefinition = definition;
+        this.viewDefinitionChangeEvent.emit(definition);
+    }
+    onColumnSettings(definition) {
+        this._showColumnModal = true;
+        this._selectedColumnDefinition = definition ? definition : this._allColumnDefinitions[0];
+        if (this._allAvailableColumns) {
+            this.openColumnModal();
+        }
+        else {
+            // if no complete definitions have been loaded yet send an event so the app can load it
+            this.allColumnsEvent.emit();
+        }
+    }
+    isCurrentDefinition(definition) {
+        return this._selectedColumnDefinition && this._selectedColumnDefinition.id === definition.id;
+    }
+    openColumnModal() {
+        const dialogData = {
+            allColumns: this._allAvailableColumns,
+            definition: this._selectedColumnDefinition,
+            deleteDefinitionAllowed: this.deleteDefinitionAllowed,
+            filterColumnsLabel: this.filterColumnsLabel,
+            filterColumnsPlaceHolder: this.filterColumnsPlaceHolder,
+            noDataText: this.noDataText,
+            titleLabel: this.columnSettingsModalTitleLabel,
+            selectedLabel: this.selectedLabel,
+            availableLabel: this.availableLabel,
+            saveLabel: this.saveLabel,
+            deleteLabel: this.deleteLabel,
+            cancelLabel: this.cancelLabel,
+            infoTextLabel: this.infoTextLabel,
+        };
+        const dialog = this.matDialog.open(DataTableColumnsModalComponent, { data: dialogData });
+        dialog.afterClosed().subscribe((result) => {
+            // no event on CANCEL
+            if (result) {
+                this.columnDefinitionChangeEvent.emit(result);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.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: "17.0.4", 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", 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: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div 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 *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        *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 || !!filteredPageData?.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          *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 class=\"mad-data-table-bottom-area\">\n  <div 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 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.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: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "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: ["sticky", "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$2.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: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "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: '*' })),
+                transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+            ]),
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-data-table', template: "<div class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length\">\n    <mad-outline-button\n      [disabled]=\"isDisabled(tableAction.type)\"\n      class=\"table-action\"\n      *ngFor=\"let tableAction of tableActions\"\n      (click)=\"onTableAction(tableAction)\"\n    >\n      {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n    </mad-outline-button>\n  </div>\n  <!-- Table filter -->\n  <mat-form-field *ngIf=\"isFilterEnabled\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\" 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    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n    </button>\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 *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"mode === 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]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"!element.parentId && mode === BATCH\" 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          *ngIf=\"!element.parentId && mode === SINGLE\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n        >\n          <mat-icon>more_vert</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 *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-template>\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)=\"onRowEvent($event, element)\"\n      >\n        <span>\n          {{ element[column.dataPropertyName] }}\n        </span>\n      </td>\n    </ng-container>\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 mat-row [class.clickable-table-row]=\"!row.parentId && isRowClickable\" *matRowDef=\"let row; columns: columnIds\"></tr>\n  </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n  <div class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"this.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=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [length]=\"paginatorLength\"\n    [pageIndex]=\"paginatorPageIndex\"\n    [pageSize]=\"paginatorPageSize\"\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 class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ noDataText }}\n  </div>\n</ng-template>\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{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{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}.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-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: i1$3.MatDialog }], propDecorators: { filterLabel: [{
+            args: [{ selector: 'mad-data-table', animations: [
+                        trigger('detailExpand', [
+                            state('collapsed,void', style({ height: '0px', minHeight: '0' })),
+                            state('expanded', style({ height: '*' })),
+                            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                        ]),
+                    ], standalone: true, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatProgressSpinnerModule,
+                        ButtonModule,
+                        TranslateModule,
+                        MatCheckboxModule,
+                        MatRadioModule,
+                        MatBadgeModule,
+                        DragDropModule,
+                        FormsModule,
+                        DataTableFilterHeader,
+                        DataTableFilter,
+                        DataTableTemplateColumnDefinition,
+                        DataTableTemplateCellDefinition,
+                        DataTableTemplateExpandableColumnDefinition,
+                        DataTableTemplateExpandableCellDefinition,
+                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div 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 *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        *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 || !!filteredPageData?.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          *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 class=\"mad-data-table-bottom-area\">\n  <div 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 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$3.MatDialog }, { type: DataTablePersistenceService, decorators: [{
+                    type: Inject,
+                    args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAD_DATA_TABLE_GLOBAL_CONFIGURATION]
+                }] }], propDecorators: { id: [{
+                type: Input
+            }], filterLabel: [{
                 type: Input
             }], filterPlaceholder: [{
                 type: Input
@@ -2278,6 +2976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Input
             }], filterColumnsPlaceHolder: [{
                 type: Input
+            }], showEmptyTable: [{
+                type: Input
             }], noDataText: [{
                 type: Input
             }], columnSettingsModalTitleLabel: [{
@@ -2296,51 +2996,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Input
             }], tableClass: [{
                 type: Input
-            }], pageSizeOptions: [{
+            }], translateLabels: [{
                 type: Input
-            }], externalFilter: [{
+            }], useAsync: [{
                 type: Input
-            }], actions: [{
+            }], stateful: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], tableData: [{
                 type: Input
             }], idGenerator: [{
                 type: Input
             }], parentIdGenerator: [{
                 type: Input
-            }], deleteDefinitionAllowed: [{
+            }], defaultSort: [{
                 type: Input
-            }], useAsync: [{
+            }], externalFilter: [{
                 type: Input
-            }], translateLabels: [{
+            }], paginationEnabled: [{
                 type: Input
-            }], filterValue: [{
+            }], page: [{
                 type: Input
-            }], displayedColumns: [{
+            }], pageSizeOptions: [{
                 type: Input
-            }], displayedColumnDefinition: [{
+            }], actions: [{
                 type: Input
-            }], tableData: [{
+            }], selectionEmitType: [{
                 type: Input
-            }], page: [{
+            }], showDeleteFilterAction: [{
                 type: Input
-            }], columnDefinitions: [{
+            }], disableRowClick: [{
                 type: Input
-            }], loading: [{
+            }], deleteDefinitionAllowed: [{
                 type: Input
-            }], defaultPageSize: [{
+            }], selection: [{
                 type: Input
-            }], externalPaginator: [{
+            }], filterEnabled: [{
                 type: Input
-            }], paginationEnabled: [{
+            }], filterMode: [{
                 type: Input
-            }], allColumns: [{
+            }], filterValue: [{
                 type: Input
-            }], filterEnabled: [{
+            }], externalPaginator: [{
+                type: Input
+            }], defaultPageSize: [{
+                type: Input
+            }], selectionEmitMode: [{
                 type: Input
             }], forceMode: [{
                 type: Input
+            }], forceSelectionMode: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], displayedColumnDefinition: [{
+                type: Input
+            }], columnDefinitions: [{
+                type: Input
+            }], allColumns: [{
+                type: Input
+            }], actionEvent: [{
+                type: Output
+            }], selectionEvent: [{
+                type: Output
             }], sortEvent: [{
                 type: Output
-            }], actionEvent: [{
+            }], filterEvent: [{
                 type: Output
             }], pageEvent: [{
                 type: Output
@@ -2352,73 +3074,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Output
             }], paginator: [{
                 type: ViewChild,
-                args: [MatPaginator, { static: false }]
+                args: [MatPaginator]
             }], sort: [{
                 type: ViewChild,
-                args: [MatSort, { static: true }]
+                args: [MatSort]
+            }], filter: [{
+                type: ViewChild,
+                args: [DataTableFilter]
+            }], columnDefs: [{
+                type: ContentChildren,
+                args: [DataTableTemplateColumnDefinition]
+            }], expandableDef: [{
+                type: ContentChild,
+                args: [DataTableTemplateExpandableCellDefinition]
             }] } });
 
-class DataTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, declarations: [DataTableComponent, DataTableColumnsModalComponent], imports: [CommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatMenuModule,
-            MatPaginatorModule,
-            MatSortModule,
-            MatTableModule,
-            MatProgressSpinnerModule,
-            ButtonModule,
-            TranslateModule,
-            MatCheckboxModule,
-            MatBadgeModule,
-            DragDropModule,
-            FormsModule], exports: [DataTableComponent, DataTableColumnsModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, imports: [CommonModule,
-            MatButtonModule,
-            MatIconModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatMenuModule,
-            MatPaginatorModule,
-            MatSortModule,
-            MatTableModule,
-            MatProgressSpinnerModule,
-            ButtonModule,
-            TranslateModule,
-            MatCheckboxModule,
-            MatBadgeModule,
-            DragDropModule,
-            FormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [DataTableComponent, DataTableColumnsModalComponent],
-                    imports: [
-                        CommonModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatMenuModule,
-                        MatPaginatorModule,
-                        MatSortModule,
-                        MatTableModule,
-                        MatProgressSpinnerModule,
-                        ButtonModule,
-                        TranslateModule,
-                        MatCheckboxModule,
-                        MatBadgeModule,
-                        DragDropModule,
-                        FormsModule,
-                    ],
-                    exports: [DataTableComponent, DataTableColumnsModalComponent],
-                }]
-        }] });
-
 class StepHeaderComponent extends CdkStepHeader {
     constructor(_focusMonitor, _elementRef) {
         super(_elementRef);
@@ -2624,7 +3294,7 @@ class StepperComponent extends CdkStepper {
     _stepIsNavigable(index, step) {
         return step.completed || this.selectedIndex === index || !this.linear;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, deps: [{ token: i3$2.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, deps: [{ token: i3$3.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: StepperComponent, selector: "mad-stepper", inputs: { nextButtonLabel: "nextButtonLabel", doneButtonLabel: "doneButtonLabel" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.stepper-vertical": "true", "attr.aria-orientation": "\"vertical\"" } }, providers: [{ provide: CdkStepper, useExisting: StepperComponent }], queries: [{ propertyName: "_steps", predicate: StepComponent, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: StepHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Vertical stepper -->\n<ng-container>\n  <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n    <ng-container [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n    <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n      <div\n        class=\"vertical-stepper-content\"\n        role=\"tabpanel\"\n        [@stepTransition]=\"_getAnimationDirection(i)\"\n        (@stepTransition.done)=\"_animationDone.next($event)\"\n        [id]=\"_getStepContentId(i)\"\n        [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n        [attr.aria-expanded]=\"selectedIndex === i\"\n      >\n        <div class=\"vertical-content\">\n          <ng-container\n            [ngTemplateOutlet]=\"step.content\"\n            [ngTemplateOutletContext]=\"{\n              step: step,\n              i: i,\n              last: isLast,\n              first: isFirst,\n              nextBtnLbl: this.nextButtonLabel,\n              doneBtnLbl: this.doneButtonLabel\n            }\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n  <mad-step-header\n    class=\"mat-vertical-stepper-header\"\n    (click)=\"step.selectAndMarkAsTouched(i)\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n    [id]=\"_getStepLabelId(i)\"\n    [attr.aria-posinset]=\"i + 1\"\n    [attr.aria-setsize]=\"steps.length\"\n    [attr.aria-controls]=\"_getStepContentId(i)\"\n    [attr.aria-selected]=\"selectedIndex == i\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n    [index]=\"i\"\n    [completed]=\"step.completed\"\n    [hasError]=\"step.hasError\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"_stepIsNavigable(i, step)\"\n    [optional]=\"step.optional\"\n    [closed]=\"step.stepClosed\"\n    [errorMessage]=\"step.errorMessage\"\n  ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepHeaderComponent, selector: "mad-step-header", inputs: ["color", "index", "label", "state", "errorMessage", "selected", "active", "optional", "hasError", "completed", "closed"] }], animations: [madStepperAnimations.verticalStepTransition], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, decorators: [{
@@ -2634,7 +3304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         '[attr.aria-orientation]': '"vertical"',
                         role: 'tablist',
                     }, animations: [madStepperAnimations.verticalStepTransition], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Vertical stepper -->\n<ng-container>\n  <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n    <ng-container [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n    <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n      <div\n        class=\"vertical-stepper-content\"\n        role=\"tabpanel\"\n        [@stepTransition]=\"_getAnimationDirection(i)\"\n        (@stepTransition.done)=\"_animationDone.next($event)\"\n        [id]=\"_getStepContentId(i)\"\n        [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n        [attr.aria-expanded]=\"selectedIndex === i\"\n      >\n        <div class=\"vertical-content\">\n          <ng-container\n            [ngTemplateOutlet]=\"step.content\"\n            [ngTemplateOutletContext]=\"{\n              step: step,\n              i: i,\n              last: isLast,\n              first: isFirst,\n              nextBtnLbl: this.nextButtonLabel,\n              doneBtnLbl: this.doneButtonLabel\n            }\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n  <mad-step-header\n    class=\"mat-vertical-stepper-header\"\n    (click)=\"step.selectAndMarkAsTouched(i)\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n    [id]=\"_getStepLabelId(i)\"\n    [attr.aria-posinset]=\"i + 1\"\n    [attr.aria-setsize]=\"steps.length\"\n    [attr.aria-controls]=\"_getStepContentId(i)\"\n    [attr.aria-selected]=\"selectedIndex == i\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n    [index]=\"i\"\n    [completed]=\"step.completed\"\n    [hasError]=\"step.hasError\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"_stepIsNavigable(i, step)\"\n    [optional]=\"step.optional\"\n    [closed]=\"step.stepClosed\"\n    [errorMessage]=\"step.errorMessage\"\n  ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;flex-direction:column;box-sizing:border-box;display:flex}.step-content,.step-buttons{padding:2em}\n"] }]
-        }], ctorParameters: () => [{ type: i3$2.Directionality, decorators: [{
+        }], ctorParameters: () => [{ type: i3$3.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { animationDone: [{
                 type: Output
@@ -3165,11 +3835,11 @@ class ToolbarComponent {
         return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$5.BreakpointObserver }, { token: i2$4.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a [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 [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 (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 [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n        <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-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          *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          (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 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                  *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:white}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a [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 [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 (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 [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n        <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-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          *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          (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 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                  *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:white}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n  <a [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 [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 (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 [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n        <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-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          *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          (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 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                  *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:white}.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}\n"] }]
+            args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n  <a [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 [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 (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 [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n        <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-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          *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          (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 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                  *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:white}.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}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.BreakpointObserver }, { type: i2$4.Title }, { type: ToolbarService }] });
 
 class ToolbarModule {
@@ -3356,7 +4026,7 @@ class FileUploadComponent {
         window.open(window.URL.createObjectURL(file));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList" }, outputs: { fileEmitter: "fileEmitter", errorEmitter: "errorEmitter" }, ngImport: i0, template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptForInput\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{ text ? text : 'Upload' }}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{ file.name }}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DragAndDropDirectiveDirective, selector: "[madDragAndDrop]", outputs: ["onFileDropped"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList" }, outputs: { fileEmitter: "fileEmitter", errorEmitter: "errorEmitter" }, ngImport: i0, template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptForInput\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{ text ? text : 'Upload' }}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{ file.name }}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DragAndDropDirectiveDirective, selector: "[madDragAndDrop]", outputs: ["onFileDropped"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -3385,5 +4055,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableColumnsModalComponent, DataTableComponent, DataTableModule, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
+export { 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, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
 //# sourceMappingURL=porscheinformatik-material-addons.mjs.map