@porscheinformatik/material-addons 19.0.6 → 19.0.8

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -1,28 +1,28 @@
 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, InjectionToken, SkipSelf, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, QueryList } from '@angular/core';
+import { Component, Input, NgModule, HostBinding, ElementRef, ViewChild, Directive, Optional, LOCALE_ID, Injectable, Inject, output, InjectionToken, inject, viewChild, input, computed, signal, ChangeDetectionStrategy, EventEmitter, Output, forwardRef, HostListener, TemplateRef, ContentChild, ViewChildren, SkipSelf, ContentChildren, ViewEncapsulation, QueryList } from '@angular/core';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$3 from '@angular/common';
+import * as i2$2 from '@angular/common';
 import { NgIf, CommonModule, NgStyle, NgClass, NgFor, NgTemplateOutlet, AsyncPipe } from '@angular/common';
-import * as i1$8 from '@angular/router';
+import * as i1$9 from '@angular/router';
 import { RouterLink, RouterModule, NavigationEnd } from '@angular/router';
-import * as i1$1 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormsModule, ControlContainer, FormGroupDirective, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
-import * as i4 from '@angular/cdk/text-field';
+import * as i3$1 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i2$2 from '@angular/material/form-field';
+import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ObserversModule } from '@angular/cdk/observers';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { Subject, Subscription, of } from 'rxjs';
 import { throttleTime, switchMap, map, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
-import * as i1$2 from '@angular/material/card';
+import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i10 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -30,13 +30,13 @@ import * as i7 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i5 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i1$3 from '@angular/material/menu';
+import * as i1$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$4 from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i3$1 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$4 from '@ngx-translate/core';
+import * as i2$3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { SelectionModel } from '@angular/cdk/collections';
 import { DateTime } from 'luxon';
@@ -49,22 +49,22 @@ import * as i16 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i17 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4$1 from '@angular/material/select';
+import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i5$1 from '@angular/material/core';
 import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
-import * as i1$5 from '@angular/cdk/a11y';
-import * as i1$6 from '@angular/cdk/bidi';
-import * as i1$7 from '@angular/material/stepper';
+import * as i1$6 from '@angular/cdk/a11y';
+import * as i1$7 from '@angular/cdk/bidi';
+import * as i1$8 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import * as i9 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import * as i1$9 from '@angular/cdk/layout';
+import * as i1$a from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
-import * as i4$2 from '@angular/material/toolbar';
+import * as i4$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i2$5 from '@angular/platform-browser';
-import * as i4$3 from '@angular/material/chips';
+import * as i2$4 from '@angular/platform-browser';
+import * as i4$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
 class MaterialActionButtonComponent {
@@ -539,230 +539,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                     args: [LOCALE_ID]
                 }] }] });
 
