@porscheinformatik/material-addons 10.4.1 → 14.0.0

package/fesm2015/porscheinformatik-material-addons.js

@@ -1,2658 +0,0 @@
-import { Component, Input, NgModule, HostBinding, ViewChild, ElementRef, ChangeDetectorRef, ɵɵdefineInjectable, ɵɵinject, LOCALE_ID, Injectable, Inject, Renderer2, EventEmitter, Directive, forwardRef, Output, HostListener, ContentChild, TemplateRef, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, ViewContainerRef, QueryList, Optional, ContentChildren } from '@angular/core';
-import { CommonModule, DOCUMENT } from '@angular/common';
-import { RouterModule, NavigationEnd, Router } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Title } from '@angular/platform-browser';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { of, Subject, Subscription } from 'rxjs';
-import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
-import { map, throttleTime, switchMap, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatCardModule } from '@angular/material/card';
-import { trigger, transition, style, animate, state } from '@angular/animations';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatSort, MatSortModule } from '@angular/material/sort';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { SelectionModel } from '@angular/cdk/collections';
-import { v4 } from 'uuid';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Directionality } from '@angular/cdk/bidi';
-import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { FlexModule } from '@angular/flex-layout';
-import { MatStepperModule } from '@angular/material/stepper';
-
-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;
-    }
-}
-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{align-items:center;bottom:20px;display:flex;flex-direction:column-reverse;position:fixed;right:20px;z-index:100}.lift-higher{bottom:61px}.lift-higher-2{bottom:121px;right:28px}"]
-            },] }
-];
-MaterialActionButtonComponent.propDecorators = {
-    actionName: [{ type: Input }],
-    id: [{ type: Input }],
-    icon: [{ type: Input }],
-    routerLink: [{ type: Input }],
-    liftHigher: [{ type: Input }],
-    liftHigher2: [{ type: Input }]
-};
-
-class MaterialActionButtonModule {
-}
-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);
-        }
-    }
-}
-MadBasicButton.propDecorators = {
-    pointerEvent: [{ type: HostBinding, args: ['style.pointer-events',] }],
-    opacity: [{ type: HostBinding, args: ['style.opacity',] }]
-};
-
-class PrimaryButtonComponent extends MadBasicButton {
-    constructor() {
-        super();
-        this.title = '';
-        super.button = this.button;
-        super.disabled = this.disabled;
-    }
-}
-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: [""]
-            },] }
-];
-PrimaryButtonComponent.ctorParameters = () => [];
-PrimaryButtonComponent.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;
-    }
-}
-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",
-                styles: [""]
-            },] }
-];
-OutlineButtonComponent.ctorParameters = () => [];
-OutlineButtonComponent.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;
-    }
-}
-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",
-                styles: [""]
-            },] }
-];
-LinkButtonComponent.ctorParameters = () => [];
-LinkButtonComponent.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;
-    }
-}
-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",
-                styles: [""]
-            },] }
-];
-IconButtonComponent.ctorParameters = () => [];
-IconButtonComponent.propDecorators = {
-    type: [{ type: Input }],
-    disabled: [{ type: Input }],
-    title: [{ type: Input }],
-    button: [{ type: ViewChild, args: ['btn', { read: ElementRef, static: true },] }]
-};
-
-class DangerButtonComponent extends MadBasicButton {
-    constructor() {
-        super();
-        this.title = '';
-        super.button = this.button;
-        super.disabled = this.disabled;
-    }
-}
-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",
-                styles: [""]
-            },] }
-];
-DangerButtonComponent.ctorParameters = () => [];
-DangerButtonComponent.propDecorators = {
-    type: [{ type: Input }],
-    disabled: [{ type: Input }],
-    title: [{ type: Input }],
-    button: [{ type: ViewChild, args: ['btn', { read: ElementRef, static: true },] }]
-};
-
-class ButtonModule {
-}
-ButtonModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent],
-                imports: [CommonModule, RouterModule, MatButtonModule, MatIconModule, MatTooltipModule],
-                exports: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent],
-            },] }
-];
-
-/**
- * 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;
-        /**
-         * Defines the rows for the readonly textarea.
-         */
-        this.rows = 3;
-        /**
-         * 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.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;
-    }
-    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() {
-        var _a, _b;
-        const input = (_b = (_a = this.readOnlyContentWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.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() {
-        var _a, _b;
-        // 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 = (_b = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.style.textOverflow;
-        if (!textOverflow) {
-            return 'ellipsis';
-        }
-        return textOverflow;
-    }
-    setTooltipForOverflownField() {
-        var _a, _b;
-        if (this.isEllipsisForTextOverflowEnabled()) {
-            const input = (_b = (_a = this.readOnlyContentWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.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;
-    }
-}
-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      matTooltip=\"{{toolTipText}}\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"custom-tooltip\"\n      matTooltipDisabled=\"{{!toolTipForInputEnabled}}\">\n    </mad-readonly-form-field>\n  </ng-container>\n</div>\n",
-                styles: ["div,mat-form-field{width:inherit}::ng-deep .custom-tooltip{font-size:14px!important;white-space:normal!important;word-break:break-all!important}"]
-            },] }
-];
-ReadOnlyFormFieldWrapperComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef }
-];
-ReadOnlyFormFieldWrapperComponent.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 }]
-};
-
-class NumberFormatService {
-    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 === null || options === void 0 ? void 0 : options.autofillDecimals, NumberFormatService.DEFAULT_AUTOFILL_DECIMALS);
-        const decimalPlaces = this.valueOrDefault(options === null || options === void 0 ? void 0 : options.decimalPlaces, NumberFormatService.DEFAULT_DECIMAL_PLACES);
-        const finalFormatting = this.valueOrDefault(options === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : options.decimalPlaces, NumberFormatService.DEFAULT_DECIMAL_PLACES);
-        const removeLeadingZeros = this.valueOrDefault(options === null || options === void 0 ? void 0 : 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;
-    }
-}
-NumberFormatService.NEGATIVE = '-';
-NumberFormatService.NUMBERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-NumberFormatService.DEFAULT_FINAL_FORMATTING = true;
-NumberFormatService.DEFAULT_DECIMAL_PLACES = 2;
-NumberFormatService.DEFAULT_AUTOFILL_DECIMALS = false;
-NumberFormatService.DEFAULT_REMOVE_LEADING_ZEROS = false;
-NumberFormatService.ɵprov = ɵɵdefineInjectable({ factory: function NumberFormatService_Factory() { return new NumberFormatService(ɵɵinject(LOCALE_ID)); }, token: NumberFormatService, providedIn: "any" });
-NumberFormatService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'any',
-            },] }
-];
-NumberFormatService.ctorParameters = () => [
-    { type: String, 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;
-        this.rows = 3;
-        /*
-         * 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.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();
-    }
-    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);
-            }
-        }
-        // 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;
-        }
-    }
-}
-ReadOnlyFormFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-readonly-form-field',
-                template: "<mat-form-field class=\"form-group\" appearance=\"none\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    *ngIf=\"!multiline\"\n    [ngModel]=\"value\"\n    [ngClass]=\"'text-' + textAlign\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    matInput\n    #inputEl\n  />\n\n  <textarea\n    *ngIf=\"multiline\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    class=\"multiline\"\n    [errorStateMatcher]=\"errorMatcher\"\n    [id]=\"id\"\n    readonly\n    matInput\n  ></textarea>\n  <mat-error>{{ errorMessage }}</mat-error>\n</mat-form-field>\n",
-                styles: ["mat-form-field{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch}mat-label{line-height:1.4}span[matPrefix]{padding-right:5px}span[matSuffix]{padding-left:5px}.text-left{text-align:left}.text-right{text-align:right}.multiline{resize:none}"]
-            },] }
-];
-ReadOnlyFormFieldComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: Renderer2 },
-    { type: NumberFormatService }
-];
-ReadOnlyFormFieldComponent.propDecorators = {
-    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 }],
-    inputEl: [{ type: ViewChild, args: ['inputEl',] }]
-};
-
-class ReadOnlyFormFieldModule {
-}
-ReadOnlyFormFieldModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
-                imports: [CommonModule, RouterModule, MatFormFieldModule, MatInputModule, FormsModule, MatTooltipModule],
-                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 = [];
-    }
-}
-ToolbarService.ɵprov = ɵɵdefineInjectable({ factory: function ToolbarService_Factory() { return new ToolbarService(ɵɵinject(Router), ɵɵinject(TranslateService)); }, token: ToolbarService, providedIn: "root" });
-ToolbarService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ToolbarService.ctorParameters = () => [
-    { type: Router },
-    { type: 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() {
-        return this.toolbarService.getBackAction() && !!this.toolbarService.getBackAction().routerLink;
-    }
-    isAbsoluteLink() {
-        return this.toolbarService.getBackAction() && !!this.toolbarService.getBackAction().href;
-    }
-    isAction() {
-        return this.toolbarService.getBackAction() && !!this.toolbarService.getBackAction().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;
-    }
-}
-ToolbarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-toolbar',
-                template: "<mat-toolbar class=\"content-toolbar\">\n  <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\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()\">\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()\">\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\">\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          [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      </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=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\n          [id]=\"action.matIcon\"\n          [matTooltip]=\"action.actionName\"\n          type=\"button\">\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        </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\">\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 *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\">\n                  <mat-icon\n                    color=\"primary\"\n                    [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                    [matBadge]=\"action.badge ? action.badge.value : null\"\n                    matBadgePosition=\"below after\"\n                  >{{ action.matIcon }}</mat-icon\n                  >\n                  {{ action.actionName }}\n                </button>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </mat-menu>\n      </ng-container>\n    </ng-container>\n  </div>\n</mat-toolbar>\n",
-                styles: ["mat-toolbar{background:#fff}.content-toolbar{border-bottom:1px solid #dcdcdc;height:57px}.right-aligned{margin-left:auto;margin-right:0;overflow:hidden}.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}"]
-            },] }
-];
-ToolbarComponent.ctorParameters = () => [
-    { type: BreakpointObserver },
-    { type: Title },
-    { type: ToolbarService }
-];
-
-class ToolbarModule {
-}
-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 {
-    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 = () => { };
-    }
-    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();
-        }
-    }
-    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);
-    }
-}
-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,
-                    },
-                ],
-            },] }
-];
-NumericFieldDirective.ctorParameters = () => [
-    { type: Renderer2 },
-    { type: ElementRef },
-    { type: NumberFormatService }
-];
-NumericFieldDirective.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],
-        };
-    }
-}
-NumericFieldModule.decorators = [
-    { type: NgModule, args: [{
-                providers: [NumberFormatService],
-                declarations: [NumericFieldDirective],
-                exports: [NumericFieldDirective],
-            },] }
-];
-
-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);
-    }
-}
-CardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-card',
-                template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>\n      {{ title }}\n      <mad-icon-button (click)=\"toggleCollapse()\" *ngIf=\"expandable && !editMode\">\n        <mat-icon [@rotateIcon]=\"!expanded\">keyboard_arrow_down</mat-icon>\n      </mad-icon-button>\n    </mat-card-title>\n    <span>\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    </span>\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",
-                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')),
-                    ]),
-                ],
-                styles: ["mat-card-header{display:flex;flex-direction:row}mat-card-header,mat-card-header mat-card-title{justify-content:space-between}mat-card-header mat-card-title:hover{background:unset!important}mat-card-header h3{float:left;font-weight:700;line-height:40px;margin:0 .25em 0 0}.mat-card-actions{margin-left:0;margin-right:0}.mat-card>.mat-card-actions:last-child{margin-bottom:0}"]
-            },] }
-];
-CardComponent.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 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();
-    }
-}
-ThrottleClickDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[madThrottleClick]',
-            },] }
-];
-ThrottleClickDirective.propDecorators = {
-    throttleTime: [{ type: Input }],
-    throttleClick: [{ type: Output }],
-    clickEvent: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
-
-class ThrottleClickModule {
-}
-ThrottleClickModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ThrottleClickDirective],
-                imports: [CommonModule],
-                exports: [ThrottleClickDirective],
-            },] }
-];
-
-class CardModule {
-}
-CardModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [CardComponent],
-                imports: [CommonModule, MatCardModule, MatIconModule, ButtonModule, MatButtonModule, ThrottleClickModule],
-                exports: [CardComponent],
-            },] }
-];
-
-class BaseQuickListComponent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-        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);
-        }
-    }
-    removeItem(item) {
-        if (this.isDeleteAllowed()) {
-            this.allItems.splice(this.allItems.indexOf(item), 1);
-            this.removed.emit(item);
-        }
-    }
-    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);
-    }
-    isDeleteAllowed() {
-        return this.removePossible && (!this.minItems || this.allItems.length > this.minItems);
-    }
-    interalAddItem() {
-        if (this.isAddAllowed()) {
-            const newItem = Object.assign({}, 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;
-    }
-}
-BaseQuickListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-base-quick-list',
-                template: ''
-            },] }
-];
-BaseQuickListComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-BaseQuickListComponent.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 }],
-    added: [{ type: Output }],
-    removed: [{ type: Output }],
-    itemTemplate: [{ type: ContentChild, args: [TemplateRef,] }],
-    itemRows: [{ type: ViewChildren, args: ['row',] }]
-};
-
-// 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) {
-        super(changeDetectorRef);
-        this.changeDetectorRef = changeDetectorRef;
-    }
-}
-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>\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-link-button *ngIf=\"!readonly\" (click)=\"addItem()\"\n                 [disabled]=\"!addPossible || !isAddAllowed()\">\n  {{ addLabel }}\n</mad-link-button>\n"
-            },] }
-];
-QuickListComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-
-class QuickListCompactComponent extends BaseQuickListComponent {
-    constructor(changeDetectorRef) {
-        super(changeDetectorRef);
-        this.changeDetectorRef = changeDetectorRef;
-    }
-}
-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>\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\"\n                 (click)=\"addItem()\"\n                 [disabled]=\"!isAddAllowed()\">\n    {{ addLabel }}\n</mad-link-button>\n"
-            },] }
-];
-QuickListCompactComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-
-class QuickListModule {
-}
-QuickListModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
-                imports: [CommonModule, MatButtonModule, MatIconModule, ButtonModule],
-                exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
-            },] }
-];
-
-class TableComponent {
-    constructor() {
-        var _a;
-        this.columns = [];
-        this.filterLabel = 'NOT SET';
-        this.filterPlaceholder = 'NOT SET';
-        this.pageSizeOptions = [5, 10, 15];
-        this.defaultPageSize = ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[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._changePageSize(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(Object.assign(Object.assign({}, action), { outputRow: row }));
-        }
-    }
-    onSortingEvent(sortingParams) {
-        this.sortEvent.emit(sortingParams);
-    }
-    onTableAction(tableAction) {
-        if (!!tableAction) {
-            this.tableAction.emit(tableAction);
-        }
-    }
-    setFilterValue(value) {
-        this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
-    }
-    isClickOnRowMenuIcon(event) {
-        var _a;
-        return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('mat-icon');
-    }
-}
-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-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
-            },] }
-];
-TableComponent.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 {
-}
-TableModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [TableComponent],
-                imports: [
-                    CommonModule,
-                    MatButtonModule,
-                    MatIconModule,
-                    MatFormFieldModule,
-                    MatInputModule,
-                    MatMenuModule,
-                    MatPaginatorModule,
-                    MatSortModule,
-                    MatTableModule,
-                    ButtonModule,
-                ],
-                exports: [TableComponent],
-            },] }
-];
-
-class DataTableActionType {
-}
-DataTableActionType.SINGLE = 'SINGLE';
-DataTableActionType.BATCH = 'BATCH';
-DataTableActionType.NONE = 'NONE';
-
-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() {
-        var _a;
-        if (((_a = this.searchFilter) === null || _a === void 0 ? void 0 : _a.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 === null || previousContainerItems === void 0 ? void 0 : 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];
-    }
-}
-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        <div class=\"column-drag-box\"\n             *ngFor=\"let selectedColumn of selectedColumns; let i = index\"\n             cdkDrag\n             [id]=\"selectedColumn.id\"\n        >\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 matInput autocomplete=\"off\" (keyup)=\"updateFilterValue()\"\n                 placeholder=\"{{ data?.filterColumnsPlaceHolder | translate }}\" [(ngModel)]=\"searchFilter\"/>\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        <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\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{border-bottom:1px solid #f5f5f5;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:16px;padding:8px 8px 16px;width:544px}.column-drag-container{display:inline-block;font-size:small;max-width:100%;vertical-align:top;width:256px}.info-box{margin-bottom:16px}.column-drag-info-area,.info-box{color:rgba(0,0,0,.66);font-size:small;width:100%}.column-drag-info-area{align-items:stretch;display:flex;flex-direction:column;height:36px;justify-content:right;margin-bottom:32px}.column-drag-list{background:#fff;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;display:block;height:200px;overflow:auto}.column-drag-container-header{font-weight:700;margin-bottom:4px}.column-drag-box{align-items:center;background:#fff;border-bottom:1px solid #ccc;box-sizing:border-box;color:rgba(0,0,0,.87);cursor:move;display:flex;flex-direction:row;font-size:14px;height:40px;justify-content:space-between;padding:12px 10px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-sizing:border-box}.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)}"]
-            },] }
-];
-DataTableColumnsModalComponent.ctorParameters = () => [
-    { type: MatDialogRef },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
-
-class DataTableComponent {
-    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.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.displayedDataMap = new Map();
-        this.actualDataMap = 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;
-    }
-    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) {
-        if (!this.dataSource) {
-            this.dataSource = new MatTableDataSource(data);
-        }
-        this.createDataMapsAndSetDisplayedDataSourceData(data);
-    }
-    set page(page) {
-        this.paginatorPageIndex = page.pageIndex;
-        this.paginatorPageSize = page.pageSize;
-        this.paginatorLength = page.length;
-    }
-    set columnDefinitions(definitions) {
-        var _a;
-        this.editableColumnDefinitions = [];
-        this.viewableColumnDefinitions = [];
-        this.allColumnDefinitions = [...definitions];
-        for (const definition of definitions) {
-            if (definition.editable) {
-                this.editableColumnDefinitions.push(definition);
-            }
-            if (((_a = definition.displayedColumns) === null || _a === void 0 ? void 0 : _a.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.setActions();
-        }
-    }
-    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) {
-        var _a;
-        return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.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() {
-        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() {
-        var _a;
-        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selected) ? this.selectionModel.selected.length : 0;
-    }
-    get rowCount() {
-        return this.getAllDataSourceRowsOfCurrentPage() ? this.getAllDataSourceRowsOfCurrentPage().length : 0;
-    }
-    getAllDataSourceRowsOfCurrentPage() {
-        var _a;
-        return (_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._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 => {
-                this.selectionModel.select('' + row.rowId);
-            });
-        }
-    }
-    isSelected(rowId) {
-        return this.selectionModel.isSelected(rowId);
-    }
-    setFilterValue(value) {
-        this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
-    }
-    onRowCheckbox(event, row) {
-        event.stopPropagation(); // no click event on row
-        this.selectionModel.toggle(row.rowId);
-    }
-    onRowEvent(event, row, action = this.defaultAction) {
-        switch (this.mode) {
-            case this.BATCH:
-                this.onRowCheckbox(event, row);
-                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.actualDataMap.get(row.rowId));
-                    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.actualDataMap.get(selected));
-            }
-            tableAction.selected = selection;
-            this.actionEvent.emit(tableAction);
-        }
-    }
-    emitTableAction(action, selected) {
-        const emitAction = Object.assign({}, action);
-        if (action.type !== this.NONE) {
-            emitAction.selected = [...selected];
-        }
-        this.actionEvent.emit(emitAction);
-    }
-    generateDisplayedDataElement(rowId, actualDataElement) {
-        const displayedDataElement = {};
-        displayedDataElement.rowId = rowId;
-        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.actualDataMap.clear();
-        this.displayedDataMap.clear();
-        if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
-            for (const dataEntry of data) {
-                const rowId = this.idGenerator ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
-                this.actualDataMap.set(rowId, dataEntry);
-                const displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
-                this.displayedDataMap.set(rowId, displayedDataElement);
-                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;
-        }
-    }
-}
-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      {{ tableAction.label | translate }} {{ getSelectedCount(tableAction.type) }}\n    </mad-outline-button>\n  </div>\n  <!-- Table filter -->\n  <mat-form-field *ngIf=\"isFilterEnabled\">\n    <mat-label>{{ filterLabel | translate }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n           placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\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\"\n            (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label | translate }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button *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      {{ definition.label | translate }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <button *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      {{ definition.label | translate }}\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 class=\"row-action-button\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox\n            (change)=\"onToggleSelectAll()\"\n            [checked]=\"allSelected\"\n          >\n          </mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox\n            (click)=\"onRowCheckbox($event, element.rowId)\"\n            [checked]=\"isSelected(element.rowId)\"\n          >\n          </mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          *ngIf=\"mode === SINGLE\"\n          [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\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          {{ column.label | translate }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label | translate }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [ngSwitch]=\"column.transformer\">\n        <span>\n          {{ element[column.dataPropertyName] }}\n        </span>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnIds\"\n    ></tr>\n  </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n  <div class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    <mad-icon-button\n      *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n      (click)=\"onColumnSettings()\"\n    >\n      <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column settings: multiple definitions -->\n    <mad-icon-button\n      *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n    >\n      <mat-icon>view_column</mat-icon>\n    </mad-icon-button>\n    <!-- column view: multiple definitions -->\n    <mad-icon-button\n      *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n    >\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{background-color:#fff;display:flex;flex:1 1 auto;flex-direction:column;min-height:112px}.datatable-vertical-stretch-to-parent{display:flex;flex:1;flex-direction:column;max-height:100%;width:100%}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-300,.datatable-max-height-500{display:flex;flex:1;flex-direction:column;width:100%}.datatable{flex:1 1 auto;height:100%;overflow:auto;position:relative;width:100%}.datatable table{max-height:100%;width:100%}.datatable td,.datatable th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}.text-right{padding-right:24px!important;text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{position:relative;text-align:center;width:100%}.mad-datatable-action-bar{align-items:baseline;display:flex;justify-content:space-between}.mad-datatable-checkbox-container{margin-right:16px}.mad-datatable-spinner-wrapper{align-items:center;background-color:#fff;display:flex;height:100%;justify-content:center;left:0;opacity:.8;pointer-events:unset;position:absolute;top:0;width:100%;z-index:99999}.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-header-row th{background-color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:1}.active-column-definition{background-color:#f5f5f5;color:#000}"]
-            },] }
-];
-DataTableComponent.ctorParameters = () => [
-    { type: MatDialog }
-];
-DataTableComponent.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 }],
-    deleteDefinitionAllowed: [{ type: Input }],
-    useAsync: [{ 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 {
-}
-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 '';
-    }
-}
-StepHeaderComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-step-header',
-                template: "<div\n  class=\"header\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"1em\"\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",
-                inputs: ['color'],
-                host: {
-                    class: 'mad-step-header',
-                    role: 'tab',
-                },
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".header{-webkit-tap-highlight-color:transparent;border:1px solid #d3d3d3;box-sizing:content-box;cursor:pointer;height:62px;outline:var(--warn-color);overflow:hidden;width:100%}.header-label{align-items:center;display:flex}.step-state-complete{background:green;width:5px}.step-state-error{background:var(--warn-color);width:5px}.step-state-neutral{background:#d3d3d3;width:5px}.green-check{color:green}.red-error{color:var(--warn-color)}.check-border{border-color:#d3d3d3}.error-border{border-color:var(--warn-color)}"]
-            },] }
-];
-StepHeaderComponent.ctorParameters = () => [
-    { type: FocusMonitor },
-    { type: ElementRef }
-];
-StepHeaderComponent.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) {
-        var _a, _b;
-        //Mark current selected step as touched before selecting to display errors in the from
-        (_b = (_a = this._stepper.selected) === null || _a === void 0 ? void 0 : _a.stepControl) === null || _b === void 0 ? void 0 : _b.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) {
-        var _a, _b;
-        if (markFormAsTouched) {
-            (_a = this.stepControl) === null || _a === void 0 ? void 0 : _a.markAllAsTouched();
-        }
-        if ((_b = this.stepControl) === null || _b === void 0 ? void 0 : _b.valid) {
-            this.hasError = false;
-            this.completed = true;
-            this.state = STEP_STATE.DONE;
-        }
-        else {
-            this.completed = false;
-            this.hasError = true;
-            this.state = STEP_STATE.ERROR;
-        }
-    }
-}
-StepComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-step',
-                template: "<ng-template let-last=\"last\" let-nextBtnLbl=\"nextBtnLbl\" let-doneBtnLbl=\"doneBtnLbl\">\n    <div class=\"step-container\" fxLayout=\"column\">\n        <div class=\"step-content\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"step-buttons\">\n        <div *ngIf=\"!last\">\n            <button mat-stroked-button color=\"primary\" (click)=\"next()\">{{nextBtnLbl}}</button>\n        </div>\n        <div *ngIf=\"last\">\n            <button mat-stroked-button color=\"primary\" (click)=\"completeLast()\">{{doneBtnLbl}}</button>\n        </div>\n        </div>\n    </div>\n</ng-template>\n",
-                providers: [{ provide: CdkStep, useExisting: StepComponent }],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{align-items:center;border:none!important;display:flex;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{outline:0;overflow:hidden}.vertical-content{padding:0 24px}.step-container{border-bottom:1px solid #d3d3d3;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3}.step-buttons,.step-content{padding:2em}"]
-            },] }
-];
-StepComponent.ctorParameters = () => [
-    { type: StepperComponent, decorators: [{ type: Inject, args: [forwardRef(() => StepperComponent),] }] },
-    { type: ViewContainerRef }
-];
-StepComponent.propDecorators = {
-    onNext: [{ type: Output }],
-    onDone: [{ type: Output }],
-    onHeaderClick: [{ type: Output }]
-};
-class StepperComponent extends CdkStepper {
-    constructor(dir, changeDetectorRef, elementRef, _document) {
-        super(dir, changeDetectorRef, elementRef, _document);
-        /** 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) {
-        var _a, _b;
-        const closeLastStep = this.selectedIndex === this.steps.length - 1 && ((_a = this._steps.last) === null || _a === void 0 ? void 0 : _a.completed) && ((_b = this._steps.last) === null || _b === void 0 ? void 0 : _b.stepClosed);
-        if (closeLastStep) {
-            return 'next';
-        }
-        return super._getAnimationDirection(index);
-    }
-    _stepIsNavigable(index, step) {
-        return step.completed || this.selectedIndex === index || !this.linear;
-    }
-}
-StepperComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-stepper',
-                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\n                [ngTemplateOutlet]=\"stepTemplate\"\n                [ngTemplateOutletContext]=\"{step: step, i: i}\"></ng-container>\n        <div class=\"vertical-content-container\" [class.mat-stepper-vertical-line]=\"!isLast\">\n            <div class=\"vertical-stepper-content\" 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                <div class=\"vertical-content\">\n                    <ng-container [ngTemplateOutlet]=\"step.content\"\n                                  [ngTemplateOutletContext]=\"{step: step, i: i, last: isLast, first: isFirst, nextBtnLbl: this.nextButtonLabel, doneBtnLbl: this.doneButtonLabel}\"></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\"></mad-step-header>\n</ng-template>\n",
-                host: {
-                    '[class.stepper-vertical]': 'true',
-                    '[attr.aria-orientation]': '"vertical"',
-                    role: 'tablist',
-                },
-                animations: [madStepperAnimations.verticalStepTransition],
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                providers: [{ provide: CdkStepper, useExisting: StepperComponent }],
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".stepper-vertical{display:block}.mat-vertical-stepper-header{align-items:center;border:none!important;display:flex;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{outline:0;overflow:hidden}.vertical-content{padding:0 24px}.step-container{border-bottom:1px solid #d3d3d3;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3}.step-buttons,.step-content{padding:2em}"]
-            },] }
-];
-StepperComponent.ctorParameters = () => [
-    { type: Directionality, decorators: [{ type: Optional }] },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-StepperComponent.propDecorators = {
-    animationDone: [{ type: Output }],
-    nextButtonLabel: [{ type: Input }],
-    doneButtonLabel: [{ type: Input }],
-    _stepHeader: [{ type: ViewChildren, args: [StepHeaderComponent,] }],
-    _steps: [{ type: ContentChildren, args: [StepComponent, { descendants: true },] }]
-};
-
-class StepperModule {
-}
-StepperModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [StepperComponent, StepHeaderComponent, StepComponent],
-                imports: [CommonModule, MatButtonModule, MatIconModule, CdkStepperModule, FlexModule],
-                exports: [StepperComponent, StepHeaderComponent, StepComponent],
-            },] }
-];
-
-class ContentHeaderComponent {
-}
-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}"]
-            },] }
-];
-
-class ContentPanelContainerComponent {
-}
-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{display:flex;flex:1 1 auto;min-height:.05rem;overflow:hidden;position:relative}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column}"]
-            },] }
-];
-
-class ContentPanelContainerContentComponent {
-}
-ContentPanelContainerContentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-content-panel-container-content',
-                template: "<ng-content></ng-content>",
-                styles: [":host{border-top:.05rem solid #ccc;flex:1 1 auto;height:1rem;overflow-y:auto;padding:1rem}"]
-            },] }
-];
-
-class ContentPanelContainerFooterComponent {
-}
-ContentPanelContainerFooterComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mad-content-panel-container-footer',
-                template: "<ng-content></ng-content>",
-                styles: [":host{align-items:center;border-top:.05rem solid #ccc;display:flex;flex:0 0 auto;min-height:2rem;padding:.25rem 1rem}"]
-            },] }
-];
-
-class MainContainerComponent {
-}
-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{display:flex;flex-direction:column;height:100%}"]
-            },] }
-];
-
-class ContentPanelModule {
-}
-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() {
-        var _a;
-        return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.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);
-    }
-}
-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{height:auto;padding:0}::ng-deep .mat-step-header[aria-labelledby=disabled]{cursor:not-allowed;pointer-events:none!important}::ng-deep .mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 10px}::ng-deep .mat-stepper-horizontal .mat-stepper-horizontal-line{border-top-width:4px;margin:0 5px}.step-header-overlay{height:100%;position:absolute;right:0;top:0;width:100%}"]
-            },] }
-];
-FlowbarComponent.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 {
-}
-FlowbarModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [FlowbarComponent],
-                imports: [CommonModule, MatStepperModule],
-                exports: [FlowbarComponent],
-            },] }
-];
-
-class MaterialAddonsModule {
-}
-MaterialAddonsModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [
-                    ReadOnlyFormFieldModule,
-                    ButtonModule,
-                    ToolbarModule,
-                    MaterialActionButtonModule,
-                    NumericFieldModule,
-                    CardModule,
-                    QuickListModule,
-                    ThrottleClickModule,
-                ],
-            },] }
-];
-
-/*
- * Public API Surface of material-addons
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ButtonModule, CardModule, ContentHeaderComponent, ContentPanelContainerComponent, ContentPanelContainerContentComponent, ContentPanelContainerFooterComponent, ContentPanelModule, DataTableModule, FlowbarComponent, FlowbarModule, MainContainerComponent, MaterialActionButtonComponent, MaterialActionButtonModule, MaterialAddonsModule, NumberFormatService, NumericFieldModule, QuickListModule, ReadOnlyFormFieldComponent, ReadOnlyFormFieldModule, ReadOnlyFormFieldWrapperComponent, StepComponent, StepHeaderComponent, StepperComponent, StepperModule, TableModule, ThrottleClickDirective, ThrottleClickModule, ToolbarComponent, ToolbarModule, ToolbarService, madStepperAnimations, PrimaryButtonComponent as ɵb, MadBasicButton as ɵc, OutlineButtonComponent as ɵd, LinkButtonComponent as ɵe, DangerButtonComponent as ɵf, IconButtonComponent as ɵg, NumericFieldDirective as ɵh, CardComponent as ɵi, QuickListComponent as ɵj, BaseQuickListComponent as ɵk, QuickListCompactComponent as ɵl, TableComponent as ɵm, DataTableComponent as ɵn, DataTableColumnsModalComponent as ɵo };
-//# sourceMappingURL=porscheinformatik-material-addons.js.map