@porscheinformatik/material-addons 0.0.34 → 0.0.99

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -0,0 +1,3229 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule, HostBinding, ElementRef, ViewChild, LOCALE_ID, Injectable, Inject, EventEmitter, Output, forwardRef, Directive, HostListener, TemplateRef, ContentChild, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, QueryList, Optional, ContentChildren } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/router';
+import { RouterModule, NavigationEnd } from '@angular/router';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5$1 from '@angular/cdk/text-field';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { of, Subject, Subscription } from 'rxjs';
+import * as i1$3 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import { map, throttleTime, tap, startWith, switchMap, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import * as i2$2 from '@angular/platform-browser';
+import * as i2$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i6 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i14 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import { style, animate, transition, trigger, state } from '@angular/animations';
+import * as i2$3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i8$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i6$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i7 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i1$4 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as i10 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import { SelectionModel } from '@angular/cdk/collections';
+import { v4 } from 'uuid';
+import * as i10$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i13 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
+import * as i1$5 from '@angular/cdk/a11y';
+import * as i3$2 from '@angular/cdk/bidi';
+import * as i2$4 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i4$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+
+class MaterialActionButtonComponent {
+    constructor() {
+        this.icon = 'add';
+        // Sets the lower padding higher providing some bottom space for a fixed paginator
+        this.liftHigher = true;
+        this.liftHigher2 = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: { actionName: "actionName", id: "id", icon: "icon", routerLink: "routerLink", liftHigher: "liftHigher", liftHigher2: "liftHigher2" }, ngImport: i0, template: "<div class=\"material-action-button {{ liftHigher ? 'lift-higher' : '' }} {{ liftHigher2 ? 'lift-higher-2' : '' }}\">\n  <a [routerLink]=\"routerLink\">\n    <button [id]=\"id\" mat-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"primary\" *ngIf=\"!liftHigher2\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n    <button [id]=\"id\" mat-mini-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"accent\" *ngIf=\"liftHigher2\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n  </a>\n</div>\n", styles: [".material-action-button{position:fixed;bottom:20px;right:20px;z-index:100;display:flex;flex-direction:column-reverse;align-items:center}.lift-higher{bottom:61px}.lift-higher-2{right:28px;bottom:121px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i1$1.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-material-action-button', template: "<div class=\"material-action-button {{ liftHigher ? 'lift-higher' : '' }} {{ liftHigher2 ? 'lift-higher-2' : '' }}\">\n  <a [routerLink]=\"routerLink\">\n    <button [id]=\"id\" mat-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"primary\" *ngIf=\"!liftHigher2\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n    <button [id]=\"id\" mat-mini-fab [matTooltipPosition]=\"'left'\" [matTooltip]=\"actionName\" color=\"accent\" *ngIf=\"liftHigher2\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </button>\n  </a>\n</div>\n", styles: [".material-action-button{position:fixed;bottom:20px;right:20px;z-index:100;display:flex;flex-direction:column-reverse;align-items:center}.lift-higher{bottom:61px}.lift-higher-2{right:28px;bottom:121px}\n"] }]
+        }], propDecorators: { actionName: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], liftHigher: [{
+                type: Input
+            }], liftHigher2: [{
+                type: Input
+            }] } });
+
+class MaterialActionButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: MaterialActionButtonModule, declarations: [MaterialActionButtonComponent], imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule], exports: [MaterialActionButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialActionButtonModule, imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialActionButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MaterialActionButtonComponent],
+                    imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule],
+                    exports: [MaterialActionButtonComponent],
+                }]
+        }] });
+
+class MadBasicButton {
+    constructor() {
+        this.disableClick = (e) => e.stopPropagation();
+    }
+    get pointerEvent() {
+        return this.disabled ? 'none' : 'auto';
+    }
+    get opacity() {
+        return this.disabled ? '0.35' : '1';
+    }
+    ngOnChanges() {
+        this.disableButton();
+    }
+    disableButton() {
+        if (this.disabled) {
+            this.button.nativeElement.addEventListener('click', this.disableClick);
+        }
+        else {
+            this.button.nativeElement.removeEventListener('click', this.disableClick);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MadBasicButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: MadBasicButton, selector: "ng-component", host: { properties: { "style.pointer-events": "this.pointerEvent", "style.opacity": "this.opacity" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MadBasicButton, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], propDecorators: { pointerEvent: [{
+                type: HostBinding,
+                args: ['style.pointer-events']
+            }], opacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }] } });
+
+class DangerButtonComponent extends MadBasicButton {
+    constructor() {
+        super();
+        this.title = '';
+        super.button = this.button;
+        super.disabled = this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DangerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DangerButtonComponent, selector: "mad-danger-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-raised-button color=\"warn\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DangerButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-danger-button', template: "<button mat-raised-button color=\"warn\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['btn', { read: ElementRef, static: true }]
+            }] } });
+
+class LinkButtonComponent extends MadBasicButton {
+    constructor() {
+        super();
+        this.title = '';
+        super.button = this.button;
+        super.disabled = this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: LinkButtonComponent, selector: "mad-link-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n  <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: LinkButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-link-button', template: "<button [title]=\"title\" [type]=\"type\" color=\"primary\" #btn mat-button>\n  <ng-content></ng-content>\n</button>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['btn', { read: ElementRef, static: true }]
+            }] } });
+
+class IconButtonComponent extends MadBasicButton {
+    constructor() {
+        super();
+        this.title = '';
+        super.button = this.button;
+        super.disabled = this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: IconButtonComponent, selector: "mad-icon-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-icon-button', template: "<button mat-icon-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['btn', { read: ElementRef, static: true }]
+            }] } });
+
+class OutlineButtonComponent extends MadBasicButton {
+    constructor() {
+        super();
+        this.title = '';
+        super.button = this.button;
+        super.disabled = this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OutlineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-stroked-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: OutlineButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-outline-button', template: "<button mat-stroked-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n" }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['btn', { read: ElementRef, static: true }]
+            }] } });
+
+class PrimaryButtonComponent extends MadBasicButton {
+    constructor() {
+        super();
+        this.title = '';
+        super.button = this.button;
+        super.disabled = this.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: { type: "type", disabled: "disabled", title: "title" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["btn"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n", styles: ["::ng-deep .mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-primary-button', template: "<button mat-raised-button color=\"primary\" [type]=\"type\" [title]=\"title\" #btn>\n  <ng-content></ng-content>\n</button>\n", styles: ["::ng-deep .mat-icon{vertical-align:middle}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], button: [{
+                type: ViewChild,
+                args: ['btn', { read: ElementRef, static: true }]
+            }] } });
+
+class ButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ButtonModule, declarations: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent], imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule], exports: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent],
+                    imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule],
+                    exports: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent],
+                }]
+        }] });
+
+class NumberFormatService {
+    static { this.NEGATIVE = '-'; }
+    static { this.NUMBERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; }
+    static { this.DEFAULT_FINAL_FORMATTING = true; }
+    static { this.DEFAULT_DECIMAL_PLACES = 2; }
+    static { this.DEFAULT_AUTOFILL_DECIMALS = false; }
+    static { this.DEFAULT_REMOVE_LEADING_ZEROS = false; }
+    constructor(locale) {
+        this.allowedKeys = [];
+        // try to get the current formatting
+        const localeDecimalSeparator = (1.1).toLocaleString(locale).charAt(1);
+        this.decimalSeparator = localeDecimalSeparator === ',' ? ',' : '.';
+        this.groupingSeparator = localeDecimalSeparator === ',' ? '.' : ',';
+        this.allowedKeys = [...NumberFormatService.NUMBERS, NumberFormatService.NEGATIVE, this.decimalSeparator];
+    }
+    static valueIsSet(value) {
+        return typeof value !== 'undefined' && value !== null && (typeof value !== 'string' || value.length !== 0);
+    }
+    format(value, options) {
+        return NumberFormatService.valueIsSet(value)
+            ? this.formatNumber(value.toString().replace(new RegExp('[.]', 'g'), this.decimalSeparator), options)
+            : '';
+    }
+    formatNumber(value, options) {
+        const autofillDecimals = this.valueOrDefault(options?.autofillDecimals, NumberFormatService.DEFAULT_AUTOFILL_DECIMALS);
+        const decimalPlaces = this.valueOrDefault(options?.decimalPlaces, NumberFormatService.DEFAULT_DECIMAL_PLACES);
+        const finalFormatting = this.valueOrDefault(options?.finalFormatting, NumberFormatService.DEFAULT_FINAL_FORMATTING);
+        let result = this.strip(value, { decimalPlaces, removeLeadingZeros: finalFormatting });
+        /* add grouping separator */
+        const decimalIndex = result.indexOf(this.decimalSeparator);
+        const isNegative = result.startsWith(NumberFormatService.NEGATIVE);
+        let i = decimalIndex > -1 ? decimalIndex : result.length;
+        while (i > (isNegative ? 4 : 3)) {
+            i -= 3;
+            result = result.substring(0, i) + this.groupingSeparator + result.substring(i, result.length);
+        }
+        if (finalFormatting) {
+            if (decimalPlaces > 0 && !!result) {
+                /* autofill decimal places */
+                let actualDecimalIndex = result.indexOf(this.decimalSeparator);
+                if (autofillDecimals) {
+                    if (actualDecimalIndex === -1) {
+                        actualDecimalIndex = result.length;
+                        result += this.decimalSeparator;
+                    }
+                    result = this.addMissingLeadingZero(result, actualDecimalIndex);
+                    actualDecimalIndex = result.indexOf(this.decimalSeparator);
+                    const actualDecimalPlaces = result.length - actualDecimalIndex - 1;
+                    for (let j = 0; j < decimalPlaces - actualDecimalPlaces; j++) {
+                        result += '0';
+                    }
+                }
+                else {
+                    result = this.addMissingLeadingZero(result, actualDecimalIndex);
+                }
+            }
+        }
+        return result;
+    }
+    strip(value, options) {
+        const decimalPlaces = this.valueOrDefault(options?.decimalPlaces, NumberFormatService.DEFAULT_DECIMAL_PLACES);
+        const removeLeadingZeros = this.valueOrDefault(options?.removeLeadingZeros, NumberFormatService.DEFAULT_REMOVE_LEADING_ZEROS);
+        let result = '';
+        let indexDecimalSep = -1;
+        let j = -1;
+        let ignoredChars = 0;
+        for (const char of value) {
+            j++;
+            if (this.allowedKeys.includes(char)) {
+                if (char === this.decimalSeparator) {
+                    if (decimalPlaces === 0) {
+                        /* dismiss content after a decimal separator, when no places allowed */
+                        break;
+                    }
+                    else if (indexDecimalSep > -1) {
+                        /* ignore subsequent decimal separators */
+                        continue;
+                    }
+                    indexDecimalSep = j;
+                }
+                if (char === '0' && removeLeadingZeros) {
+                    /* remove leading zero only if it's not the only zero in the 'value' string */
+                    if ((result.length === 0 && j + 1 !== value.length) || result === NumberFormatService.NEGATIVE) {
+                        ignoredChars++;
+                        continue;
+                    }
+                }
+                if (char === NumberFormatService.NEGATIVE && j > 0) {
+                    /* dismiss content after a negative sign not on first position */
+                    break;
+                }
+                if (indexDecimalSep > -1 && result.length + ignoredChars > indexDecimalSep + decimalPlaces) {
+                    /* dismiss content after maximum decimal places reached */
+                    break;
+                }
+                result += char;
+            }
+            else if (char === this.groupingSeparator) {
+                if (indexDecimalSep === -1) {
+                    ignoredChars++;
+                }
+            }
+            else {
+                /* dismiss content after a invalid character */
+                break;
+            }
+        }
+        return result;
+    }
+    addMissingLeadingZero(result, actualDecimalIndex) {
+        const isNegative = result.startsWith(NumberFormatService.NEGATIVE);
+        /* autoadd a zero before decimal separator, when it's missing */
+        if (actualDecimalIndex === 0) {
+            result = '0' + result;
+        }
+        /* autoadd a zero before decimal separator, when it's missing, for negative values */
+        if (actualDecimalIndex === 1 && isNegative) {
+            result = result[0] + '0' + result.substring(1, result.length);
+        }
+        return result;
+    }
+    valueOrDefault(value, defaultValue) {
+        return NumberFormatService.valueIsSet(value) ? value : defaultValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumberFormatService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumberFormatService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumberFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
+
+/**
+ * Read-only mat-form-field representation of provided value
+ *
+ * @author Stefan Laesser
+ */
+class ReadOnlyFormFieldComponent {
+    constructor(changeDetector, renderer, numberFormatService) {
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        this.numberFormatService = numberFormatService;
+        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;
+        /*
+         * 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;
+        /**
+         * if cdkTextareaAutosize is active for textareas
+         */
+        this.multilineAutoSize = false;
+        this.suffixClickedEmitter = new EventEmitter();
+        this.prefixClickedEmitter = new EventEmitter();
+        this.errorMatcher = {
+            isErrorState: () => !!this.errorMessage,
+        };
+    }
+    ngOnChanges(_) {
+        if (!NumberFormatService.valueIsSet(this.value)) {
+            this.value = '-';
+            if (this.shrinkIfEmpty) {
+                this.rows = 1;
+            }
+        }
+        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();
+    }
+    suffixClicked() {
+        this.suffixClickedEmitter.emit(null);
+    }
+    prefixClicked() {
+        this.prefixClickedEmitter.emit(null);
+    }
+    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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: NumberFormatService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: { value: "value", label: "label", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", multiline: "multiline", rows: "rows", id: "id", shrinkIfEmpty: "shrinkIfEmpty", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign + ' content'\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline content\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    [cdkTextareaAutosize]=\"multilineAutoSize\"\n  ></textarea>\n  <mat-error>{{ errorMessage }}</mat-error>\n  <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix }}</mat-icon>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-readonly-form-field', template: "<mat-form-field class=\"form-group mad-read-only\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign + ' content'\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline content\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    disabled\n    matInput\n    [cdkTextareaAutosize]=\"multilineAutoSize\"\n  ></textarea>\n  <mat-error>{{ errorMessage }}</mat-error>\n  <mat-icon *ngIf=\"suffix\" (click)=\"suffixClicked()\" class=\"pointer\" color=\"primary\" matSuffix>{{ suffix }}</mat-icon>\n  <mat-icon *ngIf=\"prefix\" (click)=\"prefixClicked()\" class=\"pointer\" color=\"primary\" matPrefix>{{ prefix }}</mat-icon>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%;width:-webkit-fill-available;width:-moz-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: NumberFormatService }], propDecorators: { originalContent: [{
+                type: ViewChild,
+                args: ['contentWrapper', { static: false }]
+            }], 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']
+            }] } });
+
+/**
+ * Wraps a mat-form-field to replace it by a readOnly representation if necessary
+ *
+ * @author Stefan Laesser
+ */
+class ReadOnlyFormFieldWrapperComponent {
+    constructor(changeDetector, elementRef) {
+        this.changeDetector = changeDetector;
+        this.elementRef = elementRef;
+        /**
+         * If set to "false", the contained mat-form-field is rendered in all it's glory.
+         * If set to "true", a readonly representation of the value is shown using the mat-form-fields label.
+         */
+        this.readonly = true;
+        this.textAlign = 'left';
+        this.formatNumber = false;
+        this.decimalPlaces = 2;
+        this.roundValue = false;
+        this.autofillDecimals = false;
+        this.unit = null;
+        this.unitPosition = 'left';
+        this.errorMessage = null;
+        /**
+         * If set to "false", a readonly input will be rendered.
+         * If set to "true", a readonly textarea will be rendered instead.
+         */
+        this.multiline = false;
+        /**
+         * 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.hideIconInReadOnlyMode = false;
+        /**
+         * if cdkTextareaAutosize is active for textareas
+         */
+        this.multilineAutoSize = false;
+        this.suffixClickedEmitter = new EventEmitter();
+        this.prefixClickedEmitter = new EventEmitter();
+        this.toolTipForInputEnabled = false;
+    }
+    ngOnInit() {
+        this.doRendering();
+    }
+    ngAfterViewInit() {
+        this.setReadonlyFieldStyle();
+        this.doRendering();
+    }
+    ngAfterViewChecked() {
+        this.setReadonlyFieldStyle();
+        this.setTooltipForOverflownField();
+    }
+    ngOnChanges(_) {
+        this.doRendering();
+    }
+    getLabel() {
+        if (!this.label) {
+            this.extractLabel();
+        }
+        return this.label;
+    }
+    suffixClicked() {
+        this.suffixClickedEmitter.emit(null);
+    }
+    prefixClicked() {
+        this.prefixClickedEmitter.emit(null);
+    }
+    doRendering() {
+        if (!this.originalContent) {
+            return;
+        }
+        if (!this.readonly) {
+            this.correctWidth();
+            return;
+        }
+        this.changeDetector.detectChanges();
+    }
+    extractLabel() {
+        if (!this.originalContent || !this.originalContent.nativeElement) {
+            return null;
+        }
+        const labelElement = this.originalContent.nativeElement.querySelector('mat-label');
+        this.label = labelElement ? labelElement.innerHTML : 'mat-label is missing!';
+    }
+    correctWidth() {
+        const formField = this.originalContent.nativeElement.querySelector('mat-form-field');
+        if (formField) {
+            formField.setAttribute('style', 'width:100%');
+        }
+    }
+    setReadonlyFieldStyle() {
+        const input = this.readOnlyContentWrapper?.nativeElement?.querySelector('input');
+        if (input) {
+            const textOverFlowStyleValue = this.getTextOverFlowStyleValue();
+            if (textOverFlowStyleValue) {
+                input.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()) {
+            const input = this.readOnlyContentWrapper?.nativeElement?.querySelector('input');
+            if (input) {
+                this.toolTipForInputEnabled = this.isTextOverflown(input);
+                if (this.toolTipForInputEnabled) {
+                    this.toolTipText = this.calculateToolTipText();
+                }
+                this.changeDetector.detectChanges();
+            }
+        }
+    }
+    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: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ReadOnlyFormFieldWrapperComponent, selector: "mad-readonly-form-field-wrapper", inputs: { readonly: "readonly", value: "value", textAlign: "textAlign", formatNumber: "formatNumber", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", errorMessage: "errorMessage", id: "id", multiline: "multiline", rows: "rows", shrinkIfEmpty: "shrinkIfEmpty", hideIconInReadOnlyMode: "hideIconInReadOnlyMode", suffix: "suffix", prefix: "prefix", multilineAutoSize: "multilineAutoSize" }, outputs: { suffixClickedEmitter: "suffixClickedEmitter", prefixClickedEmitter: "prefixClickedEmitter" }, viewQueries: [{ propertyName: "originalContent", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "readOnlyContentWrapper", first: true, predicate: ["readOnlyContentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #contentWrapper [hidden]=\"readonly\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n      matTooltip=\"{{ toolTipText }}\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ReadOnlyFormFieldComponent, selector: "mad-readonly-form-field", inputs: ["value", "label", "textAlign", "formatNumber", "decimalPlaces", "roundDisplayValue", "autofillDecimals", "unit", "unitPosition", "errorMessage", "multiline", "rows", "id", "shrinkIfEmpty", "suffix", "prefix", "multilineAutoSize"], outputs: ["suffixClickedEmitter", "prefixClickedEmitter"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-readonly-form-field-wrapper', template: "<div #contentWrapper [hidden]=\"readonly\">\n  <ng-content></ng-content>\n</div>\n\n<div #readOnlyContentWrapper>\n  <ng-container *ngIf=\"!!readonly\">\n    <mad-readonly-form-field\n      [label]=\"getLabel()\"\n      [value]=\"value\"\n      [textAlign]=\"textAlign\"\n      [formatNumber]=\"formatNumber\"\n      [decimalPlaces]=\"decimalPlaces\"\n      [roundDisplayValue]=\"roundValue\"\n      [autofillDecimals]=\"autofillDecimals\"\n      [unit]=\"unit\"\n      [unitPosition]=\"unitPosition\"\n      [errorMessage]=\"errorMessage\"\n      [multiline]=\"multiline\"\n      [rows]=\"rows\"\n      [shrinkIfEmpty]=\"shrinkIfEmpty\"\n      [id]=\"id\"\n      [suffix]=\"suffix\"\n      [prefix]=\"prefix\"\n      [multilineAutoSize]=\"multilineAutoSize\"\n      (suffixClickedEmitter)=\"suffixClicked()\"\n      (prefixClickedEmitter)=\"prefixClicked()\"\n      matTooltip=\"{{ toolTipText }}\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipDisabled=\"{{ !toolTipForInputEnabled }}\"\n    >\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n", styles: ["mat-form-field{width:inherit}div{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;word-break:break-all!important;white-space:normal!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { originalContent: [{
+                type: ViewChild,
+                args: ['contentWrapper', { static: false }]
+            }], readOnlyContentWrapper: [{
+                type: ViewChild,
+                args: ['readOnlyContentWrapper', { static: false }]
+            }], readonly: [{
+                type: Input
+            }], value: [{
+                type: Input,
+                args: ['value']
+            }], 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']
+            }], id: [{
+                type: Input
+            }], multiline: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], shrinkIfEmpty: [{
+                type: Input
+            }], hideIconInReadOnlyMode: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], multilineAutoSize: [{
+                type: Input
+            }], suffixClickedEmitter: [{
+                type: Output
+            }], prefixClickedEmitter: [{
+                type: Output
+            }] } });
+
+class ReadOnlyFormFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, declarations: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent], imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule], exports: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReadOnlyFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
+                    imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule, MatIconModule],
+                    exports: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
+                }]
+        }] });
+
+class ToolbarService {
+    constructor(router, translate) {
+        this.router = router;
+        this.translate = translate;
+        this.mainActions = []; // shown on the left, next to title, as big buttons
+        this.toolbarActions = []; // shown on the right as icons
+        this.toolbarActionsAlwaysAsMenu = false; // show the mobile view (burger menu) for toolbar actions
+        this.toolbarActionsMenuTitle = 'More'; // title of the burger menu
+        this.routerSubscription = this.router.events.subscribe((routingEvent) => {
+            if (routingEvent instanceof NavigationEnd) {
+                if (this.currentUrl !== routingEvent.urlAfterRedirects) {
+                    this.clearToolbarActions();
+                    this.clearMainActions();
+                    delete this.backAction;
+                    delete this.dataTitle;
+                }
+                this.currentUrl = router.url;
+            }
+        });
+    }
+    get toolbarTitle() {
+        return this.title;
+    }
+    set toolbarTitle(toolbarTitle) {
+        this.title = toolbarTitle;
+    }
+    ngOnDestroy() {
+        if (this.routerSubscription) {
+            this.routerSubscription.unsubscribe();
+        }
+    }
+    getToolbarActions() {
+        return this.toolbarActions;
+    }
+    addToolbarAction(action) {
+        this.translate
+            .get(action.i18nActionKey)
+            .toPromise()
+            .then((translated) => {
+            action.actionName = translated;
+            this.toolbarActions.push(action);
+        });
+    }
+    setDataTitle(dataTitle) {
+        this.dataTitle = dataTitle;
+    }
+    setToolbarActionsAlwaysAsMenu(toolbarActionsAlwaysAsMenu) {
+        this.toolbarActionsAlwaysAsMenu = toolbarActionsAlwaysAsMenu;
+    }
+    getToolbarActionsAlwaysAsMenu() {
+        return this.toolbarActionsAlwaysAsMenu;
+    }
+    getDataTitle() {
+        return this.dataTitle;
+    }
+    clearToolbarActions() {
+        this.toolbarActions = [];
+    }
+    getMainActions() {
+        return this.mainActions;
+    }
+    getBackAction() {
+        return this.backAction;
+    }
+    setToolbarActionsMenuTitle(toolbarActionsMenuTitle) {
+        this.toolbarActionsMenuTitle = toolbarActionsMenuTitle;
+    }
+    getToolbarActionsMenuTitle() {
+        return this.toolbarActionsMenuTitle;
+    }
+    addMainAction(mainAction) {
+        this.translate
+            .get(mainAction.i18nActionKey)
+            .toPromise()
+            .then((translated) => {
+            mainAction.actionName = translated;
+            this.mainActions.push(mainAction);
+        });
+    }
+    /**
+     * Per default the goBackRoute is a routerLink. But if a href should be used (for absolute browser routing) then isAbsoluteUrl can be set to true.
+     */
+    addBackAction(goBackRoute, isAbsoluteUrl = false) {
+        this.backAction = {
+            matIcon: 'keyboard_backspace',
+            i18nActionKey: '',
+        };
+        if (!isAbsoluteUrl) {
+            this.backAction.routerLink = goBackRoute;
+        }
+        else {
+            this.backAction.href = goBackRoute;
+        }
+    }
+    addSimpleBackButton(overrideIfPresent = false) {
+        if (this.getBackAction() && !overrideIfPresent) {
+            return;
+        }
+        this.backAction = {
+            matIcon: 'keyboard_backspace',
+            i18nActionKey: '',
+            action() {
+                window.history.back();
+            },
+        };
+    }
+    clearMainActions() {
+        this.mainActions = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarService, deps: [{ token: i1.Router }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i2$1.TranslateService }] });
+
+class ToolbarComponent {
+    constructor(breakpointObserver, titleService, toolbarService) {
+        this.breakpointObserver = breakpointObserver;
+        this.titleService = titleService;
+        this.toolbarService = toolbarService;
+        this.isHandset$ = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(map((result) => result.matches));
+    }
+    getTitle() {
+        const dataTitle = this.toolbarService.getDataTitle();
+        const toolbarTitle = this.toolbarService.toolbarTitle;
+        const title = !toolbarTitle || toolbarTitle.length <= 0 ? this.titleService.getTitle() : toolbarTitle;
+        return !dataTitle || dataTitle.length <= 0 ? title : title + ': ' + dataTitle;
+    }
+    getToolbarActions() {
+        return this.toolbarService.getToolbarActions();
+    }
+    getMainActions() {
+        return this.toolbarService.getMainActions();
+    }
+    hasPermission(action) {
+        if (!action || !action.showIf) {
+            return of(true);
+        }
+        return action.showIf;
+    }
+    isRouterLink(action) {
+        return action && !!action.routerLink;
+    }
+    isAbsoluteLink(action) {
+        return action && !!action.href;
+    }
+    isAction(action) {
+        return action && !!action.action;
+    }
+    getBackAction() {
+        return this.toolbarService.getBackAction();
+    }
+    getToolbarActionsAlwaysAsMenu() {
+        return this.toolbarService.getToolbarActionsAlwaysAsMenu();
+    }
+    getToolbarActionsMenuTitle() {
+        return this.toolbarService.getToolbarActionsMenuTitle();
+    }
+    showBadgeForMenu() {
+        return (this.getToolbarActions()
+            .slice(1) // the first icon is not shown in menu
+            .filter((value) => value.badge && value.badge.value).length > 0);
+    }
+    hasImportantToolbarActions() {
+        return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$3.BreakpointObserver }, { token: i2$2.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n        <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:white}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n  <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink(getBackAction())\">\n    <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n  <a (click)=\"getBackAction().action()\" *ngIf=\"isAction(getBackAction())\">\n    <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n      <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n    </button>\n  </a>\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n    <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n      <div *ngIf=\"!(isHandset$ | async)\">\n        <a [routerLink]=\"mainAction.routerLink\" *ngIf=\"isRouterLink(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n        <a (click)=\"mainAction.action()\" *ngIf=\"isAction(mainAction)\">\n          <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n            <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n            {{ mainAction.actionName }}\n          </mad-primary-button>\n        </a>\n      </div>\n      <div *ngIf=\"isHandset$ | async\">\n        <mad-material-action-button\n          *ngIf=\"isRouterLink(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          [routerLink]=\"mainAction.routerLink\"\n          [id]=\"mainAction.matIcon\"\n        />\n        <mad-material-action-button\n          *ngIf=\"isAction(getBackAction())\"\n          [actionName]=\"mainAction.actionName\"\n          [icon]=\"mainAction.matIcon\"\n          [liftHigher]=\"mainAction.liftHigherOnMobile\"\n          [liftHigher2]=\"i > 0\"\n          (click)=\"mainAction.action()\"\n          [id]=\"mainAction.matIcon\"\n        />\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"right-aligned no-print\">\n    <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n      <ng-container *ngIf=\"hasPermission(action) | async\">\n        <mad-icon-button\n          (click)=\"action.action()\"\n          *ngIf=\"\n            (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n            i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n            !!action.importantAction\n          \"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\"\n        >\n          <mat-icon\n            [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n            matBadgePosition=\"below after\"\n            [matBadge]=\"action.badge ? action.badge.value : null\"\n            >{{ action.matIcon }}</mat-icon\n          >\n        </mad-icon-button>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n      <ng-container *ngIf=\"getToolbarActions().length > 2\">\n        <mad-icon-button type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n            <ng-container *ngIf=\"!action.importantAction\">\n              <ng-container *ngIf=\"hasPermission(action) | async\">\n                <button\n                  *ngIf=\"i >= (hasImportantToolbarActions() ? 0 : 1)\"\n                  mat-menu-item\n                  (click)=\"action.action()\"\n                  [title]=\"action.actionName\"\n                >\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                    >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:white}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: i2$2.Title }, { type: ToolbarService }] });
+
+class ToolbarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ToolbarModule, declarations: [ToolbarComponent], imports: [CommonModule,
+            RouterModule,
+            MatMenuModule,
+            MatButtonModule,
+            MatToolbarModule,
+            MatIconModule,
+            MaterialActionButtonModule,
+            MatTooltipModule,
+            ButtonModule,
+            MatBadgeModule], exports: [ToolbarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarModule, imports: [CommonModule,
+            RouterModule,
+            MatMenuModule,
+            MatButtonModule,
+            MatToolbarModule,
+            MatIconModule,
+            MaterialActionButtonModule,
+            MatTooltipModule,
+            ButtonModule,
+            MatBadgeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolbarComponent],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        MatMenuModule,
+                        MatButtonModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MaterialActionButtonModule,
+                        MatTooltipModule,
+                        ButtonModule,
+                        MatBadgeModule,
+                    ],
+                    exports: [ToolbarComponent],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const BACK_KEYCODE = 8;
+const SPACE_KEYCODE = 32;
+const DEL_KEYCODE = 46;
+const CONTROL_KEYCODES_UPPER_BORDER = 46;
+const OTHER_CONTROL_KEYS = new Set([224, 91, 93]);
+class NumericFieldDirective {
+    set numericValue(value) {
+        if (this._numericValue !== value && !(isNaN(this._numericValue) && (isNaN(value) || value === null))) {
+            this.originalValue = value;
+            // Don't roundOrTruncate if value was set to empty otherwise input value will be set to 0 instead of empty
+            // which happens when an input is being reset
+            this._numericValue = value === null || value === undefined ? value : this.roundOrTruncate(value); // eslint-disable-line
+            this.handleInputChanged();
+        }
+    }
+    constructor(renderer, inputEl, numberFormatService) {
+        this.renderer = renderer;
+        this.inputEl = inputEl;
+        this.numberFormatService = numberFormatService;
+        this.textAlign = 'right';
+        this.decimalPlaces = 2;
+        this.roundValue = false;
+        this.autofillDecimals = false;
+        this.unit = null;
+        this.unitPosition = 'right';
+        this.numericValueChanged = new EventEmitter();
+        this.displayValue = '';
+        this.originalValue = NaN;
+        /* Control Values Accessor Stuff below */
+        // eslint-disable-next-line
+        this.onChange = () => { };
+        // eslint-disable-next-line
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState() {
+        // Dont need to implement since its just a directive
+    }
+    writeValue(value) {
+        this.numericValue = value;
+    }
+    ngOnInit() {
+        /* needs to be parsed as number explicitly as it comes as string from user input */
+        this.decimalPlaces = parseInt(this.decimalPlaces.toString(), 10);
+        this.inputChangeListener = this.renderer.listen(this.inputEl.nativeElement, 'blur', (event) => {
+            this.formatInput(event.target, true);
+        });
+        this.keyupListener = this.renderer.listen(this.inputEl.nativeElement, 'keyup', (event) => {
+            if (event.keyCode === BACK_KEYCODE || (event.keyCode >= CONTROL_KEYCODES_UPPER_BORDER && !OTHER_CONTROL_KEYS.has(event.keyCode))) {
+                this.formatInput(event.target, false);
+            }
+        });
+        this.keydownListener = this.renderer.listen(this.inputEl.nativeElement, 'keydown', (event) => {
+            const value = event.target.value;
+            if (this.numberFormatService.allowedKeys.includes(event.key) ||
+                (event.keyCode <= CONTROL_KEYCODES_UPPER_BORDER && event.keyCode > 0 && event.keyCode !== SPACE_KEYCODE) ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.altKey) {
+                /* allow negative sign only as first character and none exists outside of text selection */
+                const indexNegativeSign = value.indexOf(NumberFormatService.NEGATIVE);
+                if (event.key === NumberFormatService.NEGATIVE &&
+                    (event.target.selectionStart > 0 || indexNegativeSign > -1) &&
+                    (event.target.selectionStart === event.target.selectionEnd ||
+                        !(indexNegativeSign >= event.target.selectionStart && indexNegativeSign <= event.target.selectionEnd))) {
+                    return false;
+                }
+                /* no duplicate decimal separators */
+                const indexDecimalSep = value.indexOf(this.numberFormatService.decimalSeparator);
+                if (event.key === this.numberFormatService.decimalSeparator &&
+                    (indexDecimalSep > -1 || this.decimalPlaces === 0) &&
+                    (event.target.selectionStart === event.target.selectionEnd ||
+                        !(indexDecimalSep >= event.target.selectionStart && indexDecimalSep <= event.target.selectionEnd))) {
+                    return false;
+                }
+                /* prevent too many decimal places */
+                if (NumberFormatService.NUMBERS.includes(event.key) &&
+                    indexDecimalSep > -1 &&
+                    indexDecimalSep < event.target.selectionStart &&
+                    event.target.selectionStart === event.target.selectionEnd &&
+                    value.length > indexDecimalSep + this.decimalPlaces) {
+                    return false;
+                }
+                /* when deleting thousand separator, remove the digit before or after it */
+                const cursorStart = event.target.selectionStart;
+                if (cursorStart === event.target.selectionEnd) {
+                    if (event.keyCode === BACK_KEYCODE && value.substr(cursorStart - 1, 1) === this.numberFormatService.groupingSeparator) {
+                        event.target.value = value.substring(0, cursorStart - 2) + value.substring(cursorStart - 1, value.length);
+                        event.target.selectionStart = event.target.selectionEnd = cursorStart - 1;
+                        return false;
+                    }
+                    else if (event.keyCode === DEL_KEYCODE && value.substr(cursorStart, 1) === this.numberFormatService.groupingSeparator) {
+                        event.target.value = value.substring(0, cursorStart + 1) + value.substring(cursorStart + 2, value.length);
+                        event.target.selectionStart = event.target.selectionEnd = cursorStart + 1;
+                        return false;
+                    }
+                }
+                this.originalValue = NaN;
+            }
+            else {
+                return false;
+            }
+            return true;
+        });
+    }
+    ngOnDestroy() {
+        this.detachListener();
+    }
+    ngAfterViewChecked() {
+        this.injectUnitSymbol();
+    }
+    handleInputChanged() {
+        // Call in set timeout to avoid Expression has changed after it has been checked error.
+        // Sometimes the value changes because we cut off decimal places
+        setTimeout(() => {
+            this.updateInput(this.numberFormatService.format(this._numericValue, {
+                decimalPlaces: this.decimalPlaces,
+                finalFormatting: false,
+                autofillDecimals: this.autofillDecimals,
+            }));
+        }, 1);
+    }
+    formatInput(element, finalFormatting) {
+        const cursorPos = element.selectionStart;
+        const length = element.value.length;
+        const setCursor = this.displayValue !== element.value;
+        const textFormatted = this.numberFormatService.formatNumber(element.value, {
+            decimalPlaces: this.decimalPlaces,
+            finalFormatting,
+            autofillDecimals: this.autofillDecimals,
+        });
+        // special handling to move unit symbol along with display value
+        if (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 = textFormatted;
+            const width = Math.min(this.inputEl.nativeElement.clientWidth - this.unitSpan.clientWidth, Math.ceil(this.textSpan.clientWidth));
+            this.unitSpan.style.left = width + 'px';
+        }
+        this.updateInput(textFormatted);
+        if (setCursor) {
+            element.selectionStart = element.selectionEnd = Math.max(cursorPos + element.value.length - length, 0);
+        }
+    }
+    updateInput(value) {
+        this.displayValue = value;
+        this.inputEl.nativeElement.value = value;
+        this._numericValue = parseFloat(this.numberFormatService.strip(value, { decimalPlaces: this.decimalPlaces }).replace(this.numberFormatService.decimalSeparator, '.'));
+        if (this._numericValue !== this.roundOrTruncate(this.originalValue)) {
+            this.originalValue = this._numericValue;
+            this.numericValueChanged.emit(this._numericValue);
+        }
+    }
+    getValueForFormControl() {
+        this.formatInput(this.inputEl.nativeElement, false);
+        if (isNaN(this._numericValue)) {
+            // Return undefined instead of NaN to support the default required validator.
+            return undefined; // eslint-disable-line
+        }
+        return this._numericValue;
+    }
+    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', '5px');
+                this.renderer.appendChild(inputWrapper, this.unitSpan);
+            }
+        }
+        // do not display unit symbol if the unit should move along display value
+        if (!!this.unitSpan && this.textAlign === 'left' && this.unitPosition === 'right') {
+            if (NumberFormatService.valueIsSet(this.displayValue)) {
+                this.unitSpan.style.display = 'unset';
+            }
+            else {
+                this.unitSpan.style.display = 'none';
+            }
+        }
+        // always reset unit symbol
+        if (!!this.unitSpan) {
+            this.unitSpan.textContent = this.unit;
+        }
+    }
+    detachListener() {
+        if (this.inputChangeListener) {
+            this.inputChangeListener();
+            delete this.inputChangeListener;
+        }
+        if (this.keydownListener) {
+            this.keydownListener();
+            delete this.keydownListener;
+        }
+        if (this.keyupListener) {
+            this.keyupListener();
+            delete this.keyupListener;
+        }
+    }
+    roundOrTruncate(value) {
+        const method = this.roundValue ? 'round' : value < 0 ? 'ceil' : 'floor';
+        return Math[method](value * Math.pow(10, this.decimalPlaces)) / Math.pow(10, this.decimalPlaces);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumericFieldDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: NumberFormatService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: NumericFieldDirective, selector: "[madNumericField]", inputs: { textAlign: "textAlign", decimalPlaces: "decimalPlaces", roundValue: ["roundDisplayValue", "roundValue"], autofillDecimals: "autofillDecimals", unit: "unit", unitPosition: "unitPosition", numericValue: "numericValue" }, outputs: { numericValueChanged: "numericValueChange" }, host: { listeners: { "change": "onChange(getValueForFormControl())", "input": "onChange(getValueForFormControl())", "blur": "onTouched()" }, properties: { "class.text-right": "textAlign === \"right\"" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NumericFieldDirective),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumericFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madNumericField]',
+                    host: {
+                        '[class.text-right]': 'textAlign === "right"',
+                        '(change)': 'onChange(getValueForFormControl())',
+                        '(input)': 'onChange(getValueForFormControl())',
+                        '(blur)': 'onTouched()',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NumericFieldDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: NumberFormatService }], propDecorators: { textAlign: [{
+                type: Input,
+                args: ['textAlign']
+            }], 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']
+            }], numericValueChanged: [{
+                type: Output,
+                args: ['numericValueChange']
+            }], numericValue: [{
+                type: Input,
+                args: ['numericValue']
+            }] } });
+
+class NumericFieldModule {
+    static forRoot() {
+        return {
+            ngModule: NumericFieldModule,
+            providers: [NumberFormatService],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumericFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: NumericFieldModule, declarations: [NumericFieldDirective], exports: [NumericFieldDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumericFieldModule, providers: [NumberFormatService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: NumericFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [NumberFormatService],
+                    declarations: [NumericFieldDirective],
+                    exports: [NumericFieldDirective],
+                }]
+        }] });
+
+class ThrottleClickDirective {
+    constructor() {
+        this.throttleTime = 300;
+        this.throttleClick = new EventEmitter();
+        this.clicks = new Subject();
+    }
+    clickEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clicks.next(event);
+    }
+    ngOnInit() {
+        this.subscription = this.clicks.pipe(throttleTime(this.throttleTime)).subscribe((e) => this.throttleClick.emit(e));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ThrottleClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: { throttleTime: "throttleTime" }, outputs: { throttleClick: "throttleClick" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ThrottleClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madThrottleClick]',
+                }]
+        }], propDecorators: { throttleTime: [{
+                type: Input
+            }], throttleClick: [{
+                type: Output
+            }], clickEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class CardComponent {
+    constructor() {
+        this.cancelDisabled = false;
+        this.cancelText = 'NOT SET';
+        this.readonly = true;
+        this.editText = 'NOT SET';
+        this.expandable = true;
+        this.expanded = true;
+        this.saveDisabled = false;
+        this.saveText = 'NOT SET';
+        this.editMode = false;
+        this.additionalActionText = '';
+        this.edit = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.save = new EventEmitter();
+        this.additionalAction = new EventEmitter();
+    }
+    onCancel() {
+        this.cancel.emit(undefined);
+    }
+    onEdit() {
+        this.edit.emit(undefined);
+        this.expanded = true;
+    }
+    onSave() {
+        this.save.emit(undefined);
+    }
+    toggleCollapse() {
+        this.expanded = !this.expanded;
+    }
+    additionalActionClicked() {
+        this.additionalAction.emit(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: CardComponent, selector: "mad-card", inputs: { cancelDisabled: "cancelDisabled", cancelText: "cancelText", readonly: "readonly", editText: "editText", expandable: "expandable", expanded: "expanded", saveDisabled: "saveDisabled", saveText: "saveText", title: "title", editMode: "editMode", additionalActionIcon: "additionalActionIcon", additionalActionText: "additionalActionText" }, outputs: { edit: "edit", cancel: "cancel", save: "save", additionalAction: "additionalAction" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header class=\"header\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div class=\"top-right-icons\">\n        <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n          <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n          <mat-icon>{{ additionalActionIcon }}</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button [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 [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: ThrottleClickDirective, selector: "[madThrottleClick]", inputs: ["throttleTime"], outputs: ["throttleClick"] }], animations: [
+            trigger('collapseExpandAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                    animate('100ms', style({
+                        opacity: 1,
+                        height: '*',
+                    })),
+                ]),
+                transition(':leave', [
+                    style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                    animate('100ms', style({
+                        opacity: 0,
+                        height: 0,
+                    })),
+                ]),
+            ]),
+            trigger('rotateIcon', [
+                state('true', style({ transform: 'rotate(0)' })),
+                state('false', style({ transform: 'rotate(180deg)' })),
+                transition('true => false', animate('100ms ease-out')),
+                transition('false => true', animate('100ms ease-in')),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-card', animations: [
+                        trigger('collapseExpandAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, height: 0, overflow: 'hidden' }),
+                                animate('100ms', style({
+                                    opacity: 1,
+                                    height: '*',
+                                })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, height: '*', overflow: 'hidden' }),
+                                animate('100ms', style({
+                                    opacity: 0,
+                                    height: 0,
+                                })),
+                            ]),
+                        ]),
+                        trigger('rotateIcon', [
+                            state('true', style({ transform: 'rotate(0)' })),
+                            state('false', style({ transform: 'rotate(180deg)' })),
+                            transition('true => false', animate('100ms ease-out')),
+                            transition('false => true', animate('100ms ease-in')),
+                        ]),
+                    ], template: "<mat-card>\n  <mat-card-header class=\"header\">\n    <mat-card-title-group class=\"center\">\n      <mat-card-title class=\"small-title-container\">{{ title }}</mat-card-title>\n      <div class=\"top-right-icons\">\n        <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n          <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button (click)=\"additionalActionClicked()\" *ngIf=\"additionalActionIcon\" [title]=\"additionalActionText\" type=\"button\">\n          <mat-icon>{{ additionalActionIcon }}</mat-icon>\n        </mad-icon-button>\n        <mad-icon-button [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 [title]=\"saveText\" [disabled]=\"saveDisabled\" (throttleClick)=\"onSave()\" madThrottleClick>\n      {{ saveText }}\n    </mad-primary-button>\n    <mad-outline-button [title]=\"cancelText\" [disabled]=\"cancelDisabled\" (click)=\"onCancel()\">\n      {{ cancelText }}\n    </mad-outline-button>\n  </mat-card-actions>\n</mat-card>\n", styles: [".top-right-icons{text-align:end;width:-moz-fit-content;width:fit-content}.center{display:flex;align-items:center}.header{height:48px}\n"] }]
+        }], propDecorators: { cancelDisabled: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], editText: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], saveDisabled: [{
+                type: Input
+            }], saveText: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], additionalActionIcon: [{
+                type: Input
+            }], additionalActionText: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], additionalAction: [{
+                type: Output
+            }] } });
+
+class ThrottleClickModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ThrottleClickModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ThrottleClickModule, declarations: [ThrottleClickDirective], imports: [CommonModule], exports: [ThrottleClickDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ThrottleClickModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ThrottleClickModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ThrottleClickDirective],
+                    imports: [CommonModule],
+                    exports: [ThrottleClickDirective],
+                }]
+        }] });
+
+class CardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, MatButtonModule, ThrottleClickModule], exports: [CardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardModule, imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, MatButtonModule, ThrottleClickModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CardComponent],
+                    imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, MatButtonModule, ThrottleClickModule],
+                    exports: [CardComponent],
+                }]
+        }] });
+
+class BaseQuickListComponent {
+    constructor(changeDetectorRef, formBuilder) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.formBuilder = formBuilder;
+        this.allItems = [];
+        this.addLabel = 'NOT SET';
+        this.addPossible = true;
+        this.removePossible = true;
+        this.blankItem = {};
+        this.added = new EventEmitter();
+        this.removed = new EventEmitter();
+    }
+    ngOnInit() {
+        this.addEventFunction = this.addItem.bind(this);
+        if (this.minItems) {
+            for (let n = this.allItems.length; n < this.minItems; n++) {
+                this.interalAddItem();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.setFocusOnAdd(), 1);
+    }
+    addItem() {
+        const newItem = this.interalAddItem();
+        if (!!newItem) {
+            this.added.emit(newItem);
+        }
+    }
+    addReactiveItem() {
+        if (this.isAddReactiveAllowed()) {
+            this.added.emit(null);
+        }
+    }
+    removeItem(item) {
+        if (this.isDeleteAllowed()) {
+            this.allItems.splice(this.allItems.indexOf(item), 1);
+            this.removed.emit(item);
+        }
+    }
+    removeReactiveItem(item) {
+        if (this.isDeleteReactiveAllowed()) {
+            const index = this.formArray.controls.indexOf(item);
+            if (index >= 0) {
+                this.formArray.controls.splice(index, 1);
+                this.formArray.updateValueAndValidity();
+                this.removed.emit(null);
+            }
+        }
+    }
+    setFocusOnAdd() {
+        this.rowCountFocus = this.itemRows.length;
+        this.itemRows.changes.subscribe((els) => {
+            if (els.length > this.rowCountFocus && !!els.last) {
+                const firstFocusable = els.last.nativeElement.querySelector("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])");
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            }
+            this.rowCountFocus = els.length;
+        });
+    }
+    isAddAllowed() {
+        return this.addPossible && (!this.maxItems || this.allItems?.length < this.maxItems);
+    }
+    isAddReactiveAllowed() {
+        return this.addPossible && (!this.maxItems || this.formArray?.controls.length < this.maxItems);
+    }
+    isDeleteAllowed() {
+        return this.removePossible && (!this.minItems || this.allItems?.length > this.minItems);
+    }
+    isDeleteReactiveAllowed() {
+        return this.removePossible && (!this.minItems || this.formArray?.controls.length > this.minItems);
+    }
+    interalAddItem() {
+        if (this.isAddAllowed()) {
+            const newItem = { ...this.blankItem };
+            // creates ids in the form of "n5kdz1pljl8"
+            newItem.id = Math.random().toString(36).substring(2);
+            this.allItems.push(newItem);
+            this.changeDetectorRef.detectChanges();
+            return newItem;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: BaseQuickListComponent, 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: "17.0.4", ngImport: i0, type: BaseQuickListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-base-quick-list', template: '' }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }], propDecorators: { allItems: [{
+                type: Input
+            }], addLabel: [{
+                type: Input
+            }], addPossible: [{
+                type: Input
+            }], removePossible: [{
+                type: Input
+            }], blankItem: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], maxItems: [{
+                type: Input
+            }], minItems: [{
+                type: Input
+            }], formArray: [{
+                type: Input
+            }], added: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], itemRows: [{
+                type: ViewChildren,
+                args: ['row']
+            }] } });
+
+class QuickListCompactComponent extends BaseQuickListComponent {
+    constructor(changeDetectorRef, formBuilder) {
+        super(changeDetectorRef, formBuilder);
+        this.changeDetectorRef = changeDetectorRef;
+        this.formBuilder = formBuilder;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: QuickListCompactComponent, 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-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 *ngIf=\"!readonly && !this.allItems.length\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListCompactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-quick-list-compact', 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button *ngIf=\"!readonly && isDeleteAllowed()\" (click)=\"removeItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-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 *ngIf=\"!readonly && !this.allItems.length\" (click)=\"addItem()\" [disabled]=\"!isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n" }]
+        }], 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 {
+    constructor(changeDetectorRef, formBuilder) {
+        super(changeDetectorRef, formBuilder);
+        this.changeDetectorRef = changeDetectorRef;
+        this.formBuilder = formBuilder;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: QuickListComponent, 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-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 *ngIf=\"!readonly\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-quick-list', template: "<h3>\n  <ng-content select=\"label\"></ng-content>\n</h3>\n<ng-container *ngFor=\"let item of allItems\">\n  <div *ngIf=\"itemTemplate\" #row style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-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 *ngIf=\"!readonly\" (click)=\"addItem()\" [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
+
+class ReactiveFormQuickListComponent extends BaseQuickListComponent {
+    constructor(changeDetectorRef, formBuilder) {
+        super(changeDetectorRef, formBuilder);
+        this.changeDetectorRef = changeDetectorRef;
+        this.formBuilder = formBuilder;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: ReactiveFormQuickListComponent, 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-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 *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReactiveFormQuickListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-reactive-form-quick-list', 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-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 *ngIf=\"!readonly\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-outline-button>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
+
+class ReactiveFormQuickListCompactComponent extends BaseQuickListComponent {
+    constructor(changeDetectorRef, formBuilder) {
+        super(changeDetectorRef, formBuilder);
+        this.changeDetectorRef = changeDetectorRef;
+        this.formBuilder = formBuilder;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: ReactiveFormQuickListCompactComponent, 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-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 *ngIf=\"!readonly && !this.formArray?.controls.length\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LinkButtonComponent, selector: "mad-link-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ReactiveFormQuickListCompactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-reactive-form-quick-list-compact', 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 style=\"display: flex; flex-direction: row\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n    <mad-icon-button *ngIf=\"!readonly && isDeleteReactiveAllowed()\" (click)=\"removeReactiveItem(item)\">\n      <mat-icon>delete</mat-icon>\n    </mad-icon-button>\n    <mad-icon-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 *ngIf=\"!readonly && !this.formArray?.controls.length\" (click)=\"addReactiveItem()\" [disabled]=\"!isAddReactiveAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }] });
+
+class QuickListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: QuickListModule, declarations: [QuickListComponent,
+            BaseQuickListComponent,
+            QuickListCompactComponent,
+            ReactiveFormQuickListComponent,
+            ReactiveFormQuickListCompactComponent], imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, ReactiveFormsModule], exports: [QuickListComponent,
+            QuickListCompactComponent,
+            BaseQuickListComponent,
+            ReactiveFormQuickListComponent,
+            ReactiveFormQuickListCompactComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListModule, imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: QuickListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        QuickListComponent,
+                        BaseQuickListComponent,
+                        QuickListCompactComponent,
+                        ReactiveFormQuickListComponent,
+                        ReactiveFormQuickListCompactComponent,
+                    ],
+                    imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule, ReactiveFormsModule],
+                    exports: [
+                        QuickListComponent,
+                        QuickListCompactComponent,
+                        BaseQuickListComponent,
+                        ReactiveFormQuickListComponent,
+                        ReactiveFormQuickListCompactComponent,
+                    ],
+                }]
+        }] });
+
+class TableComponent {
+    constructor() {
+        this.columns = [];
+        this.filterLabel = 'NOT SET';
+        this.filterPlaceholder = 'NOT SET';
+        this.pageSizeOptions = [5, 10, 15];
+        this.defaultPageSize = this.pageSizeOptions?.[0] || 10;
+        this.rowActions = [];
+        this.tableActions = [];
+        this.tableAction = new EventEmitter();
+        this.rowAction = new EventEmitter();
+        this.sortEvent = new EventEmitter();
+        this.ACTION_COLUMN_NAME = '__action__';
+        this.isFilterEnabled = false;
+        this.isPaginationEnabled = false;
+    }
+    set displayedData(data) {
+        if (!this.dataSource) {
+            this.dataSource = new MatTableDataSource(data);
+        }
+        else {
+            this.dataSource.data = data;
+        }
+    }
+    set paginationEnabled(isPaginationEnabled) {
+        this.isPaginationEnabled = isPaginationEnabled;
+        // eslint-disable-next-line
+        const pageSize = this.isPaginationEnabled ? this.defaultPageSize : Number.MAX_VALUE;
+        if (this.dataSource.paginator) {
+            this.dataSource.paginator.pageSize = pageSize;
+        }
+    }
+    set filterEnabled(isFilterEnabled) {
+        this.isFilterEnabled = isFilterEnabled;
+        this.setFilterValue(undefined);
+    }
+    ngOnInit() {
+        this.columnNames = this.columns.map((column) => column.label);
+        this.isRowClickable = this.rowActions.length > 0;
+        if (this.isRowClickable) {
+            this.columnNames.unshift(this.ACTION_COLUMN_NAME);
+            this.defaultAction = this.rowActions[0];
+        }
+    }
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        // set custom filter predicate to enable search for multiple search strings:
+        // e.g. "one two three"
+        this.dataSource.filterPredicate = (data, filter) => !filter || filter.split(/\s+/).every((term) => !!Object.keys(data).find((key) => data[key].includes(term)));
+    }
+    onFilter(value) {
+        this.setFilterValue(value);
+    }
+    onRowEvent(event, row, action = this.defaultAction) {
+        if (!!action && !this.isClickOnRowMenuIcon(event)) {
+            this.rowAction.emit({ ...action, outputRow: row });
+        }
+    }
+    onSortingEvent(sortingParams) {
+        this.sortEvent.emit(sortingParams);
+    }
+    onTableAction(tableAction) {
+        if (!!tableAction) {
+            this.tableAction.emit(tableAction);
+        }
+    }
+    setFilterValue(value) {
+        this.dataSource.filter = value?.trim().toLowerCase();
+    }
+    isClickOnRowMenuIcon(event) {
+        return event?.target?.classList.contains('mat-icon');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableComponent, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\" sticky>\n      <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n</div>\n<!-- Pagination -->\n<mat-paginator\n  [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n  [pageSize]=\"defaultPageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-table', 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"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], filterLabel: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], noDataText: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], defaultPageSize: [{
+                type: Input
+            }], rowActions: [{
+                type: Input
+            }], tableActions: [{
+                type: Input
+            }], tableAction: [{
+                type: Output
+            }], rowAction: [{
+                type: Output
+            }], sortEvent: [{
+                type: Output
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: false }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort, { static: true }]
+            }], displayedData: [{
+                type: Input
+            }], paginationEnabled: [{
+                type: Input
+            }], filterEnabled: [{
+                type: Input
+            }] } });
+
+class TableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: TableModule, declarations: [TableComponent], imports: [CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatMenuModule,
+            MatPaginatorModule,
+            MatSortModule,
+            MatTableModule,
+            ButtonModule], exports: [TableComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableModule, imports: [CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatMenuModule,
+            MatPaginatorModule,
+            MatSortModule,
+            MatTableModule,
+            ButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TableComponent],
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatTableModule,
+                        ButtonModule,
+                    ],
+                    exports: [TableComponent],
+                }]
+        }] });
+
+class DataTableColumnsModalComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.selectedColumns = [];
+        this.availableColumns = [];
+        this.filteredAvailableColumns = [];
+    }
+    ngOnInit() {
+        this.definition = this.data.definition;
+        for (const column of this.data.allColumns) {
+            const columnId = column.id;
+            const selectedColumnIds = this.definition.displayedColumns.map((col) => col.id);
+            if (selectedColumnIds.includes(columnId)) {
+                this.selectedColumns.push(column);
+            }
+            else {
+                this.availableColumns.push(column);
+            }
+        }
+        this.clearFilterValue();
+    }
+    onDrop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            const itemIndex = this.findMatchingItemIndex(event.previousContainer, event.item);
+            transferArrayItem(event.previousContainer.data, event.container.data, itemIndex, event.currentIndex);
+            this.clearFilterValue();
+            this.availableColumns.sort((a, b) => a.label.localeCompare(b.label));
+        }
+    }
+    onSave() {
+        this.definition.displayedColumns = this.selectedColumns;
+        const saveChange = {
+            action: 'SAVE',
+            definition: this.definition,
+        };
+        this.dialogRef.close(saveChange);
+    }
+    onDelete() {
+        const deleteChange = {
+            action: 'DELETE',
+            definition: this.definition,
+        };
+        this.dialogRef.close(deleteChange);
+    }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    updateFilterValue() {
+        if (this.searchFilter?.length > 0) {
+            this.filteredAvailableColumns = this.availableColumns.filter((c) => c.label.toLowerCase().includes(this.searchFilter.toLowerCase()));
+        }
+        else {
+            this.filteredAvailableColumns = [...this.availableColumns];
+        }
+    }
+    findMatchingItemIndex(previousContainer, item) {
+        const itemId = item.element.nativeElement.id;
+        const previousContainerItems = [...previousContainer.data];
+        if (previousContainerItems?.length < 1) {
+            return 0;
+        }
+        for (let itemIndex = 0; itemIndex < previousContainerItems.length; itemIndex++) {
+            if (previousContainerItems[itemIndex].id === itemId) {
+                return itemIndex;
+            }
+        }
+        return 0;
+    }
+    clearFilterValue() {
+        this.searchFilter = '';
+        this.filteredAvailableColumns = [...this.availableColumns];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: DataTableColumnsModalComponent, selector: "mad-data-table-columns-modal.component", ngImport: i0, template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div class=\"column-drag-box\" *ngFor=\"let selectedColumn of selectedColumns; let i = index\" cdkDrag [id]=\"selectedColumn.id\">\n          {{ i + 1 }}. {{ selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n          <input\n            matInput\n            autocomplete=\"off\"\n            (keyup)=\"updateFilterValue()\"\n            placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{ availableColumn.label }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data?.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data?.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n    {{ data?.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: DangerButtonComponent, selector: "mad-danger-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableColumnsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-data-table-columns-modal.component', template: "<h1 mat-dialog-title>{{ data?.titleLabel | translate }}</h1>\n<div mat-dialog-content>\n  <div class=\"column-drag-main-content\">\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">{{ data?.infoTextLabel | translate }}</div>\n      <div class=\"column-drag-container-header\">{{ data?.selectedLabel | translate }}</div>\n      <div\n        cdkDropList\n        #selectedList=\"cdkDropList\"\n        [cdkDropListData]=\"selectedColumns\"\n        [cdkDropListConnectedTo]=\"[availableList]\"\n        class=\"column-drag-list selected-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div class=\"column-drag-box\" *ngFor=\"let selectedColumn of selectedColumns; let i = index\" cdkDrag [id]=\"selectedColumn.id\">\n          {{ i + 1 }}. {{ selectedColumn.label | translate }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column-drag-container\">\n      <div class=\"column-drag-info-area\">\n        <!-- Table filter -->\n        <mat-form-field>\n          <mat-label>{{ data?.filterColumnsLabel | translate }}</mat-label>\n          <input\n            matInput\n            autocomplete=\"off\"\n            (keyup)=\"updateFilterValue()\"\n            placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\"\n            [(ngModel)]=\"searchFilter\"\n          />\n          <button *ngIf=\"searchFilter\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n      <div class=\"column-drag-container-header\">{{ data?.availableLabel | translate }}</div>\n      <div\n        cdkDropList\n        cdkDropListSortingDisabled\n        #availableList=\"cdkDropList\"\n        [cdkDropListData]=\"availableColumns\"\n        [cdkDropListConnectedTo]=\"[selectedList]\"\n        class=\"column-drag-list\"\n        (cdkDropListDropped)=\"onDrop($event)\"\n      >\n        <div *ngFor=\"let availableColumn of filteredAvailableColumns\" class=\"column-drag-box\" cdkDrag [id]=\"availableColumn.id\">\n          {{ availableColumn.label }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div mat-dialog-actions [align]=\"'end'\">\n  <mad-outline-button (click)=\"onCancel()\">\n    {{ data?.cancelLabel | translate }}\n  </mad-outline-button>\n  <mad-danger-button *ngIf=\"data?.deleteDefinitionAllowed\" (click)=\"onDelete()\">\n    {{ data?.deleteLabel | translate }}\n  </mad-danger-button>\n  <mad-primary-button (click)=\"onSave()\" [disabled]=\"!(this.selectedColumns?.length > 0)\">\n    {{ data?.saveLabel | translate }}\n  </mad-primary-button>\n</div>\n", styles: [".column-drag-main-content{display:flex;flex-direction:row;width:544px;justify-content:space-between;padding:8px 8px 16px;margin-bottom:16px;border-bottom:1px solid whitesmoke}.column-drag-container{width:256px;max-width:100%;display:inline-block;vertical-align:top;font-size:small}.info-box{width:100%;font-size:small;margin-bottom:16px;color:#000000a8}.column-drag-info-area{width:100%;height:36px;margin-bottom:32px;color:#000000a8;font-size:small;display:flex;justify-content:right;align-items:stretch;flex-direction:column}.column-drag-list{border:solid 1px #ccc;height:200px;box-sizing:border-box;background:white;border-radius:4px;overflow:auto;display:block}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{padding:12px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;height:40px;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class DataTableActionType {
+    static { this.SINGLE = 'SINGLE'; }
+    static { this.BATCH = 'BATCH'; }
+    static { this.NONE = 'NONE'; }
+}
+
+class DataTableComponent {
+    set filterValue(filterValue) {
+        const filterString = '' + filterValue;
+        if (this.dataSource) {
+            this.setFilterValue(filterString);
+        }
+    }
+    set displayedColumns(cols) {
+        if (!this.displayedColumnDefinition) {
+            this.columns = cols ? [...cols] : [];
+            this.columnIds = this.columns.map((column) => column.id);
+            this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+        }
+    }
+    set displayedColumnDefinition(def) {
+        this.selectedColumnDefinion = def;
+        this.columns = def.displayedColumns;
+        this.columnIds = this.columns.map((column) => column.id);
+        this.columnIds.unshift(this.ACTION_COLUMN_NAME);
+    }
+    set tableData(data) {
+        const dataArray = data ? data : [];
+        if (!this.dataSource) {
+            this.dataSource = new MatTableDataSource(dataArray);
+        }
+        this.createDataMapsAndSetDisplayedDataSourceData(dataArray);
+    }
+    set page(page) {
+        this.paginatorPageIndex = page.pageIndex;
+        this.paginatorPageSize = page.pageSize;
+        this.paginatorLength = page.length;
+    }
+    set columnDefinitions(definitions) {
+        this.editableColumnDefinitions = [];
+        this.viewableColumnDefinitions = [];
+        this.allColumnDefinitions = [...definitions];
+        for (const definition of definitions) {
+            if (definition.editable) {
+                this.editableColumnDefinitions.push(definition);
+            }
+            if (definition.displayedColumns?.length > 0) {
+                this.viewableColumnDefinitions.push(definition);
+            }
+        }
+    }
+    set loading(isLoading) {
+        this.isLoading = isLoading;
+    }
+    set defaultPageSize(defaultSize) {
+        this.paginatorPageSize = defaultSize;
+    }
+    set externalPaginator(paginator) {
+        this.extPaginator = paginator;
+    }
+    set paginationEnabled(isPaginationEnabled) {
+        this.isPaginationEnabled = isPaginationEnabled;
+        this.unsetPageSizeIfNecessary();
+    }
+    set allColumns(allColumns) {
+        this.allAvailableColumns = allColumns;
+        if (allColumns && this.showColumnModal) {
+            this.openColumnModal();
+        }
+    }
+    set filterEnabled(isFilterEnabled) {
+        this.isFilterEnabled = !this.useAsync ? isFilterEnabled : false;
+        this.setFilterValue(undefined);
+    }
+    set forceMode(mode) {
+        if (mode === this.SINGLE || mode === this.BATCH || mode === this.NONE) {
+            this._forceMode = mode;
+            this.mode = mode;
+            this.selectionModel.clear();
+            this.setActions();
+        }
+    }
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+        // Translations
+        this.filterLabel = 'Filter';
+        this.filterPlaceholder = '';
+        this.filterColumnsLabel = 'Filter';
+        this.filterColumnsPlaceHolder = 'Filter available columns';
+        this.noDataText = 'No matching data found';
+        this.columnSettingsModalTitleLabel = 'Column settings';
+        this.selectedLabel = 'Selected columns';
+        this.availableLabel = 'Available columns';
+        this.saveLabel = 'Save';
+        this.deleteLabel = 'Delete';
+        this.cancelLabel = 'Cancel';
+        this.infoTextLabel = 'Drag and drop a column to select or reorder it.';
+        this.pageSizeOptions = [5, 10, 15];
+        this.actions = [];
+        this.deleteDefinitionAllowed = false;
+        this.useAsync = false;
+        this.translateLabels = true;
+        this.sortEvent = new EventEmitter();
+        this.actionEvent = new EventEmitter();
+        this.pageEvent = new EventEmitter();
+        this.allColumnsEvent = new EventEmitter();
+        this.columnDefinitionChangeEvent = new EventEmitter();
+        this.viewDefinitionChangeEvent = new EventEmitter();
+        this.ACTION_COLUMN_NAME = '__action__';
+        this.SINGLE = DataTableActionType.SINGLE;
+        this.BATCH = DataTableActionType.BATCH;
+        this.NONE = DataTableActionType.NONE;
+        this.tableActions = [];
+        this.rowActions = [];
+        this.columns = [];
+        this.allSelected = false;
+        this.rowMap = new Map();
+        this.selectionModel = new SelectionModel(true);
+        this.allColumnDefinitions = [];
+        this.isFilterEnabled = false;
+        this.isPaginationEnabled = false;
+        this.mode = this.NONE;
+        this.isRowClickable = false;
+        this.showColumnModal = false;
+        this.isLoading = false;
+        this.paginatorLength = 0;
+        this.paginatorPageIndex = 0;
+        this.paginatorPageSize = 50;
+    }
+    static compare(a, b, sort) {
+        const x = a[sort.active];
+        const y = b[sort.active];
+        const ascending = sort.direction === 'asc';
+        switch (typeof x) {
+            case 'number':
+                return DataTableComponent.compareNumber(x, y, ascending);
+            case 'string':
+                return DataTableComponent.compareString(x, y, ascending);
+            case 'boolean':
+                return DataTableComponent.compareBoolean(x, y, ascending);
+            default:
+                // cannot compare -> return equal
+                return 0;
+        }
+    }
+    static compareNumber(x, y, ascending) {
+        return ascending ? x - y : y - x;
+    }
+    static compareString(x, y, ascending) {
+        return ascending ? x.localeCompare(y) : y.localeCompare(x);
+    }
+    static compareBoolean(x, y, ascending) {
+        if (x === y) {
+            return 0;
+        }
+        if (ascending) {
+            // true first
+            return x ? -1 : 1;
+        }
+        else {
+            // false first
+            return x ? 1 : -1;
+        }
+    }
+    static transformData(value, transformer, transformerParams) {
+        if (!transformer || !(transformer instanceof Function)) {
+            return value;
+        }
+        return transformer(value, transformerParams);
+    }
+    static generateRowId() {
+        return v4();
+    }
+    static isClickOnRowMenuIcon(event) {
+        return event?.target?.classList.contains('mat-icon');
+    }
+    ngOnInit() {
+        this.mode = this.getTableMode();
+        this.setActions();
+        if (this.mode !== this.NONE) {
+            this.isRowClickable = true;
+            this.defaultAction = this.rowActions[0];
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.useAsync) {
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+        }
+    }
+    onColumnSettings(definition) {
+        this.showColumnModal = true;
+        this.selectedDefinition = definition ? definition : this.allColumnDefinitions[0];
+        if (this.allAvailableColumns) {
+            this.openColumnModal();
+        }
+        else {
+            // if no complete definitions have been loaded yet send an event so the app can load it
+            this.allColumnsEvent.emit();
+        }
+    }
+    onViewDefinition(definition) {
+        this.selectedDefinition = definition;
+        this.viewDefinitionChangeEvent.emit(definition);
+    }
+    isCurrentDefinition(definition) {
+        return this.selectedDefinition && this.selectedDefinition.id === definition.id;
+    }
+    get selectedCount() {
+        return this.selectionModel?.selected ? this.selectionModel.selected.length : 0;
+    }
+    get rowCount() {
+        return this.getAllDataSourceRowsOfCurrentPage() ? this.getAllDataSourceRowsOfCurrentPage().length : 0;
+    }
+    getAllDataSourceRowsOfCurrentPage() {
+        return this.dataSource?._pageData(this.dataSource.data);
+    }
+    getSelectedCount(actionType) {
+        const count = this.selectedCount;
+        if (actionType !== this.BATCH || count < 2) {
+            return '';
+        }
+        return ' (' + count + ')';
+    }
+    isDisabled(actionType) {
+        switch (actionType) {
+            case this.SINGLE:
+                return this.selectedCount !== 1;
+            case this.BATCH:
+                return this.selectedCount < 1;
+            default:
+                return false;
+        }
+    }
+    onToggleSelectAll() {
+        // clear all selection first
+        this.selectionModel.clear();
+        // toggle all checkbox
+        this.allSelected = !this.allSelected;
+        if (this.allSelected) {
+            // select all rows of the current page
+            this.getAllDataSourceRowsOfCurrentPage().forEach((row) => {
+                if (!row.parentId) {
+                    this.selectionModel.select('' + row.rowId);
+                }
+            });
+        }
+    }
+    isSelected(rowId) {
+        return this.selectionModel.isSelected(rowId);
+    }
+    setFilterValue(value) {
+        if (this.dataSource) {
+            this.dataSource.filter = value?.trim().toLowerCase();
+        }
+    }
+    onRowEvent(event, row, action = this.defaultAction) {
+        if (row?.parentId) {
+            return;
+        }
+        switch (this.mode) {
+            case this.BATCH:
+                this.selectionModel.toggle(row.rowId);
+                break;
+            case this.SINGLE:
+                // emit the default action if the row (not the icon!) was clicked
+                if (!!action && !DataTableComponent.isClickOnRowMenuIcon(event)) {
+                    const selected = [];
+                    // if ID-generator is provided, return the ID, else return the ACTUAL data
+                    selected.push(this.idGenerator ? row.rowId : this.rowMap.get(row.rowId)?.actualData);
+                    this.emitTableAction(action, selected);
+                }
+                break;
+            default:
+                // do nothing if mode is NONE (or null)
+                return;
+        }
+    }
+    onSortingEvent(sort) {
+        if (this.useAsync) {
+            this.sortEvent.emit(sort);
+        }
+        else {
+            this.internalSort(sort);
+        }
+    }
+    onPageEvent(event) {
+        if (this.useAsync) {
+            this.pageEvent.emit(event);
+        }
+    }
+    onTableAction(tableAction) {
+        if (!!tableAction) {
+            const selection = [];
+            for (const selected of this.selectionModel.selected) {
+                selection.push(this.idGenerator ? selected : this.rowMap.get(selected)?.actualData);
+            }
+            tableAction.selected = selection;
+            this.actionEvent.emit(tableAction);
+        }
+    }
+    emitTableAction(action, selected) {
+        const emitAction = { ...action };
+        if (action.type !== this.NONE) {
+            emitAction.selected = [...selected];
+        }
+        this.actionEvent.emit(emitAction);
+    }
+    generateDisplayedDataElement(rowId, parentId, actualDataElement) {
+        const displayedDataElement = {};
+        displayedDataElement.rowId = rowId;
+        displayedDataElement.parentId = parentId;
+        for (const column of this.columns) {
+            const actualValue = actualDataElement[column.dataPropertyName];
+            displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
+        }
+        return displayedDataElement;
+    }
+    internalSort(sort) {
+        const sortedData = [...this.dataSource.data].sort((a, b) => DataTableComponent.compare(a, b, sort));
+        this.dataSource.data = [...sortedData];
+    }
+    setActions() {
+        this.rowActions = [];
+        this.tableActions = [];
+        for (const action of this.actions) {
+            if (this.mode !== action.hiddenInMode) {
+                switch (action.type) {
+                    case this.SINGLE:
+                        if (this.mode === this.SINGLE) {
+                            this.rowActions.push(action);
+                        }
+                        else {
+                            this.tableActions.push(action);
+                        }
+                        break;
+                    case this.BATCH:
+                        if (this.mode !== this.SINGLE) {
+                            this.tableActions.push(action);
+                        }
+                        break;
+                    default:
+                        this.tableActions.push(action);
+                }
+            }
+        }
+    }
+    createDataMapsAndSetDisplayedDataSourceData(data) {
+        const displayedDataList = [];
+        this.rowMap.clear();
+        if (data?.length > 0) {
+            for (const dataEntry of data) {
+                const rowId = this.idGenerator ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
+                const parentId = this.parentIdGenerator ? this.parentIdGenerator(dataEntry) : undefined;
+                const displayedDataElement = this.generateDisplayedDataElement(rowId, parentId, dataEntry);
+                const dataRow = {
+                    id: rowId,
+                    parentId: parentId,
+                    actualData: dataEntry,
+                    displayedData: displayedDataElement,
+                };
+                this.rowMap.set(rowId, dataRow);
+                displayedDataList.push(displayedDataElement);
+            }
+        }
+        this.dataSource.data = displayedDataList;
+        this.unsetPageSizeIfNecessary();
+    }
+    openColumnModal() {
+        const dialogData = {
+            allColumns: this.allAvailableColumns,
+            definition: this.selectedDefinition,
+            deleteDefinitionAllowed: this.deleteDefinitionAllowed,
+            filterColumnsLabel: this.filterColumnsLabel,
+            filterColumnsPlaceHolder: this.filterColumnsPlaceHolder,
+            noDataText: this.noDataText,
+            titleLabel: this.columnSettingsModalTitleLabel,
+            selectedLabel: this.selectedLabel,
+            availableLabel: this.availableLabel,
+            saveLabel: this.saveLabel,
+            deleteLabel: this.deleteLabel,
+            cancelLabel: this.cancelLabel,
+            infoTextLabel: this.infoTextLabel,
+        };
+        const dialog = this.matDialog.open(DataTableColumnsModalComponent, { data: dialogData });
+        dialog.afterClosed().subscribe((result) => {
+            // no event on CANCEL
+            if (result) {
+                this.columnDefinitionChangeEvent.emit(result);
+            }
+        });
+    }
+    getTableMode() {
+        if (this._forceMode) {
+            return this._forceMode;
+        }
+        if (!this.actions) {
+            return this.NONE;
+        }
+        const distinctActionTypes = new Set();
+        for (const rowAction of this.actions) {
+            distinctActionTypes.add(rowAction.type);
+        }
+        if (distinctActionTypes.has(this.BATCH)) {
+            return this.BATCH;
+        }
+        if (distinctActionTypes.has(this.SINGLE)) {
+            return this.SINGLE;
+        }
+        return this.NONE;
+    }
+    unsetPageSizeIfNecessary() {
+        if (!this.useAsync && !this.isPaginationEnabled) {
+            const dataCount = this.dataSource?.data ? this.dataSource.data.length : 0;
+            this.paginatorPageSize = dataCount;
+            this.paginatorLength = dataCount;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DataTableComponent, selector: "mad-data-table", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", pageSizeOptions: "pageSizeOptions", externalFilter: "externalFilter", actions: "actions", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", deleteDefinitionAllowed: "deleteDefinitionAllowed", useAsync: "useAsync", translateLabels: "translateLabels", filterValue: "filterValue", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", tableData: "tableData", page: "page", columnDefinitions: "columnDefinitions", loading: "loading", defaultPageSize: "defaultPageSize", externalPaginator: "externalPaginator", paginationEnabled: "paginationEnabled", allColumns: "allColumns", filterEnabled: "filterEnabled", forceMode: "forceMode" }, outputs: { sortEvent: "sortEvent", actionEvent: "actionEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length\">\n    <mad-outline-button\n      [disabled]=\"isDisabled(tableAction.type)\"\n      class=\"table-action\"\n      *ngFor=\"let tableAction of tableActions\"\n      (click)=\"onTableAction(tableAction)\"\n    >\n      {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n    </mad-outline-button>\n  </div>\n  <!-- Table filter -->\n  <mat-form-field *ngIf=\"isFilterEnabled\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onColumnSettings(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onViewDefinition(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"!element.parentId && mode === BATCH\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          *ngIf=\"!element.parentId && mode === SINGLE\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-template>\n      <!-- data cell to be injected -->\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [class.text-right]=\"column.isRightAligned\"\n        [class.mad-dt-child-cell]=\"element.parentId\"\n        [ngSwitch]=\"column.transformer\"\n        (click)=\"onRowEvent($event, element)\"\n      >\n        <span>\n          {{ element[column.dataPropertyName] }}\n        </span>\n      </td>\n    </ng-container>\n    <!-- header row where cells will be injected -->\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <!-- data row where cells will be injected -->\n    <tr mat-row [class.clickable-table-row]=\"!row.parentId && isRowClickable\" *matRowDef=\"let row; columns: columnIds\"></tr>\n  </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n  <div class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"this.editableColumnDefinitions?.length == 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [length]=\"paginatorLength\"\n    [pageIndex]=\"paginatorPageIndex\"\n    [pageSize]=\"paginatorPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ noDataText }}\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#fff;opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-data-table', template: "<div class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length\">\n    <mad-outline-button\n      [disabled]=\"isDisabled(tableAction.type)\"\n      class=\"table-action\"\n      *ngFor=\"let tableAction of tableActions\"\n      (click)=\"onTableAction(tableAction)\"\n    >\n      {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n    </mad-outline-button>\n  </div>\n  <!-- Table filter -->\n  <mat-form-field *ngIf=\"isFilterEnabled\">\n    <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of editableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onColumnSettings(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button\n      *ngFor=\"let definition of viewableColumnDefinitions\"\n      mat-menu-item\n      class=\"row-action\"\n      (click)=\"onViewDefinition(definition)\"\n      [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n    >\n      {{ translateLabels ? (definition.label | translate) : definition.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n  <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"> </mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"!element.parentId && mode === BATCH\" class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n          <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"> </mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          *ngIf=\"!element.parentId && mode === SINGLE\"\n          [matMenuTriggerData]=\"{ element: element }\"\n          [matMenuTriggerFor]=\"rowActionMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Cell definitions and rows with injected cells -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n      <!-- header cell to be injected -->\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ translateLabels ? (column.label | translate) : column.label }}\n        </th>\n      </ng-template>\n      <!-- data cell to be injected -->\n      <td\n        mat-cell\n        *matCellDef=\"let element\"\n        [class.text-right]=\"column.isRightAligned\"\n        [class.mad-dt-child-cell]=\"element.parentId\"\n        [ngSwitch]=\"column.transformer\"\n        (click)=\"onRowEvent($event, element)\"\n      >\n        <span>\n          {{ element[column.dataPropertyName] }}\n        </span>\n      </td>\n    </ng-container>\n    <!-- header row where cells will be injected -->\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <!-- data row where cells will be injected -->\n    <tr mat-row [class.clickable-table-row]=\"!row.parentId && isRowClickable\" *matRowDef=\"let row; columns: columnIds\"></tr>\n  </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n  <div class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button *ngIf=\"this.editableColumnDefinitions?.length == 1\" (click)=\"onColumnSettings()\">\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\">\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n      <mat-icon>preview</mat-icon>\n    </mad-icon-button>\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [length]=\"paginatorLength\"\n    [pageIndex]=\"paginatorPageIndex\"\n    [pageSize]=\"paginatorPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ noDataText }}\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:#fff;opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.MatDialog }], propDecorators: { filterLabel: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], filterColumnsLabel: [{
+                type: Input
+            }], filterColumnsPlaceHolder: [{
+                type: Input
+            }], noDataText: [{
+                type: Input
+            }], columnSettingsModalTitleLabel: [{
+                type: Input
+            }], selectedLabel: [{
+                type: Input
+            }], availableLabel: [{
+                type: Input
+            }], saveLabel: [{
+                type: Input
+            }], deleteLabel: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], infoTextLabel: [{
+                type: Input
+            }], tableClass: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], externalFilter: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], idGenerator: [{
+                type: Input
+            }], parentIdGenerator: [{
+                type: Input
+            }], deleteDefinitionAllowed: [{
+                type: Input
+            }], useAsync: [{
+                type: Input
+            }], translateLabels: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], displayedColumnDefinition: [{
+                type: Input
+            }], tableData: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], columnDefinitions: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], defaultPageSize: [{
+                type: Input
+            }], externalPaginator: [{
+                type: Input
+            }], paginationEnabled: [{
+                type: Input
+            }], allColumns: [{
+                type: Input
+            }], filterEnabled: [{
+                type: Input
+            }], forceMode: [{
+                type: Input
+            }], sortEvent: [{
+                type: Output
+            }], actionEvent: [{
+                type: Output
+            }], pageEvent: [{
+                type: Output
+            }], allColumnsEvent: [{
+                type: Output
+            }], columnDefinitionChangeEvent: [{
+                type: Output
+            }], viewDefinitionChangeEvent: [{
+                type: Output
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: false }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort, { static: true }]
+            }] } });
+
+class DataTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, declarations: [DataTableComponent, DataTableColumnsModalComponent], imports: [CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatMenuModule,
+            MatPaginatorModule,
+            MatSortModule,
+            MatTableModule,
+            MatProgressSpinnerModule,
+            ButtonModule,
+            TranslateModule,
+            MatCheckboxModule,
+            MatBadgeModule,
+            DragDropModule,
+            FormsModule], exports: [DataTableComponent, DataTableColumnsModalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, imports: [CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatMenuModule,
+            MatPaginatorModule,
+            MatSortModule,
+            MatTableModule,
+            MatProgressSpinnerModule,
+            ButtonModule,
+            TranslateModule,
+            MatCheckboxModule,
+            MatBadgeModule,
+            DragDropModule,
+            FormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DataTableComponent, DataTableColumnsModalComponent],
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatMenuModule,
+                        MatPaginatorModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatProgressSpinnerModule,
+                        ButtonModule,
+                        TranslateModule,
+                        MatCheckboxModule,
+                        MatBadgeModule,
+                        DragDropModule,
+                        FormsModule,
+                    ],
+                    exports: [DataTableComponent, DataTableColumnsModalComponent],
+                }]
+        }] });
+
+class StepHeaderComponent extends CdkStepHeader {
+    constructor(_focusMonitor, _elementRef) {
+        super(_elementRef);
+        this._focusMonitor = _focusMonitor;
+    }
+    ngAfterViewInit() {
+        this._focusMonitor.monitor(this._elementRef, true);
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+    /** Focuses the step header. */
+    focus(origin, options) {
+        if (origin) {
+            this._focusMonitor.focusVia(this._elementRef, origin, options);
+        }
+        else {
+            this._elementRef.nativeElement.focus(options);
+        }
+    }
+    getCssForState() {
+        if (this.state === STEP_STATE.NUMBER && !this.completed && !this.hasError) {
+            return 'step-state-neutral'; //initiale state is 'number'
+        }
+        else if (this.completed) {
+            return 'step-state-complete';
+        }
+        else if (this.hasError) {
+            return 'step-state-error';
+        }
+    }
+    getIcon() {
+        if (this.completed) {
+            return 'check_circle_outline';
+        }
+        else if (this.hasError) {
+            return 'error_outline';
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepHeaderComponent, deps: [{ token: i1$5.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: StepHeaderComponent, 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 *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n  <div class=\"header-label\">{{ this.label }}</div>\n</div>\n", styles: [".header{overflow:hidden;outline:var(--warn-color);cursor:pointer;box-sizing:content-box;-webkit-tap-highlight-color:transparent;border:1px solid lightgrey;width:100%;height:62px;display:flex;flex-direction:row;gap:1em}.header-label{align-items:center;display:flex}.step-state-complete{width:5px;background:green}.step-state-error{width:5px;background:var(--warn-color)}.step-state-neutral{width:5px;background:lightgrey}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-step-header', inputs: ['color'], host: {
+                        class: 'mad-step-header',
+                        role: 'tab',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 *ngIf=\"!this.hasError && !this.completed\" class=\"header-label\">{{ this.index + 1 + '.' }}</span>\n  <div class=\"header-label\">{{ this.label }}</div>\n</div>\n", styles: [".header{overflow:hidden;outline:var(--warn-color);cursor:pointer;box-sizing:content-box;-webkit-tap-highlight-color:transparent;border:1px solid lightgrey;width:100%;height:62px;display:flex;flex-direction:row;gap:1em}.header-label{align-items:center;display:flex}.step-state-complete{width:5px;background:green}.step-state-error{width:5px;background:var(--warn-color)}.step-state-neutral{width:5px;background:lightgrey}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { index: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], optional: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }], completed: [{
+                type: Input
+            }], closed: [{
+                type: Input
+            }] } });
+
+/**
+ * Animations used by the MAD stepper.
+ */
+const madStepperAnimations = {
+    verticalStepTransition: trigger('stepTransition', [
+        state('previous', style({ height: '0px', visibility: 'hidden' })),
+        state('next', style({ height: '0px', visibility: 'hidden' })),
+        state('current', style({ height: '*', visibility: 'visible' })),
+        transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+};
+
+class StepComponent extends CdkStep {
+    constructor(stepper, _viewContainerRef) {
+        super(stepper);
+        this.stepper = stepper;
+        this._viewContainerRef = _viewContainerRef;
+        /** Action event for the next button. If not set the StepComponent will handle the step navigation */
+        this.onNext = new EventEmitter();
+        /** Action event for the done button. If not set the StepComponent will handle the step navigation  */
+        this.onDone = new EventEmitter();
+        /*** Action event when the header is clicked. If not set the StepComponent will handle the step navigation*/
+        this.onHeaderClick = new EventEmitter();
+        this.stepClosed = false;
+        this._isSelected = Subscription.EMPTY;
+    }
+    ngAfterContentInit() {
+        this._isSelected = this._stepper.steps.changes
+            .pipe(switchMap(() => this._stepper.selectionChange.pipe(map((event) => event.selectedStep === this), tap(() => (this.stepClosed = false)), startWith(this._stepper.selected === this))))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this._isSelected.unsubscribe();
+    }
+    next(markFormAsTouched = true) {
+        this.stepValidation(markFormAsTouched);
+        if (this.onNext.observers.length <= 0) {
+            this.stepper.next();
+        }
+        this.onNext.emit();
+    }
+    selectAndMarkAsTouched(index) {
+        //Mark current selected step as touched before selecting to display errors in the from
+        this._stepper.selected?.stepControl?.markAllAsTouched();
+        this.stepClosed = false;
+        if (this.onHeaderClick.observers.length <= 0) {
+            this.select();
+        }
+        this.onHeaderClick.emit(index);
+    }
+    completeLast() {
+        this.stepValidation(true);
+        this.stepClosed = true;
+        if (this.onDone.observers.length <= 0) {
+            this.stepper.next();
+        }
+        this.onDone.emit();
+    }
+    resetValidations() {
+        this.hasError = false;
+        this.completed = true;
+        this.state = STEP_STATE.DONE;
+    }
+    stepValidation(markFormAsTouched) {
+        if (markFormAsTouched) {
+            this.stepControl?.markAllAsTouched();
+        }
+        if (this.stepControl?.valid) {
+            this.hasError = false;
+            this.completed = true;
+            this.state = STEP_STATE.DONE;
+        }
+        else {
+            this.completed = false;
+            this.hasError = true;
+            this.state = STEP_STATE.ERROR;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepComponent, deps: [{ token: forwardRef(() => StepperComponent) }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: StepComponent, selector: "mad-step", outputs: { onNext: "onNext", onDone: "onDone", onHeaderClick: "onHeaderClick" }, providers: [{ provide: CdkStep, useExisting: StepComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n  <div class=\"step-container\">\n    <div class=\"step-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"step-buttons\">\n      <div *ngIf=\"!last\">\n        <mad-primary-button (click)=\"next()\">{{ nextBtnLbl }}</mad-primary-button>\n      </div>\n      <div *ngIf=\"last\">\n        <mad-primary-button (click)=\"completeLast()\">{{ doneBtnLbl }}</mad-primary-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-step', providers: [{ provide: CdkStep, useExisting: StepComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n  <div class=\"step-container\">\n    <div class=\"step-content\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"step-buttons\">\n      <div *ngIf=\"!last\">\n        <mad-primary-button (click)=\"next()\">{{ nextBtnLbl }}</mad-primary-button>\n      </div>\n      <div *ngIf=\"last\">\n        <mad-primary-button (click)=\"completeLast()\">{{ doneBtnLbl }}</mad-primary-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"] }]
+        }], ctorParameters: () => [{ type: StepperComponent, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => StepperComponent)]
+                }] }, { type: i0.ViewContainerRef }], propDecorators: { onNext: [{
+                type: Output
+            }], onDone: [{
+                type: Output
+            }], onHeaderClick: [{
+                type: Output
+            }] } });
+class StepperComponent extends CdkStepper {
+    constructor(dir, changeDetectorRef, elementRef) {
+        super(dir, changeDetectorRef, elementRef);
+        /** Event emitted when the current step is done transitioning in. */
+        this.animationDone = new EventEmitter();
+        /** Steps that belong to the current stepper, excluding ones from nested steppers. */
+        this.steps = new QueryList();
+        this._animationDone = new Subject();
+        this.orientation = 'vertical';
+    }
+    ngOnInit() {
+        // Only linear stepper implementation is supported
+        super.linear = true;
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this._stateChanged();
+        });
+        this._animationDone
+            .pipe(distinctUntilChanged((x, y) => x.fromState === y.fromState && x.toState === y.toState), takeUntil(this._destroyed))
+            .subscribe((event) => {
+            if (event.toState === 'current') {
+                this.animationDone.emit();
+            }
+        });
+    }
+    /**
+     * Method patched to enable the closing of the last step.
+     */
+    _getAnimationDirection(index) {
+        const closeLastStep = this.selectedIndex === this.steps.length - 1 && this._steps.last?.completed && this._steps.last?.stepClosed;
+        if (closeLastStep) {
+            return 'next';
+        }
+        return super._getAnimationDirection(index);
+    }
+    _stepIsNavigable(index, step) {
+        return step.completed || this.selectedIndex === index || !this.linear;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, deps: [{ token: i3$2.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: StepperComponent, selector: "mad-stepper", inputs: { nextButtonLabel: "nextButtonLabel", doneButtonLabel: "doneButtonLabel" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "class.stepper-vertical": "true", "attr.aria-orientation": "\"vertical\"" } }, providers: [{ provide: CdkStepper, useExisting: StepperComponent }], queries: [{ propertyName: "_steps", predicate: StepComponent, descendants: true }], viewQueries: [{ propertyName: "_stepHeader", predicate: StepHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Vertical stepper -->\n<ng-container>\n  <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n    <ng-container [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n    <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n      <div\n        class=\"vertical-stepper-content\"\n        role=\"tabpanel\"\n        [@stepTransition]=\"_getAnimationDirection(i)\"\n        (@stepTransition.done)=\"_animationDone.next($event)\"\n        [id]=\"_getStepContentId(i)\"\n        [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n        [attr.aria-expanded]=\"selectedIndex === i\"\n      >\n        <div class=\"vertical-content\">\n          <ng-container\n            [ngTemplateOutlet]=\"step.content\"\n            [ngTemplateOutletContext]=\"{\n              step: step,\n              i: i,\n              last: isLast,\n              first: isFirst,\n              nextBtnLbl: this.nextButtonLabel,\n              doneBtnLbl: this.doneButtonLabel\n            }\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n  <mad-step-header\n    class=\"mat-vertical-stepper-header\"\n    (click)=\"step.selectAndMarkAsTouched(i)\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n    [id]=\"_getStepLabelId(i)\"\n    [attr.aria-posinset]=\"i + 1\"\n    [attr.aria-setsize]=\"steps.length\"\n    [attr.aria-controls]=\"_getStepContentId(i)\"\n    [attr.aria-selected]=\"selectedIndex == i\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n    [index]=\"i\"\n    [completed]=\"step.completed\"\n    [hasError]=\"step.hasError\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"_stepIsNavigable(i, step)\"\n    [optional]=\"step.optional\"\n    [closed]=\"step.stepClosed\"\n    [errorMessage]=\"step.errorMessage\"\n  ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepHeaderComponent, selector: "mad-step-header", inputs: ["color", "index", "label", "state", "errorMessage", "selected", "active", "optional", "hasError", "completed", "closed"] }], animations: [madStepperAnimations.verticalStepTransition], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-stepper', host: {
+                        '[class.stepper-vertical]': 'true',
+                        '[attr.aria-orientation]': '"vertical"',
+                        role: 'tablist',
+                    }, animations: [madStepperAnimations.verticalStepTransition], providers: [{ provide: CdkStepper, useExisting: StepperComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Vertical stepper -->\n<ng-container>\n  <div *ngFor=\"let step of steps; let i = index; let isLast = last; let isFirst = first\">\n    <ng-container [ngTemplateOutlet]=\"stepTemplate\" [ngTemplateOutletContext]=\"{ step: step, i: i }\"></ng-container>\n    <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n      <div\n        class=\"vertical-stepper-content\"\n        role=\"tabpanel\"\n        [@stepTransition]=\"_getAnimationDirection(i)\"\n        (@stepTransition.done)=\"_animationDone.next($event)\"\n        [id]=\"_getStepContentId(i)\"\n        [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n        [attr.aria-expanded]=\"selectedIndex === i\"\n      >\n        <div class=\"vertical-content\">\n          <ng-container\n            [ngTemplateOutlet]=\"step.content\"\n            [ngTemplateOutletContext]=\"{\n              step: step,\n              i: i,\n              last: isLast,\n              first: isFirst,\n              nextBtnLbl: this.nextButtonLabel,\n              doneBtnLbl: this.doneButtonLabel\n            }\"\n          ></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template let-step=\"step\" let-i=\"i\" #stepTemplate>\n  <mad-step-header\n    class=\"mat-vertical-stepper-header\"\n    (click)=\"step.selectAndMarkAsTouched(i)\"\n    (keydown)=\"_onKeydown($event)\"\n    [tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n    [id]=\"_getStepLabelId(i)\"\n    [attr.aria-posinset]=\"i + 1\"\n    [attr.aria-setsize]=\"steps.length\"\n    [attr.aria-controls]=\"_getStepContentId(i)\"\n    [attr.aria-selected]=\"selectedIndex == i\"\n    [attr.aria-label]=\"step.ariaLabel || null\"\n    [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n    [attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n    [index]=\"i\"\n    [completed]=\"step.completed\"\n    [hasError]=\"step.hasError\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.stepLabel || step.label\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"_stepIsNavigable(i, step)\"\n    [optional]=\"step.optional\"\n    [closed]=\"step.stepClosed\"\n    [errorMessage]=\"step.errorMessage\"\n  ></mad-step-header>\n</ng-template>\n", styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{display:flex;align-items:center;border:none!important;height:10px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}.vertical-content-container{border:none}[dir=rtl] .vertical-content-container{margin-left:0;margin-right:36px}.vertical-stepper-content{overflow:hidden;outline:0}.vertical-content{padding:0 24px}.step-container{border-left:1px solid lightgrey;border-right:1px solid lightgrey;border-bottom:1px solid lightgrey;display:flex;flex-direction:column}.step-content,.step-buttons{padding:2em}\n"] }]
+        }], ctorParameters: () => [{ type: i3$2.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { animationDone: [{
+                type: Output
+            }], nextButtonLabel: [{
+                type: Input
+            }], doneButtonLabel: [{
+                type: Input
+            }], _stepHeader: [{
+                type: ViewChildren,
+                args: [StepHeaderComponent]
+            }], _steps: [{
+                type: ContentChildren,
+                args: [StepComponent, { descendants: true }]
+            }] } });
+
+class StepperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: StepperModule, declarations: [StepperComponent, StepHeaderComponent, StepComponent], imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, ButtonModule], exports: [StepperComponent, StepHeaderComponent, StepComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperModule, imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, ButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StepperComponent, StepHeaderComponent, StepComponent],
+                    imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, ButtonModule],
+                    exports: [StepperComponent, StepHeaderComponent, StepComponent],
+                }]
+        }] });
+
+class ContentHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ContentHeaderComponent, selector: "mad-content-header", ngImport: i0, template: "<div class=\"content-header\">\n  <ng-content></ng-content>\n</div>\n", styles: [".content-header{padding-right:.5rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-content-header', template: "<div class=\"content-header\">\n  <ng-content></ng-content>\n</div>\n", styles: [".content-header{padding-right:.5rem}\n"] }]
+        }] });
+
+class ContentPanelContainerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ContentPanelContainerComponent, selector: "mad-content-panel-container", ngImport: i0, template: "<div class=\"content-panel-outer-wrapper\">\n  <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n  <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-content-panel-container', template: "<div class=\"content-panel-outer-wrapper\">\n  <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n  <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column}\n"] }]
+        }] });
+
+class ContentPanelContainerContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{flex:1 1 auto;overflow-y:auto;border-top:.05rem solid #cccccc;padding:1rem;height:1rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-content-panel-container-content', template: "<ng-content></ng-content>\n", styles: [":host{flex:1 1 auto;overflow-y:auto;border-top:.05rem solid #cccccc;padding:1rem;height:1rem}\n"] }]
+        }] });
+
+class ContentPanelContainerFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{border-top:.05rem solid #cccccc;padding:.25rem 1rem;display:flex;flex:0 0 auto;align-items:center;min-height:2rem}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelContainerFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-content-panel-container-footer', template: "<ng-content></ng-content>\n", styles: [":host{border-top:.05rem solid #cccccc;padding:.25rem 1rem;display:flex;flex:0 0 auto;align-items:center;min-height:2rem}\n"] }]
+        }] });
+
+class MainContainerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MainContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: MainContainerComponent, selector: "mad-main-container", ngImport: i0, template: "<div class=\"main-container\">\n  <ng-content select=\"mad-content-header\"></ng-content>\n  <ng-content select=\"mad-flowbar\"></ng-content>\n  <ng-content select=\"mad-content-panel-container\"></ng-content>\n</div>\n", styles: [".main-container{height:100%;display:flex;flex-direction:column}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MainContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-main-container', template: "<div class=\"main-container\">\n  <ng-content select=\"mad-content-header\"></ng-content>\n  <ng-content select=\"mad-flowbar\"></ng-content>\n  <ng-content select=\"mad-content-panel-container\"></ng-content>\n</div>\n", styles: [".main-container{height:100%;display:flex;flex-direction:column}\n"] }]
+        }] });
+
+class ContentPanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelModule, declarations: [ContentHeaderComponent,
+            ContentPanelContainerComponent,
+            ContentPanelContainerContentComponent,
+            ContentPanelContainerFooterComponent,
+            MainContainerComponent], imports: [CommonModule], exports: [ContentHeaderComponent,
+            ContentPanelContainerComponent,
+            ContentPanelContainerContentComponent,
+            ContentPanelContainerFooterComponent,
+            MainContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ContentPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ContentHeaderComponent,
+                        ContentPanelContainerComponent,
+                        ContentPanelContainerContentComponent,
+                        ContentPanelContainerFooterComponent,
+                        MainContainerComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        ContentHeaderComponent,
+                        ContentPanelContainerComponent,
+                        ContentPanelContainerContentComponent,
+                        ContentPanelContainerFooterComponent,
+                        MainContainerComponent,
+                    ],
+                }]
+        }] });
+
+class FlowbarComponent {
+    constructor() {
+        this._steps = [];
+        this._activeStepChange = new EventEmitter(true);
+        /**
+         * Event emitted when a step header is clicked.
+         * When defined header navigation has to be implemented programmatically.
+         * e.g. {@see changeActiveStepOnHeader}
+         */
+        this._headerClick = new EventEmitter(true);
+    }
+    get currentStepLabel() {
+        return this._activeStep.label;
+    }
+    get currentSubStepLabel() {
+        return this._activeStep.activeSubStep?.label;
+    }
+    ngOnInit() {
+        // If no active step is set as input or the active step is not enabled, select the first enabled step
+        if (!this._activeStep || !this._activeStep.enabled) {
+            this._activeStep = this._steps.find((step) => step.enabled);
+            if (this._activeStep) {
+                // If sub steps exist then set the first non disabled sub step per default
+                if (this.activeTabHasSubSteps()) {
+                    this._activeStep.activeSubStep = this._activeStep.subSteps.find((step) => step.enabled);
+                }
+                this._activeStepChange.emit(this._activeStep);
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.stepper._getIndicatorType = () => 'number';
+    }
+    getIndexForActiveStep() {
+        const selectedIndex = this._steps.indexOf(this._activeStep);
+        return selectedIndex === -1 ? 0 : selectedIndex;
+    }
+    changeActiveStep(step) {
+        const previousIndex = this._steps.indexOf(this._activeStep);
+        this._activeStep = step;
+        if (this.activeTabHasSubSteps()) {
+            if (previousIndex < this._steps.indexOf(this._activeStep)) {
+                this._activeStep.activeSubStep = this._activeStep.subSteps[0];
+            }
+            else {
+                this._activeStep.activeSubStep = this._activeStep.subSteps[this._activeStep.subSteps.length - 1];
+            }
+        }
+        this._activeStepChange.emit(this._activeStep);
+    }
+    changeActiveStepOnHeader(step) {
+        const stepIndex = this._steps.indexOf(step);
+        this._activeStep = step;
+        this.stepper.selected = this.stepper._steps.find((_, i) => i === stepIndex);
+    }
+    changeActiveSubStep(subStep) {
+        this._activeStep.activeSubStep = subStep;
+    }
+    previous() {
+        if (this.isPreviousAvailable()) {
+            // If active step has no sub steps or first sub step is selected -> go to previous main step
+            if (!this.activeTabHasSubSteps() || this.isFirstSubStep()) {
+                const previousEnabledStep = this.findPreviousEnabledStep();
+                this.changeActiveStep(previousEnabledStep);
+                this.stepper.selectedIndex = this._steps.indexOf(previousEnabledStep);
+            }
+            else {
+                const subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
+                this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex - 1];
+            }
+        }
+    }
+    next() {
+        if (this.isNextAvailable()) {
+            // If active step has no sub steps or last sub step is selected -> go to next main step
+            if (!this.activeTabHasSubSteps() || this.isLastSubStep()) {
+                const nextEnabledStep = this.findNextEnabledStep();
+                this.changeActiveStep(nextEnabledStep);
+                this.stepper.selectedIndex = this._steps.indexOf(nextEnabledStep);
+            }
+            else {
+                const subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
+                this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex + 1];
+            }
+        }
+    }
+    isPreviousAvailable() {
+        if (this._activeStep) {
+            if (!this.activeTabHasSubSteps() || this.isFirstSubStep()) {
+                const index = this.getCurrentIndex();
+                return index > 0 && this.isAnyPreviousStepEnabled(index);
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    isNextAvailable() {
+        if (this._activeStep) {
+            if (!this.activeTabHasSubSteps() || this.isLastSubStep()) {
+                const index = this.getCurrentIndex();
+                return index < this._steps.length - 1 && this.isAnyFollowingStepEnabled(index);
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    isLastStep() {
+        if (this.getCurrentIndex() === this._steps.length - 1) {
+            if (this.activeTabHasSubSteps()) {
+                return this.isLastSubStep();
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }
+    getCurrentIndex() {
+        return this._steps.findIndex((value) => value === this._activeStep);
+    }
+    getCurrentSubStepIndex() {
+        return this._activeStep.subSteps.findIndex((value) => value === this._activeStep.activeSubStep);
+    }
+    triggerClick() {
+        const selectedStep = this._steps[this.stepper.selectedIndex];
+        this.changeActiveStep(selectedStep);
+    }
+    headerClick(event, step) {
+        event.stopPropagation(); //stop processing current header click event
+        this._headerClick.emit(step);
+    }
+    activeTabHasSubSteps() {
+        return this._activeStep.subSteps && this._activeStep.subSteps.length > 0;
+    }
+    isFirstSubStep() {
+        return this._activeStep.activeSubStep === this._activeStep.subSteps[0];
+    }
+    isLastSubStep() {
+        return this._activeStep.activeSubStep === this._activeStep.subSteps[this._activeStep.subSteps.length - 1];
+    }
+    isAnyPreviousStepEnabled(index) {
+        // eslint-disable-next-line id-blacklist
+        return this._steps.slice(0, index).find((step) => step.enabled) !== undefined;
+    }
+    isAnyFollowingStepEnabled(index) {
+        // eslint-disable-next-line id-blacklist
+        return this._steps.slice(index + 1, this._steps.length).find((step) => step.enabled) !== undefined;
+    }
+    findPreviousEnabledStep() {
+        const index = this.getCurrentIndex();
+        return this._steps
+            .slice(0, index)
+            .reverse()
+            .find((step) => step.enabled);
+    }
+    findNextEnabledStep() {
+        const index = this.getCurrentIndex();
+        return this._steps.slice(index + 1, this._steps.length).find((step) => step.enabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FlowbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FlowbarComponent, 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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FlowbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-flowbar', 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"] }]
+        }], propDecorators: { _steps: [{
+                type: Input,
+                args: ['steps']
+            }], _activeStep: [{
+                type: Input,
+                args: ['activeStep']
+            }], _activeStepChange: [{
+                type: Output,
+                args: ['activeStepChange']
+            }], _headerClick: [{
+                type: Output,
+                args: ['headerClick']
+            }], stepper: [{
+                type: ViewChild,
+                args: ['stepper']
+            }] } });
+
+class FlowbarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FlowbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: FlowbarModule, declarations: [FlowbarComponent], imports: [CommonModule, MatStepperModule], exports: [FlowbarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FlowbarModule, imports: [CommonModule, MatStepperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FlowbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FlowbarComponent],
+                    imports: [CommonModule, MatStepperModule],
+                    exports: [FlowbarComponent],
+                }]
+        }] });
+
+class MaterialAddonsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: MaterialAddonsModule, exports: [ReadOnlyFormFieldModule,
+            ButtonModule,
+            ToolbarModule,
+            MaterialActionButtonModule,
+            NumericFieldModule,
+            CardModule,
+            QuickListModule,
+            ThrottleClickModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialAddonsModule, imports: [ReadOnlyFormFieldModule,
+            ButtonModule,
+            ToolbarModule,
+            MaterialActionButtonModule,
+            NumericFieldModule,
+            CardModule,
+            QuickListModule,
+            ThrottleClickModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialAddonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        ReadOnlyFormFieldModule,
+                        ButtonModule,
+                        ToolbarModule,
+                        MaterialActionButtonModule,
+                        NumericFieldModule,
+                        CardModule,
+                        QuickListModule,
+                        ThrottleClickModule,
+                    ],
+                }]
+        }] });
+
+class DragAndDropDirectiveDirective {
+    constructor() {
+        this.onFileDropped = new EventEmitter();
+        this.background = '$background-color';
+        this.opacity = '1';
+    }
+    //Dragover listener
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = '$selection-background';
+        this.opacity = '0.8';
+    }
+    //Dragleave listener
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = '$background-color';
+        this.opacity = '1';
+    }
+    //Drop listener
+    ondrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.background = '$background-color';
+        this.opacity = '1';
+        let files = event.dataTransfer.files;
+        if (files.length > 0) {
+            this.onFileDropped.emit(files);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DragAndDropDirectiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: DragAndDropDirectiveDirective, isStandalone: true, selector: "[madDragAndDrop]", outputs: { onFileDropped: "onFileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "style.background-color": "this.background", "style.opacity": "this.opacity" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DragAndDropDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[madDragAndDrop]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onFileDropped: [{
+                type: Output
+            }], background: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], opacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class FileUploadComponent {
+    constructor() {
+        this.showFileList = false;
+        this.fileEmitter = new EventEmitter();
+        this.errorEmitter = new EventEmitter();
+        this.fileList = [];
+        this.acceptForInput = [];
+        this.uploadError = false;
+    }
+    ngOnInit() {
+        if (this.accept?.length) {
+            this.accept.forEach((accepted) => this.acceptForInput.push(`.${accepted}`));
+        }
+    }
+    uploadFile(fileList) {
+        if (!this.multiple && (fileList.length > 1 || this.fileList.length === 1)) {
+            this.errorEmitter.emit('ONLY_SINGLE_FILE');
+            this.uploadError = false;
+            return;
+        }
+        if (this.accept && this.accept.length > 0) {
+            for (let i = 0; i < fileList.length; i++) {
+                this.getFileEnding(fileList.item(i).name);
+            }
+        }
+        if (!this.uploadError) {
+            for (let i = 0; i < fileList.length; i++) {
+                this.fileList.push(fileList.item(i));
+            }
+            this.fileEmitter.emit(fileList);
+        }
+        this.uploadError = false;
+    }
+    getFileEnding(name) {
+        const ending = name.substring(name.lastIndexOf('.') + 1);
+        if (this.accept.filter((a) => a.toLowerCase() === ending.toLowerCase()).length === 0) {
+            this.errorEmitter.emit('FILETYPE_NOT_SUPPORTED');
+            this.uploadError = true;
+        }
+    }
+    openFile(file) {
+        window.open(window.URL.createObjectURL(file));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: FileUploadComponent, isStandalone: true, selector: "mad-file-upload", inputs: { id: "id", multiple: "multiple", accept: "accept", text: "text", showFileList: "showFileList" }, outputs: { fileEmitter: "fileEmitter", errorEmitter: "errorEmitter" }, ngImport: i0, template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptForInput\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{ text ? text : 'Upload' }}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{ file.name }}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: DragAndDropDirectiveDirective, selector: "[madDragAndDrop]", outputs: ["onFileDropped"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-file-upload', standalone: true, imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, TranslateModule, DragAndDropDirectiveDirective, MatChipsModule], template: "<mat-card\n  (click)=\"fileInput.click()\"\n  (onFileDropped)=\"uploadFile($event)\"\n  class=\"uploadFileContainer\"\n  madDragAndDrop\n  id=\"uploadFileContainer\"\n>\n  <input\n    #fileInput\n    (change)=\"uploadFile($event.target.files)\"\n    (click)=\"fileInput.value = null\"\n    [accept]=\"acceptForInput\"\n    [id]=\"id\"\n    [multiple]=\"multiple\"\n    hidden\n    type=\"file\"\n  />\n  <mat-card-content>\n    <mat-icon>vertical_align_top</mat-icon>\n    {{ text ? text : 'Upload' }}\n  </mat-card-content>\n</mat-card>\n\n<ng-container *ngIf=\"showFileList\">\n  <mat-chip-listbox>\n    <mat-chip *ngFor=\"let file of fileList\" (click)=\"openFile(file)\" class=\"download\">{{ file.name }}</mat-chip>\n  </mat-chip-listbox>\n</ng-container>\n", styles: [".uploadFileContainer{background-repeat:no-repeat;background-position:center;height:100px;margin:0;border:2px dashed var(--main-primary)}.uploadFileContainer:hover{cursor:pointer;background-color:var(--selection-background)!important;opacity:.8}.uploadFileContainer,.mat-mdc-card-content{display:flex;justify-content:center;align-items:center}.download{width:100%}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], showFileList: [{
+                type: Input
+            }], fileEmitter: [{
+                type: Output
+            }], errorEmitter: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of material-addons
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseQuickListComponent, ButtonModule, CardComponent, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DangerButtonComponent, DataTableColumnsModalComponent, DataTableComponent, DataTableModule, FileUploadComponent, FlowbarComponent, FlowbarModule, IconButtonComponent, LinkButtonComponent, MadBasicButton, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldDirective, NumericFieldModule, OutlineButtonComponent, PrimaryButtonComponent, QuickListCompactComponent, QuickListComponent, QuickListModule, ReactiveFormQuickListCompactComponent, ReactiveFormQuickListComponent, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableComponent, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations };
+//# sourceMappingURL=porscheinformatik-material-addons.mjs.map