+class SizeChangeDirective {
+    constructor(elRef) {
+        this.elRef = elRef;
+        this.madSizeChange = output();
+        this.changes = new ResizeObserver((resizes) => {
+            resizes.forEach((resize) => this.madSizeChange.emit(resize));
+        });
+        this.changes.observe(elRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.changes.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SizeChangeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: SizeChangeDirective, isStandalone: true, selector: "[madSizeChange]", outputs: { madSizeChange: "madSizeChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SizeChangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madSizeChange]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+const MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION = new InjectionToken('mad-readonly-form-field-configuration');
+const DEFAULT_TEXT_ALIGN = 'left';
+const DEFAULT_UNIT_POSITION = 'left';
+const DEFAULT_TEXT_OVERFLOW = 'ellipsis';
+const DEFAULT_MULTILINE = false;
+const DEFAULT_MULTILINE_AUTOSIZE = false;
+const DEFAULT_ROWS = 2;
+const DEFAULT_SHRINK_IF_EMPTY = false;
+const DEFAULT_AUTOFILL_DECIMALS = false;
+const DEFAULT_DECIMAL_PLACES = 2;
+const DEFAULT_FORMAT_NUMBER = false;
+const DEFAULT_ROUND_DISPLAY_VALUE = false;
+const THIN_SPACE = ' ';
 /**
  * Read-only mat-form-field representation of provided value
  *
  * @author Stefan Laesser
  */
 class ReadOnlyFormFieldComponent {
-    constructor(changeDetector, renderer, numberFormatService, elementRef) {
-        this.changeDetector = changeDetector;
-        this.renderer = renderer;
-        this.numberFormatService = numberFormatService;
-        this.elementRef = elementRef;
-        this.useProjectedContent = false;
-        this.textAlign = 'left';
-        this.formatNumber = false;
-        this.decimalPlaces = 2;
-        this.roundValue = false;
-        this.autofillDecimals = false;
-        this.unit = null;
-        this.unitPosition = 'left';
-        this.errorMessage = null;
-        this.multiline = false;
+    constructor() {
+        this.defaultConfig = inject(MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION, { optional: true });
+        this.numberFormatService = inject(NumberFormatService);
+        this.inputEl = viewChild('inputEl');
+        this.label = input.required();
+        this.value = input();
+        this.useProjectedContent = input(false);
+        this.textAlign = input(this.defaultConfig?.textAlign ?? DEFAULT_TEXT_ALIGN);
+        this.textOverflow = input(this.defaultConfig?.textOverflow ?? DEFAULT_TEXT_OVERFLOW);
+        this.errorMessage = input(null);
+        this.id = input();
+        this.unit = input(null);
+        this.unitPosition = input(this.defaultConfig?.unitPosition ?? DEFAULT_UNIT_POSITION);
+        this.formatNumber = input(this.defaultConfig?.formatNumber ?? DEFAULT_FORMAT_NUMBER);
+        this.decimalPlaces = input(this.defaultConfig?.decimalPlaces ?? DEFAULT_DECIMAL_PLACES);
+        this.roundDisplayValue = input(this.defaultConfig?.roundDisplayValue ?? DEFAULT_ROUND_DISPLAY_VALUE);
+        this.autofillDecimals = input(this.defaultConfig?.autofillDecimals ?? DEFAULT_AUTOFILL_DECIMALS);
+        this.multiline = input(this.defaultConfig?.multiline ?? DEFAULT_MULTILINE);
+        /**
+         * if cdkTextareaAutosize is active for textareas
+         */
+        this.multilineAutoSize = input(this.defaultConfig?.multilineAutosize ?? DEFAULT_MULTILINE_AUTOSIZE);
         /*
          * If shrinkIfEmpty is set to "false", nothing changes
          * If set to "true" and multiline is also "true", the textarea will
          * shrink to one row, if value is empty/null/undefined.
          * Otherwise, the defined rows-value will be used
          */
-        this.shrinkIfEmpty = false;
+        this.shrinkIfEmpty = input(this.defaultConfig?.shrinkIfEmpty ?? DEFAULT_SHRINK_IF_EMPTY);
+        this.rows = input(this.defaultConfig?.rows ?? DEFAULT_ROWS);
         /**
-         * if cdkTextareaAutosize is active for textareas
+         * suffix iocon
          */
-        this.multilineAutoSize = false;
-        this.suffixClickedEmitter = new EventEmitter();
-        this.prefixClickedEmitter = new EventEmitter();
-        this.errorMatcher = {
-            isErrorState: () => !!this.errorMessage,
-        };
-        this.toolTipForInputEnabled = false;
-    }
-    ngOnChanges(_) {
-        if (!NumberFormatService.valueIsSet(this.value)) {
-            this.value = '-';
-            if (this.shrinkIfEmpty) {
-                this.rows = 1;
+        this.suffix = input();
+        /**
+         * prefix iocon
+         */
+        this.prefix = input();
+        this.suffixClickedEmitter = output();
+        this.prefixClickedEmitter = output();
+        this.errorMatcher = computed(() => ({
+            isErrorState: () => !!this.errorMessage(),
+        }));
+        this.displayValue = computed(() => {
+            const value = this.value();
+            if (!NumberFormatService.valueIsSet(value))
+                return '-';
+            else if (this.formatNumber() && typeof value === 'number')
+                return this.numberFormatService.format(value, {
+                    decimalPlaces: this.decimalPlaces(),
+                    finalFormatting: true,
+                    autofillDecimals: this.autofillDecimals(),
+                });
+            else
+                return value;
+        });
+        this.displayValueWithUnit = computed(() => {
+            // If the unit should be positioned to the right, and the text is left-aligned it needs to "follow" the text, hence we add it to it.
+            const isUnitTrailing = this.unit() && this.unitPosition() === 'right' && this.textAlign() === 'left';
+            if (this.multiline() || !isUnitTrailing)
+                return this.displayValue();
+            // The THIN_SPACE (U+2009) simulates the padding used previously the most.
+            return `${this.displayValue()}${THIN_SPACE}${this.unit()}`;
+        });
+        this.actualAmountOfRows = computed(() => {
+            if (!NumberFormatService.valueIsSet(this.value()) && this.shrinkIfEmpty())
+                return 1;
+            else
+                return this.rows();
+        });
+        this.sizeChanges = signal(undefined, {
+            equal: (a, b) => a?.contentRect.width === b?.contentRect.width,
+        });
+        this.toolTipForInputEnabled = computed(() => {
+            const input = this.inputEl()?.nativeElement;
+            // This is needed to re-compute this signal when the size is updated
+            const sizeChanges = this.sizeChanges();
+            if (sizeChanges && input && this.textOverflow() === 'ellipsis') {
+                return input.offsetWidth < input.scrollWidth;
             }
-        }
-        else if (this.formatNumber && typeof this.value === 'number') {
-            this.value = this.numberFormatService.format(this.value, {
-                decimalPlaces: this.decimalPlaces,
-                finalFormatting: true,
-                autofillDecimals: this.autofillDecimals,
-            });
-        }
-        this.changeDetector.detectChanges();
-    }
-    // TODO direct copy from NumericFieldDirective
-    ngAfterViewChecked() {
-        this.injectUnitSymbol();
-        // If useProjectedContent is set to true, the input wont be show
-        if (!this.useProjectedContent) {
-            this.setReadonlyFieldStyle();
-            this.setTooltipForOverflownField();
-        }
+            return false;
+        });
+        this.toolTipText = computed(() => {
+            if (!this.unit()) {
+                return this.value();
+            }
+            return this.unitPosition() === 'left' ? `${this.unit()} ${this.value()}` : `${this.value()} ${this.unit()}`;
+        });
     }
     suffixClicked() {
-        this.suffixClickedEmitter.emit(null);
+        this.suffixClickedEmitter.emit();
     }
     prefixClicked() {
-        this.prefixClickedEmitter.emit(null);
+        this.prefixClickedEmitter.emit();
     }
-    injectUnitSymbol() {
-        // Need to inject the unit symbol when the input element width is set to its actual value,
-        // otherwise the icon wont show in the correct position
-        if (!!this.unit && !this.unitSpan && this.inputEl.nativeElement.offsetWidth !== 0) {
-            // Get the input wrapper and apply necessary styles
-            const inputWrapper = this.inputEl.nativeElement.parentNode.parentNode;
-            // Create the span with unit symbol and apply necessary styles
-            this.unitSpan = this.renderer.createElement('span');
-            if (this.unitPosition === 'left') {
-                this.renderer.setAttribute(this.unitSpan, 'matPrefix', '');
-                this.renderer.setStyle(this.unitSpan, 'padding-right', '5px');
-                this.renderer.insertBefore(inputWrapper, this.unitSpan, inputWrapper.children[0]);
-            }
-            else {
-                this.renderer.setAttribute(this.unitSpan, 'matSuffix', '');
-                this.renderer.setStyle(this.unitSpan, 'padding-left', '25px');
-                this.renderer.appendChild(inputWrapper, this.unitSpan);
-            }
-        }
-        // special handling to move unit symbol along with display value
-        if (!!this.unitSpan && this.textAlign === 'left' && this.unitPosition === 'right') {
-            const inputStyles = window.getComputedStyle(this.inputEl.nativeElement.parentElement, null);
-            this.unitSpan.style.position = 'absolute';
-            this.unitSpan.style.marginTop = inputStyles.getPropertyValue('border-top-width');
-            this.unitSpan.style.paddingTop = inputStyles.getPropertyValue('padding-top');
-            this.unitSpan.style.paddingBottom = inputStyles.getPropertyValue('padding-bottom');
-            if (!this.textSpan) {
-                this.textSpan = document.createElement('span');
-                document.body.appendChild(this.textSpan);
-                this.textSpan.style.font = inputStyles.getPropertyValue('font');
-                this.textSpan.style.fontSize = inputStyles.getPropertyValue('font-size');
-                this.textSpan.style.height = 'auto';
-                this.textSpan.style.width = 'auto';
-                this.textSpan.style.position = 'absolute';
-                this.textSpan.style.top = '0';
-                this.textSpan.style.whiteSpace = 'no-wrap';
-                this.textSpan.style.visibility = 'hidden';
-            }
-            this.textSpan.innerHTML = this.value;
-            const width = Math.min(this.inputEl.nativeElement.clientWidth - this.unitSpan.clientWidth, Math.ceil(this.textSpan.clientWidth));
-            this.unitSpan.style.left = width + 'px';
-        }
-        // always reset unit symbol
-        if (!!this.unitSpan) {
-            this.unitSpan.textContent = this.unit;
-        }
-    }
-    setReadonlyFieldStyle() {
-        if (this.inputEl?.nativeElement) {
-            const textOverFlowStyleValue = this.getTextOverFlowStyleValue();
-            if (textOverFlowStyleValue) {
-                this.inputEl.nativeElement.setAttribute('style', 'text-overflow: ' + textOverFlowStyleValue);
-            }
-        }
-    }
-    // Ellipsis is enabled by default as text-overflow behaviour
-    getTextOverFlowStyleValue() {
-        // it works only if the style is added to the component directly. Should find a way for get it from the calculated
-        // style. Than it would be possible to define the text-overflow in css for the whole application
-        const textOverflow = this.elementRef?.nativeElement?.style.textOverflow;
-        if (!textOverflow) {
-            return 'ellipsis';
-        }
-        return textOverflow;
-    }
-    setTooltipForOverflownField() {
-        if (this.isEllipsisForTextOverflowEnabled()) {
-            if (this.inputEl) {
-                this.toolTipForInputEnabled = this.isTextOverflown(this.inputEl.nativeElement);
-                if (this.toolTipForInputEnabled) {
-                    this.toolTipText = this.calculateToolTipText();
-                }
-            }
-        }
-    }
-    isEllipsisForTextOverflowEnabled() {
-        return this.getTextOverFlowStyleValue() === 'ellipsis';
-    }
-    isTextOverflown(input) {
-        if (input) {
-            return input.offsetWidth < input.scrollWidth;
-        }
-        return false;
-    }
-    calculateToolTipText() {
-        if (!this.unit) {
-            return this.value;
-        }
-        return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: NumberFormatService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ReadOnlyFormFieldComponent, isStandalone: true, 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    matTooltip=\"{{ toolTipText }}\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\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 data-cy=\"suffix-icon\" *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon data-cy=\"prefix-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:-moz-available;width:-webkit-fill-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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ReadOnlyFormFieldComponent, isStandalone: true, selector: "mad-readonly-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, useProjectedContent: { classPropertyName: "useProjectedContent", publicName: "useProjectedContent", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, textOverflow: { classPropertyName: "textOverflow", publicName: "textOverflow", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitPosition: { classPropertyName: "unitPosition", publicName: "unitPosition", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null }, decimalPlaces: { classPropertyName: "decimalPlaces", publicName: "decimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, roundDisplayValue: { classPropertyName: "roundDisplayValue", publicName: "roundDisplayValue", isSignal: true, isRequired: false, transformFunction: null }, autofillDecimals: { classPropertyName: "autofillDecimals", publicName: "autofillDecimals", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, multilineAutoSize: { classPropertyName: "multilineAutoSize", publicName: "multilineAutoSize", isSignal: true, isRequired: false, transformFunction: null }, shrinkIfEmpty: { classPropertyName: "shrinkIfEmpty", publicName: "shrinkIfEmpty", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (!multiline()) {\n    <input\n      #inputEl\n      (madSizeChange)=\"sizeChanges.set($event)\"\n      [style.text-overflow]=\"textOverflow()\"\n      [disabled]=\"!useProjectedContent()\"\n      [errorStateMatcher]=\"errorMatcher()\"\n      [id]=\"id()\"\n      [matTooltipDisabled]=\"!toolTipForInputEnabled()\"\n      [matTooltip]=\"toolTipText()\"\n      [ngClass]=\"'text-' + textAlign() + ' content'\"\n      [ngModel]=\"displayValueWithUnit()\"\n      [ngStyle]=\"{ display: useProjectedContent() ? 'none' : 'block' }\"\n      matInput\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipPosition=\"right\"\n      readonly\n    />\n  } @else {\n    <textarea\n      [ngStyle]=\"{ display: useProjectedContent() ? 'none' : 'block' }\"\n      [rows]=\"actualAmountOfRows()\"\n      [ngModel]=\"displayValueWithUnit()\"\n      class=\"multiline content\"\n      [errorStateMatcher]=\"errorMatcher()\"\n      [id]=\"id()\"\n      readonly\n      [disabled]=\"!useProjectedContent()\"\n      matInput\n      [cdkTextareaAutosize]=\"multilineAutoSize()\"\n    >\n    </textarea>\n  }\n\n  @if (useProjectedContent()) {\n    <ng-content />\n  }\n  <mat-error>{{ errorMessage() }}</mat-error>\n  @if (suffix()) {\n    <mat-icon data-cy=\"suffix-icon\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix() }} </mat-icon>\n  }\n  @if (prefix()) {\n    <mat-icon data-cy=\"prefix-icon\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix() }} </mat-icon>\n  }\n  @if (unit() && unitPosition() === 'left') {\n    <span [style.padding-right]=\"'5px'\" matTextPrefix>{{ unit() }}</span>\n  } @else if (unit() && textAlign() === 'right') {\n    <span [style.padding-left]=\"'25px'\" matTextSuffix>{{ unit() }}</span>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-moz-available;width:-webkit-fill-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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: SizeChangeDirective, selector: "[madSizeChange]", outputs: ["madSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReadOnlyFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-readonly-form-field', imports: [MatFormFieldModule, NgIf, MatInputModule, FormsModule, NgStyle, NgClass, MatTooltipModule, TextFieldModule, MatIconModule], 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    matTooltip=\"{{ toolTipText }}\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"custom-tooltip\"\n    matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\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 data-cy=\"suffix-icon\" *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon data-cy=\"prefix-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:-moz-available;width:-webkit-fill-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 }, { type: i0.ElementRef }], propDecorators: { originalContent: [{
-                type: ViewChild,
-                args: ['contentWrapper', { static: false }]
-            }], useProjectedContent: [{
-                type: Input,
-                args: ['useProjectedContent']
-            }], value: [{
-                type: Input,
-                args: ['value']
-            }], label: [{
-                type: Input,
-                args: ['label']
-            }], textAlign: [{
-                type: Input,
-                args: ['textAlign']
-            }], formatNumber: [{
-                type: Input,
-                args: ['formatNumber']
-            }], decimalPlaces: [{
-                type: Input,
-                args: ['decimalPlaces']
-            }], roundValue: [{
-                type: Input,
-                args: ['roundDisplayValue']
-            }], autofillDecimals: [{
-                type: Input,
-                args: ['autofillDecimals']
-            }], unit: [{
-                type: Input,
-                args: ['unit']
-            }], unitPosition: [{
-                type: Input,
-                args: ['unitPosition']
-            }], errorMessage: [{
-                type: Input,
-                args: ['errorMessage']
-            }], multiline: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], shrinkIfEmpty: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }], prefix: [{
-                type: Input
-            }], multilineAutoSize: [{
-                type: Input
-            }], suffixClickedEmitter: [{
-                type: Output
-            }], prefixClickedEmitter: [{
-                type: Output
-            }], inputEl: [{
-                type: ViewChild,
-                args: ['inputEl']
-            }] } });
+            args: [{ selector: 'mad-readonly-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        NgStyle,
+                        NgClass,
+                        MatTooltipModule,
+                        TextFieldModule,
+                        MatIconModule,
+                        SizeChangeDirective,
+                    ], template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (!multiline()) {\n    <input\n      #inputEl\n      (madSizeChange)=\"sizeChanges.set($event)\"\n      [style.text-overflow]=\"textOverflow()\"\n      [disabled]=\"!useProjectedContent()\"\n      [errorStateMatcher]=\"errorMatcher()\"\n      [id]=\"id()\"\n      [matTooltipDisabled]=\"!toolTipForInputEnabled()\"\n      [matTooltip]=\"toolTipText()\"\n      [ngClass]=\"'text-' + textAlign() + ' content'\"\n      [ngModel]=\"displayValueWithUnit()\"\n      [ngStyle]=\"{ display: useProjectedContent() ? 'none' : 'block' }\"\n      matInput\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipPosition=\"right\"\n      readonly\n    />\n  } @else {\n    <textarea\n      [ngStyle]=\"{ display: useProjectedContent() ? 'none' : 'block' }\"\n      [rows]=\"actualAmountOfRows()\"\n      [ngModel]=\"displayValueWithUnit()\"\n      class=\"multiline content\"\n      [errorStateMatcher]=\"errorMatcher()\"\n      [id]=\"id()\"\n      readonly\n      [disabled]=\"!useProjectedContent()\"\n      matInput\n      [cdkTextareaAutosize]=\"multilineAutoSize()\"\n    >\n    </textarea>\n  }\n\n  @if (useProjectedContent()) {\n    <ng-content />\n  }\n  <mat-error>{{ errorMessage() }}</mat-error>\n  @if (suffix()) {\n    <mat-icon data-cy=\"suffix-icon\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix() }} </mat-icon>\n  }\n  @if (prefix()) {\n    <mat-icon data-cy=\"prefix-icon\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix() }} </mat-icon>\n  }\n  @if (unit() && unitPosition() === 'left') {\n    <span [style.padding-right]=\"'5px'\" matTextPrefix>{{ unit() }}</span>\n  } @else if (unit() && textAlign() === 'right') {\n    <span [style.padding-left]=\"'25px'\" matTextSuffix>{{ unit() }}</span>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-moz-available;width:-webkit-fill-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"] }]
+        }] });
 
 /**
  * Wraps a mat-form-field to replace it by a readOnly representation if necessary
@@ -876,13 +805,13 @@ class ReadOnlyFormFieldWrapperComponent {
             formField.setAttribute('style', 'width:100%');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ReadOnlyFormFieldWrapperComponent, isStandalone: true, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["useProjectedContent", "value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }, { kind: "ngmodule", type: ObserversModule }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ReadOnlyFormFieldWrapperComponent, isStandalone: true, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["label", "value", "useProjectedContent", "textAlign", "textOverflow", "errorMessage", "id", "unit", "unitPosition", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "multiline", "multilineAutoSize", "shrinkIfEmpty", "rows", "suffix", "prefix"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }, { kind: "ngmodule", type: ObserversModule }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-readonly-form-field-wrapper', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [NgIf, ReadOnlyFormFieldComponent, ObserversModule], 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    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormGroupDirective }], propDecorators: { originalContent: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective }], propDecorators: { originalContent: [{
                 type: ViewChild,
                 args: ['contentWrapper', { static: false }]
             }], readOnlyContentWrapper: [{
@@ -1360,7 +1289,7 @@ class CardComponent {
         this.additionalAction.emit(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: CardComponent, isStandalone: true, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header class=\"header\" *ngIf=\"title || expandable\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title data-cy=\"card-title\" class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div data-cy=\"title-buttons-block\" class=\"top-right-icons\">\n        <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:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$2.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: CardComponent, isStandalone: true, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header class=\"header\" *ngIf=\"title || expandable\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title data-cy=\"card-title\" class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div data-cy=\"title-buttons-block\" class=\"top-right-icons\">\n        <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:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }], animations: [
             trigger('collapseExpandAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0, overflow: 'hidden' }),
@@ -1564,13 +1493,13 @@ class BaseQuickListComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: BaseQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: BaseQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: BaseQuickListComponent, isStandalone: true, selector: "mad-base-quick-list", inputs: { allItems: "allItems", addLabel: "addLabel", addPossible: "addPossible", removePossible: "removePossible", blankItem: "blankItem", readonly: "readonly", maxItems: "maxItems", minItems: "minItems", formArray: "formArray" }, outputs: { added: "added", removed: "removed" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemRows", predicate: ["row"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: BaseQuickListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-base-quick-list', template: '', standalone: true }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }], propDecorators: { allItems: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }], propDecorators: { allItems: [{
                 type: Input
             }], addLabel: [{
                 type: Input
@@ -1606,13 +1535,13 @@ class QuickListCompactComponent extends BaseQuickListComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.formBuilder = formBuilder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: QuickListCompactComponent, isStandalone: true, selector: "mad-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last\">\n  <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.allItems.length\"\n  (click)=\"addItem()\"\n  [disabled]=\"!isAddAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListCompactComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-quick-list-compact', imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, LinkButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems; let isLast = last\">\n  <div class=\"flex-container\" *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddAllowed()\" (click)=\"addItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.allItems.length\"\n  (click)=\"addItem()\"\n  [disabled]=\"!isAddAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
 
 // Based on https://github.com/porscheinformatik/clarity-addons/blob/master/src/clr-addons/generic-quick-list/generic-quick-list.ts
 class QuickListComponent extends BaseQuickListComponent {
@@ -1621,13 +1550,13 @@ class QuickListComponent extends BaseQuickListComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.formBuilder = formBuilder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: QuickListComponent, isStandalone: true, selector: "mad-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-outline-button data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-quick-list', imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, OutlineButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-outline-button data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
 
 class ReactiveFormQuickListComponent extends BaseQuickListComponent {
     constructor(changeDetectorRef, formBuilder) {
@@ -1635,13 +1564,13 @@ class ReactiveFormQuickListComponent extends BaseQuickListComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.formBuilder = formBuilder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveFormQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveFormQuickListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ReactiveFormQuickListComponent, isStandalone: true, selector: "mad-reactive-form-quick-list", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n\n<mad-outline-button data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveFormQuickListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-reactive-form-quick-list', imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, OutlineButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n\n<mad-outline-button data-cy=\"add-item-button\" *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
 
 class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
     constructor(changeDetectorRef, formBuilder) {
@@ -1649,13 +1578,13 @@ class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.formBuilder = formBuilder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveFormQuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveFormQuickListCompactComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ReactiveFormQuickListCompactComponent, isStandalone: true, selector: "mad-reactive-form-quick-list-compact", usesInheritance: true, ngImport: i0, template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.formArray?.controls.length\"\n  (click)=\"addReactiveItem()\"\n  [disabled]=\"!isAddReactiveAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveFormQuickListCompactComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-reactive-form-quick-list-compact', imports: [NgFor, NgIf, NgTemplateOutlet, IconButtonComponent, MatIconModule, LinkButtonComponent], template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of formArray.controls; let isLast = last\">\n  <div *ngIf=\"itemTemplate\" #row class=\"quick-list-row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button data-cy=\"delete-item-button\" *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-button data-cy=\"add-item-button\" *ngIf=\"!readonly && isLast\" [disabled]=\"!isAddReactiveAllowed()\" (click)=\"addReactiveItem()\">\n      <mat-icon>add_circle_outline</mat-icon>\n    </mad-icon-button>\n  </div>\n</ng-container>\n<mad-link-button\n  data-cy=\"add-first-item-button\"\n  *ngIf=\"!readonly && !this.formArray?.controls.length\"\n  (click)=\"addReactiveItem()\"\n  [disabled]=\"!isAddReactiveAllowed()\"\n>\n  {{ addLabel }}\n</mad-link-button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
 
 class QuickListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: QuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1782,7 +1711,7 @@ class TableComponent {
         return event?.target?.classList.contains('mat-icon');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: TableComponent, isStandalone: true, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: TableComponent, isStandalone: true, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -1956,13 +1885,13 @@ class DataTableColumnsModalComponent {
         this.searchFilter = '';
         this.filteredAvailableColumns = [...this.availableColumns];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableColumnsModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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:#fff;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:#fff;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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableColumnsModalComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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:#fff;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:#fff;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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.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", "cdkDropListElementContainer"], 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", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableColumnsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-data-table-columns-modal.component', 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:#fff;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:#fff;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$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -2299,7 +2228,7 @@ class DataTableFilterDialogComponent {
         this._subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", 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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.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$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableFilterDialogComponent, decorators: [{
             type: Component,
@@ -3085,8 +3014,8 @@ class DataTableComponent {
     disableDeleteFilterButton() {
         return this.filter?.getActiveFilterCount() === 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n    <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n      <button\n        mat-icon-button\n        [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n        [disabled]=\"disableDeleteFilterButton()\"\n        class=\"delete-filter-action\"\n        color=\"primary\"\n        (click)=\"onDeleteFilter()\"\n      >\n        <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\"> filter_alt_off </mat-icon>\n      </button>\n    </ng-container>\n  </div>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onRowEvent($event, element, rowAction)\"\n        [disabled]=\"isDisabled(rowAction)\"\n      >\n        {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n      </button>\n    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onColumnSettings(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onViewDefinition(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n  <table\n    [id]=\"id\"\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"onSortingEvent($event)\"\n    madFilter\n    (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n    [multiTemplateDataRows]=\"!!expandableDef\"\n  >\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n          (click)=\"onSelectionEvent(element.rowId)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n        </div>\n        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'SORT'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\n\n      <!-- data cell to be injected -->\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [class.text-right]=\"column.isRightAligned\"\n        [class.mad-dt-child-cell]=\"element.parentId\"\n        [ngSwitch]=\"column.transformer\"\n        (click)=\"!disableRowClick && onRowEvent($event, element)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            getCustomCellTemplate(column.id) || defaultCellTemplate;\n            context: { column: column, element: element, $implicit: element }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n        <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              getCustomExpandableTemplate() || defaultCellTemplate;\n              context: { column: element, element: element, $implicit: element }\n            \"\n          ></ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- header row where cells will be injected -->\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <!-- data row where cells will be injected -->\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n      *matRowDef=\"let row; columns: columnIds\"\n      (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n        {{ translateLabels ? (noDataText | translate) : noDataText }}\n      </td>\n    </tr>\n  </table>\n</div>\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#fff;opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}.delete-filter-action{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n    <mad-button-group class=\"table-action-group\" *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n      <button\n        mat-icon-button\n        [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n        [disabled]=\"disableDeleteFilterButton()\"\n        class=\"delete-filter-action\"\n        color=\"primary\"\n        (click)=\"onDeleteFilter()\"\n      >\n        <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\"> filter_alt_off </mat-icon>\n      </button>\n    </mad-button-group>\n  </div>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onRowEvent($event, element, rowAction)\"\n        [disabled]=\"isDisabled(rowAction)\"\n      >\n        {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n      </button>\n    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onColumnSettings(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onViewDefinition(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n  <table\n    [id]=\"id\"\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"onSortingEvent($event)\"\n    madFilter\n    (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n    [multiTemplateDataRows]=\"!!expandableDef\"\n  >\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n          (click)=\"onSelectionEvent(element.rowId)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n        </div>\n        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'SORT'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\n\n      <!-- data cell to be injected -->\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [class.text-right]=\"column.isRightAligned\"\n        [class.mad-dt-child-cell]=\"element.parentId\"\n        [ngSwitch]=\"column.transformer\"\n        (click)=\"!disableRowClick && onRowEvent($event, element)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            getCustomCellTemplate(column.id) || defaultCellTemplate;\n            context: { column: column, element: element, $implicit: element }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n        <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              getCustomExpandableTemplate() || defaultCellTemplate;\n              context: { column: element, element: element, $implicit: element }\n            \"\n          ></ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- header row where cells will be injected -->\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <!-- data row where cells will be injected -->\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n      *matRowDef=\"let row; columns: columnIds\"\n      (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n        {{ translateLabels ? (noDataText | translate) : noDataText }}\n      </td>\n    </tr>\n  </table>\n</div>\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#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}.delete-filter-action{vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title", "color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i17.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -3123,8 +3052,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         DataTableFilterHeader,
                         DataTableFilter,
                         MatTooltip,
-                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <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    <ng-container *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n      <button\n        mat-icon-button\n        [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n        [disabled]=\"disableDeleteFilterButton()\"\n        class=\"delete-filter-action\"\n        color=\"primary\"\n        (click)=\"onDeleteFilter()\"\n      >\n        <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\"> filter_alt_off </mat-icon>\n      </button>\n    </ng-container>\n  </div>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onRowEvent($event, element, rowAction)\"\n        [disabled]=\"isDisabled(rowAction)\"\n      >\n        {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n      </button>\n    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onColumnSettings(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onViewDefinition(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n  <table\n    [id]=\"id\"\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"onSortingEvent($event)\"\n    madFilter\n    (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n    [multiTemplateDataRows]=\"!!expandableDef\"\n  >\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n          (click)=\"onSelectionEvent(element.rowId)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n        </div>\n        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'SORT'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\n\n      <!-- data cell to be injected -->\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [class.text-right]=\"column.isRightAligned\"\n        [class.mad-dt-child-cell]=\"element.parentId\"\n        [ngSwitch]=\"column.transformer\"\n        (click)=\"!disableRowClick && onRowEvent($event, element)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            getCustomCellTemplate(column.id) || defaultCellTemplate;\n            context: { column: column, element: element, $implicit: element }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n        <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              getCustomExpandableTemplate() || defaultCellTemplate;\n              context: { column: element, element: element, $implicit: element }\n            \"\n          ></ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- header row where cells will be injected -->\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <!-- data row where cells will be injected -->\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n      *matRowDef=\"let row; columns: columnIds\"\n      (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n        {{ translateLabels ? (noDataText | translate) : noDataText }}\n      </td>\n    </tr>\n  </table>\n</div>\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#fff;opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}.delete-filter-action{vertical-align:middle}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }, { type: DataTablePersistenceService, decorators: [{
+                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)\">\n    <mad-button-group *ngFor=\"let actionGroup of tableActions\" class=\"table-action-group\">\n      <mad-outline-button\n        [hidden]=\"isHidden(tableAction)\"\n        [disabled]=\"isDisabled(tableAction)\"\n        *ngFor=\"let tableAction of actionGroup\"\n        (click)=\"onActionEvent(tableAction)\"\n      >\n        {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n        {{ getSelectedCount(tableAction.type) }}\n      </mad-outline-button>\n    </mad-button-group>\n    <mad-button-group class=\"table-action-group\" *ngIf=\"filterMode === 'COLUMN_BASED' && showDeleteFilterAction\">\n      <button\n        mat-icon-button\n        [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n        [disabled]=\"disableDeleteFilterButton()\"\n        class=\"delete-filter-action\"\n        color=\"primary\"\n        (click)=\"onDeleteFilter()\"\n      >\n        <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\"> filter_alt_off </mat-icon>\n      </button>\n    </mad-button-group>\n  </div>\n  <mat-form-field data-cy=\"filter-input\" *ngIf=\"filterMode === 'TABLE_BASED'\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <ng-container *ngFor=\"let rowAction of rowActions\">\n      <button\n        data-cy=\"row-action-menu-button\"\n        *ngIf=\"!isHidden(rowAction)\"\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onRowEvent($event, element, rowAction)\"\n        [disabled]=\"isDisabled(rowAction)\"\n      >\n        {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n      </button>\n    </ng-container>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onColumnSettings(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onViewDefinition(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div\n  *ngIf=\"filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length; else noData\"\n  class=\"datatable\"\n  [class]=\"tableClass\"\n>\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n  <table\n    [id]=\"id\"\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"onSortingEvent($event)\"\n    madFilter\n    (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n    [multiTemplateDataRows]=\"!!expandableDef\"\n  >\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"selectionEmitMode !== 'NONE' && selectionMode === 'BATCH'\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"showCheckbox(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          data-cy=\"row-action-button\"\n          *ngIf=\"showRowActionIcon(element) && hasVisibleRowActions(element)\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n          (click)=\"onSelectionEvent(element.rowId)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- SINGLE: row radio button -->\n        <div *ngIf=\"showRadioButton(element)\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n        </div>\n        <!-- EXPANDABLE: row is expandable/collapsable -->\n        <mad-icon-button *ngIf=\"showExpandableButton(element)\" (click)=\"onExpand($event, element)\">\n          <mat-icon *ngIf=\"expandedElement !== element\">keyboard_arrow_down</mat-icon>\n          <mat-icon *ngIf=\"expandedElement === element\">keyboard_arrow_up</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container [ngSwitch]=\"getDataTableHeaderType(column)\">\n        <ng-container *ngSwitchCase=\"'SORT'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'SORT_AND_FILTER'\">\n          <th\n            scope=\"col\"\n            mat-header-cell\n            *matHeaderCellDef\n            [class.text-right]=\"column.isRightAligned\"\n            mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n            [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n            mad-filter-header=\"{{ column.dataPropertyName }}\"\n            [madFilterColumnRightAligned]=\"column.isRightAligned\"\n            [madFilterOptions]=\"column.filterParams?.filterOptions\"\n          >\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n            {{ translateLabels ? (column.label | translate) : column.label }}\n          </th>\n        </ng-container>\n      </ng-container>\n\n      <!-- data cell to be injected -->\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [class.text-right]=\"column.isRightAligned\"\n        [class.mad-dt-child-cell]=\"element.parentId\"\n        [ngSwitch]=\"column.transformer\"\n        (click)=\"!disableRowClick && onRowEvent($event, element)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            getCustomCellTemplate(column.id) || defaultCellTemplate;\n            context: { column: column, element: element, $implicit: element }\n          \"\n        ></ng-container>\n      </td>\n    </ng-container>\n\n    <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n    <ng-container *ngIf=\"!!expandableDef\" [matColumnDef]=\"expandableColumnDef\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n        <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              getCustomExpandableTemplate() || defaultCellTemplate;\n              context: { column: element, element: element, $implicit: element }\n            \"\n          ></ng-container>\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- header row where cells will be injected -->\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <!-- data row where cells will be injected -->\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n      *matRowDef=\"let row; columns: columnIds\"\n      (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n    ></tr>\n    <ng-container *ngIf=\"!!expandableDef\">\n      <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n    </ng-container>\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n        {{ translateLabels ? (noDataText | translate) : noDataText }}\n      </td>\n    </tr>\n  </table>\n</div>\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"editableColumnDefinitions?.length === 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"(editableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"(viewableColumnDefinitions?.length || 0) > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"loading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n</ng-template>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;min-height:140px;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#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}.delete-filter-action{vertical-align:middle}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.MatDialog }, { type: DataTablePersistenceService, decorators: [{
                     type: Inject,
                     args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
                 }] }, { type: undefined, decorators: [{
@@ -3320,7 +3249,7 @@ class StepHeaderComponent extends CdkStepHeader {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: StepHeaderComponent, deps: [{ token: i1$5.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: StepHeaderComponent, deps: [{ token: i1$6.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: StepHeaderComponent, isStandalone: true, selector: "mad-step-header", inputs: { color: "color", index: "index", label: "label", state: "state", errorMessage: "errorMessage", selected: "selected", active: "active", optional: "optional", hasError: "hasError", completed: "completed", closed: "closed" }, host: { attributes: { "role": "tab" }, classAttribute: "mad-step-header" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"header\"\n  [style.background]=\"this.selected && !this.closed ? '#d8e2e9' : '#ffffff'\"\n  [ngClass]=\"this.hasError ? 'error-border' : 'check-border'\"\n>\n  <div [ngClass]=\"this.getCssForState()\"></div>\n  <div class=\"header-label\">\n    <mat-icon class=\"material-icons-outlined\">\n      {{ this.selected && !this.closed ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}\n    </mat-icon>\n  </div>\n  <div *ngIf=\"this.completed || this.hasError\" class=\"header-label\">\n    <mat-icon [ngClass]=\"this.completed ? 'green-check' : 'red-error'\">\n      {{ getIcon() }}\n    </mat-icon>\n  </div>\n  <span data-testid=\"step-number\" *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n  <div data-testid=\"step-label\" class=\"header-label\">{{ this.label }}</div>\n</div>\n", styles: [".header{overflow:hidden;outline:var(--error-color);cursor:pointer;box-sizing:content-box;-webkit-tap-highlight-color:transparent;border:1px solid lightgrey;width:100%;height:62px;flex-direction:row;box-sizing:border-box;display:flex;gap:1em}.header-label{align-items:center;display:flex}.step-state-complete{width:5px;background:green}.step-state-error{width:5px;background:var(--error-color)}.step-state-neutral{width:5px;background:#d3d3d3}.green-check{color:green}.red-error{color:var(--error-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: StepHeaderComponent, decorators: [{
@@ -3329,7 +3258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         class: 'mad-step-header',
                         role: 'tab',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatIconModule, NgIf], template: "<div\n  class=\"header\"\n  [style.background]=\"this.selected && !this.closed ? '#d8e2e9' : '#ffffff'\"\n  [ngClass]=\"this.hasError ? 'error-border' : 'check-border'\"\n>\n  <div [ngClass]=\"this.getCssForState()\"></div>\n  <div class=\"header-label\">\n    <mat-icon class=\"material-icons-outlined\">\n      {{ this.selected && !this.closed ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}\n    </mat-icon>\n  </div>\n  <div *ngIf=\"this.completed || this.hasError\" class=\"header-label\">\n    <mat-icon [ngClass]=\"this.completed ? 'green-check' : 'red-error'\">\n      {{ getIcon() }}\n    </mat-icon>\n  </div>\n  <span data-testid=\"step-number\" *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n  <div data-testid=\"step-label\" class=\"header-label\">{{ this.label }}</div>\n</div>\n", styles: [".header{overflow:hidden;outline:var(--error-color);cursor:pointer;box-sizing:content-box;-webkit-tap-highlight-color:transparent;border:1px solid lightgrey;width:100%;height:62px;flex-direction:row;box-sizing:border-box;display:flex;gap:1em}.header-label{align-items:center;display:flex}.step-state-complete{width:5px;background:green}.step-state-error{width:5px;background:var(--error-color)}.step-state-neutral{width:5px;background:#d3d3d3}.green-check{color:green}.red-error{color:var(--error-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--error-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { index: [{
+        }], ctorParameters: () => [{ type: i1$6.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { index: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -3485,7 +3414,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: "19.1.3", ngImport: i0, type: StepperComponent, deps: [{ token: i1$6.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: StepperComponent, deps: [{ token: i1$7.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: StepperComponent, isStandalone: true, 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 data-cy=\"step-container\" *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 data-cy=\"stepper-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}.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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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: "19.1.3", ngImport: i0, type: StepperComponent, decorators: [{
@@ -3495,7 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         '[attr.aria-orientation]': '"vertical"',
                         role: 'tablist',
                     }, animations: [madStepperAnimations.verticalStepTransition], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, NgTemplateOutlet, StepHeaderComponent], template: "<!-- Vertical stepper -->\n<ng-container>\n  <div data-cy=\"step-container\" *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 data-cy=\"stepper-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}.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: i1$6.Directionality, decorators: [{
+        }], ctorParameters: () => [{ type: i1$7.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { animationDone: [{
                 type: Output
@@ -3804,7 +3733,7 @@ class FlowbarComponent {
         return this._steps.slice(index + 1, this._steps.length).find((step) => step.enabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FlowbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: FlowbarComponent, isStandalone: true, selector: "mad-flowbar", inputs: { _steps: ["steps", "_steps"], _activeStep: ["activeStep", "_activeStep"] }, outputs: { _activeStepChange: "activeStepChange", _headerClick: "headerClick" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div class=\"stepper-container\">\n  <mat-horizontal-stepper #stepper [selectedIndex]=\"this.getIndexForActiveStep()\" (click)=\"triggerClick()\">\n    <mat-step *ngFor=\"let step of _steps\" [aria-labelledby]=\"!step.enabled ? 'disabled' : null\">\n      <ng-template matStepLabel>\n        <div class=\"step-header-overlay\" *ngIf=\"this._headerClick.observers.length > 0\" (click)=\"headerClick($event, step)\"></div>\n        <span>{{ step.label }}</span>\n      </ng-template>\n    </mat-step>\n  </mat-horizontal-stepper>\n</div>\n", styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{padding:0;height:auto}::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{margin:0 5px;border-top-width:4px}.step-header-overlay{position:absolute;width:100%;height:100%;right:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1$7.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1$7.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1$7.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: FlowbarComponent, isStandalone: true, selector: "mad-flowbar", inputs: { _steps: ["steps", "_steps"], _activeStep: ["activeStep", "_activeStep"] }, outputs: { _activeStepChange: "activeStepChange", _headerClick: "headerClick" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div class=\"stepper-container\">\n  <mat-horizontal-stepper #stepper [selectedIndex]=\"this.getIndexForActiveStep()\" (click)=\"triggerClick()\">\n    <mat-step *ngFor=\"let step of _steps\" [aria-labelledby]=\"!step.enabled ? 'disabled' : null\">\n      <ng-template matStepLabel>\n        <div class=\"step-header-overlay\" *ngIf=\"this._headerClick.observers.length > 0\" (click)=\"headerClick($event, step)\"></div>\n        <span>{{ step.label }}</span>\n      </ng-template>\n    </mat-step>\n  </mat-horizontal-stepper>\n</div>\n", styles: [".stepper-container{display:flex;padding:0 1rem}::ng-deep .mat-stepper-horizontal .mat-horizontal-stepper-header{padding:0;height:auto}::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{margin:0 5px;border-top-width:4px}.step-header-overlay{position:absolute;width:100%;height:100%;right:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1$8.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1$8.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1$8.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FlowbarComponent, decorators: [{
             type: Component,
@@ -3904,13 +3833,13 @@ class SidebarLayoutComponent {
     goToPreviousPage() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$8.Router }, { token: i2$3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          <button class=\"back-button\" *ngIf=\"hasBackButton\">\n            <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n          </button>\n          <h2 class=\"title\">\n            {{ title }}\n          </h2>\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$9.Router }, { token: i2$2.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          <button class=\"back-button\" *ngIf=\"hasBackButton\">\n            <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n          </button>\n          <h2 class=\"title\">\n            {{ title }}\n          </h2>\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-sidebar-layout', imports: [CommonModule, ContentPanelModule, PortalModule, MatIconModule, RouterModule], template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    <ng-container *ngIf=\"headerContentPortal; else defaultActionHeader\">\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    </ng-container>\n    <ng-template #defaultActionHeader>\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          <button class=\"back-button\" *ngIf=\"hasBackButton\">\n            <mat-icon (click)=\"goToPreviousPage()\" color=\"primary\"> arrow_back</mat-icon>\n          </button>\n          <h2 class=\"title\">\n            {{ title }}\n          </h2>\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </mad-content-header>\n  <mad-content-panel-container>\n    <mad-content-panel-container-sidebar *ngIf=\"sideBarItemsPortal\">\n      <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n    </mad-content-panel-container-sidebar>\n    <mad-content-panel-container-content *ngIf=\"contentPortal\">\n      <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n    </mad-content-panel-container-content>\n    <mad-content-panel-container-footer *ngIf=\"footerPortal\">\n      <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n    </mad-content-panel-container-footer>\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$8.Router }, { type: i2$3.Location }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$9.Router }, { type: i2$2.Location }], propDecorators: { title: [{
                 type: Input
             }], hasBackButton: [{
                 type: Input
@@ -4022,6 +3951,17 @@ class ToolbarService {
             this.backAction.href = goBackRoute;
         }
     }
+    /**
+     * Only supports routerLink (no href), but with additional query parameters
+     */
+    addBackActionRoute(goBackRoute, queryParams) {
+        this.backAction = {
+            matIcon: 'keyboard_backspace',
+            i18nActionKey: '',
+            routerLink: goBackRoute,
+            queryParams: queryParams || {},
+        };
+    }
     addSimpleBackButton(overrideIfPresent = false) {
         if (this.getBackAction() && !overrideIfPresent) {
             return;
@@ -4037,7 +3977,7 @@ class ToolbarService {
     clearMainActions() {
         this.mainActions = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarService, deps: [{ token: i1$8.Router }, { token: i2$4.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarService, deps: [{ token: i1$9.Router }, { token: i2$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarService, decorators: [{
@@ -4045,7 +3985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$8.Router }, { type: i2$4.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$9.Router }, { type: i2$3.TranslateService }] });
 
 class ToolbarComponent {
     constructor(breakpointObserver, titleService, toolbarService) {
@@ -4098,8 +4038,8 @@ class ToolbarComponent {
     hasImportantToolbarActions() {
         return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$9.BreakpointObserver }, { token: i2$5.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$a.BreakpointObserver }, { token: i2$4.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a\n    data-cy=\"back-link-button\"\n    [routerLink]=\"getBackAction().routerLink\"\n    [queryParams]=\"getBackAction().queryParams\"\n    *ngIf=\"isRouterLink(getBackAction())\"\n  >\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i18.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -4117,8 +4057,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         MatBadgeModule,
                         MatMenuModule,
                         AsyncPipe,
-                    ], template: "<mat-toolbar class=\"content-toolbar\">\n  <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$9.BreakpointObserver }, { type: i2$5.Title }, { type: ToolbarService }] });
+                    ], template: "<mat-toolbar class=\"content-toolbar\">\n  <a\n    data-cy=\"back-link-button\"\n    [routerLink]=\"getBackAction().routerLink\"\n    [queryParams]=\"getBackAction().queryParams\"\n    *ngIf=\"isRouterLink(getBackAction())\"\n  >\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n        <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n            <div class=\"action-button-content-container\">\n              <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n              {{ mainAction.actionName }}\n            </div>\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          data-cy=\"material-main-link-button\"\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          data-cy=\"material-main-action-button\"\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          data-cy=\"action-icon-button\"\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  data-cy=\"burger-menu-button\"\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:#fff}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$a.BreakpointObserver }, { type: i2$4.Title }, { type: ToolbarService }] });
 
 class ToolbarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4329,7 +4269,7 @@ class FileUploadComponent {
         return !this.multiple && this.fileList.length === 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList", removable: "removable" }, 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]=\"acceptedFileTypes\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <ng-container *ngIf=\"hasSingleFile(); else uploadDefault\">\n      {{ fileList[0].name }}\n    </ng-container>\n\n    <ng-template #uploadDefault>\n      <mat-icon>vertical_align_top</mat-icon>\n      {{ text ? text : 'Upload' }}\n    </ng-template>\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\" [removable]=\"removable\" (removed)=\"remove(file)\">\n      {{ file.name }}\n      <mat-icon matChipRemove *ngIf=\"removable\">delete_forever</mat-icon>\n    </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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList", removable: "removable" }, 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]=\"acceptedFileTypes\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <ng-container *ngIf=\"hasSingleFile(); else uploadDefault\">\n      {{ fileList[0].name }}\n    </ng-container>\n\n    <ng-template #uploadDefault>\n      <mat-icon>vertical_align_top</mat-icon>\n      {{ text ? text : 'Upload' }}\n    </ng-template>\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\" [removable]=\"removable\" (removed)=\"remove(file)\">\n      {{ file.name }}\n      <mat-icon matChipRemove *ngIf=\"removable\">delete_forever</mat-icon>\n    </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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4$2.MatChipRemove, selector: "[matChipRemove]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -4397,7 +4337,7 @@ class AlertComponent {
         this.action.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlertComponent, deps: [{ token: MAD_ALERT_DEFAULT_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: AlertComponent, isStandalone: true, selector: "mad-alert", inputs: { type: "type", message: "message", size: "size", actionText: "actionText", closeable: "closeable" }, outputs: { close: "close", action: "action" }, ngImport: i0, template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"\n    ><mat-icon>{{ icon }}</mat-icon></span\n  >\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"closeable\">\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"closeAlert()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: AlertComponent, isStandalone: true, selector: "mad-alert", inputs: { type: "type", message: "message", size: "size", actionText: "actionText", closeable: "closeable" }, outputs: { close: "close", action: "action" }, ngImport: i0, template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"\n    ><mat-icon>{{ icon }}</mat-icon></span\n  >\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"closeable\">\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"closeAlert()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -4429,5 +4369,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
+export { AlertComponent, BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelContainerSidebarComponent, ContentPanelModule, DangerButtonComponent, DataTableActionType, DataTableColumnsModalComponent, DataTableComponent, DataTablePersistenceService, DataTableTemplateCellDefinition, DataTableTemplateColumnDefinition, DataTableTemplateExpandableCellDefinition, DataTableTemplateExpandableColumnDefinition, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MAD_ALERT_DEFAULT_CONFIGURATION, MAD_ALERT_DEFAULT_CONFIGURATION_FACTORY, MAD_DATA_TABLE_GLOBAL_CONFIGURATION, MAD_DATA_TABLE_PERSISTENCE_SERVICE, MAD_READONLY_FORM_FIELD_DEFAULT_CONFIGURATION, MadBasicButton, MadButtonDirective, MadButtonGroupComponent, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, SidebarComponent, SidebarItemComponent, SidebarLayoutComponent, SidebarModule, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, VERSION, madStepperAnimations };
 //# sourceMappingURL=porscheinformatik-material-addons.mjs.map