@porscheinformatik/material-addons 10.4.1 → 14.0.0-beta.0

package/bundles/porscheinformatik-material-addons.umd.js

@@ -1,3301 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/platform-browser'), require('@ngx-translate/core'), require('rxjs'), require('@angular/cdk/layout'), require('rxjs/operators'), require('@angular/material/menu'), require('@angular/material/toolbar'), require('@angular/material/badge'), require('@angular/material/card'), require('@angular/animations'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/cdk/collections'), require('uuid'), require('@angular/material/dialog'), require('@angular/cdk/drag-drop'), require('@angular/material/checkbox'), require('@angular/material/progress-spinner'), require('@angular/cdk/bidi'), require('@angular/cdk/stepper'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/stepper')) :
-    typeof define === 'function' && define.amd ? define('@porscheinformatik/material-addons', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/icon', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/platform-browser', '@ngx-translate/core', 'rxjs', '@angular/cdk/layout', 'rxjs/operators', '@angular/material/menu', '@angular/material/toolbar', '@angular/material/badge', '@angular/material/card', '@angular/animations', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/cdk/collections', 'uuid', '@angular/material/dialog', '@angular/cdk/drag-drop', '@angular/material/checkbox', '@angular/material/progress-spinner', '@angular/cdk/bidi', '@angular/cdk/stepper', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/stepper'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.porscheinformatik = global.porscheinformatik || {}, global.porscheinformatik['material-addons'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.icon, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.platformBrowser, global.i2, global.rxjs, global.ng.cdk.layout, global.rxjs.operators, global.ng.material.menu, global.ng.material.toolbar, global.ng.material.badge, global.ng.material.card, global.ng.animations, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.cdk.collections, global.uuid, global.ng.material.dialog, global.ng.cdk.dragDrop, global.ng.material.checkbox, global.ng.material.progressSpinner, global.ng.cdk.bidi, global.ng.cdk.stepper, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.stepper));
-}(this, (function (exports, i0, common, i1, button, icon, tooltip, formField, input, forms, platformBrowser, i2, rxjs, layout, operators, menu, toolbar, badge, card, animations, table, sort, paginator, collections, uuid, dialog, dragDrop, checkbox, progressSpinner, bidi, stepper, a11y, flexLayout, stepper$1) { 'use strict';
-
-    var MaterialActionButtonComponent = /** @class */ (function () {
-        function MaterialActionButtonComponent() {
-            this.icon = 'add';
-            // Sets the lower padding higher providing some bottom space for a fixed paginator
-            this.liftHigher = true;
-            this.liftHigher2 = false;
-        }
-        return MaterialActionButtonComponent;
-    }());
-    MaterialActionButtonComponent.decorators = [
-        { type: i0.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: i0.Input }],
-        id: [{ type: i0.Input }],
-        icon: [{ type: i0.Input }],
-        routerLink: [{ type: i0.Input }],
-        liftHigher: [{ type: i0.Input }],
-        liftHigher2: [{ type: i0.Input }]
-    };
-
-    var MaterialActionButtonModule = /** @class */ (function () {
-        function MaterialActionButtonModule() {
-        }
-        return MaterialActionButtonModule;
-    }());
-    MaterialActionButtonModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [MaterialActionButtonComponent],
-                    imports: [common.CommonModule, i1.RouterModule, button.MatButtonModule, icon.MatIconModule, tooltip.MatTooltipModule],
-                    exports: [MaterialActionButtonComponent],
-                },] }
-    ];
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    var MadBasicButton = /** @class */ (function () {
-        function MadBasicButton() {
-            this.disableClick = function (e) { return e.stopPropagation(); };
-        }
-        Object.defineProperty(MadBasicButton.prototype, "pointerEvent", {
-            get: function () {
-                return this.disabled ? 'none' : 'auto';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MadBasicButton.prototype, "opacity", {
-            get: function () {
-                return this.disabled ? '0.35' : '1';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        MadBasicButton.prototype.ngOnChanges = function () {
-            this.disableButton();
-        };
-        MadBasicButton.prototype.disableButton = function () {
-            if (this.disabled) {
-                this.button.nativeElement.addEventListener('click', this.disableClick);
-            }
-            else {
-                this.button.nativeElement.removeEventListener('click', this.disableClick);
-            }
-        };
-        return MadBasicButton;
-    }());
-    MadBasicButton.propDecorators = {
-        pointerEvent: [{ type: i0.HostBinding, args: ['style.pointer-events',] }],
-        opacity: [{ type: i0.HostBinding, args: ['style.opacity',] }]
-    };
-
-    var PrimaryButtonComponent = /** @class */ (function (_super) {
-        __extends(PrimaryButtonComponent, _super);
-        function PrimaryButtonComponent() {
-            var _this = _super.call(this) || this;
-            _this.title = '';
-            _super.prototype.button = _this.button;
-            _super.prototype.disabled = _this.disabled;
-            return _this;
-        }
-        return PrimaryButtonComponent;
-    }(MadBasicButton));
-    PrimaryButtonComponent.decorators = [
-        { type: i0.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 = function () { return []; };
-    PrimaryButtonComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        button: [{ type: i0.ViewChild, args: ['btn', { read: i0.ElementRef, static: true },] }]
-    };
-
-    var OutlineButtonComponent = /** @class */ (function (_super) {
-        __extends(OutlineButtonComponent, _super);
-        function OutlineButtonComponent() {
-            var _this = _super.call(this) || this;
-            _this.title = '';
-            _super.prototype.button = _this.button;
-            _super.prototype.disabled = _this.disabled;
-            return _this;
-        }
-        return OutlineButtonComponent;
-    }(MadBasicButton));
-    OutlineButtonComponent.decorators = [
-        { type: i0.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 = function () { return []; };
-    OutlineButtonComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        button: [{ type: i0.ViewChild, args: ['btn', { read: i0.ElementRef, static: true },] }]
-    };
-
-    var LinkButtonComponent = /** @class */ (function (_super) {
-        __extends(LinkButtonComponent, _super);
-        function LinkButtonComponent() {
-            var _this = _super.call(this) || this;
-            _this.title = '';
-            _super.prototype.button = _this.button;
-            _super.prototype.disabled = _this.disabled;
-            return _this;
-        }
-        return LinkButtonComponent;
-    }(MadBasicButton));
-    LinkButtonComponent.decorators = [
-        { type: i0.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 = function () { return []; };
-    LinkButtonComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        button: [{ type: i0.ViewChild, args: ['btn', { read: i0.ElementRef, static: true },] }]
-    };
-
-    var IconButtonComponent = /** @class */ (function (_super) {
-        __extends(IconButtonComponent, _super);
-        function IconButtonComponent() {
-            var _this = _super.call(this) || this;
-            _this.title = '';
-            _super.prototype.button = _this.button;
-            _super.prototype.disabled = _this.disabled;
-            return _this;
-        }
-        return IconButtonComponent;
-    }(MadBasicButton));
-    IconButtonComponent.decorators = [
-        { type: i0.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 = function () { return []; };
-    IconButtonComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        button: [{ type: i0.ViewChild, args: ['btn', { read: i0.ElementRef, static: true },] }]
-    };
-
-    var DangerButtonComponent = /** @class */ (function (_super) {
-        __extends(DangerButtonComponent, _super);
-        function DangerButtonComponent() {
-            var _this = _super.call(this) || this;
-            _this.title = '';
-            _super.prototype.button = _this.button;
-            _super.prototype.disabled = _this.disabled;
-            return _this;
-        }
-        return DangerButtonComponent;
-    }(MadBasicButton));
-    DangerButtonComponent.decorators = [
-        { type: i0.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 = function () { return []; };
-    DangerButtonComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        button: [{ type: i0.ViewChild, args: ['btn', { read: i0.ElementRef, static: true },] }]
-    };
-
-    var ButtonModule = /** @class */ (function () {
-        function ButtonModule() {
-        }
-        return ButtonModule;
-    }());
-    ButtonModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent],
-                    imports: [common.CommonModule, i1.RouterModule, button.MatButtonModule, icon.MatIconModule, tooltip.MatTooltipModule],
-                    exports: [PrimaryButtonComponent, OutlineButtonComponent, LinkButtonComponent, DangerButtonComponent, IconButtonComponent],
-                },] }
-    ];
-
-    /**
-     * Wraps a mat-form-field to replace it by a readOnly representation if necessary
-     *
-     * @author Stefan Laesser
-     */
-    var ReadOnlyFormFieldWrapperComponent = /** @class */ (function () {
-        function ReadOnlyFormFieldWrapperComponent(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;
-        }
-        ReadOnlyFormFieldWrapperComponent.prototype.ngOnInit = function () {
-            this.doRendering();
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.ngAfterViewInit = function () {
-            this.setReadonlyFieldStyle();
-            this.doRendering();
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.ngAfterViewChecked = function () {
-            this.setReadonlyFieldStyle();
-            this.setTooltipForOverflownField();
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.ngOnChanges = function (_) {
-            this.doRendering();
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.getLabel = function () {
-            if (!this.label) {
-                this.extractLabel();
-            }
-            return this.label;
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.doRendering = function () {
-            if (!this.originalContent) {
-                return;
-            }
-            if (!this.readonly) {
-                this.correctWidth();
-                return;
-            }
-            this.changeDetector.detectChanges();
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.extractLabel = function () {
-            if (!this.originalContent || !this.originalContent.nativeElement) {
-                return null;
-            }
-            var labelElement = this.originalContent.nativeElement.querySelector('mat-label');
-            this.label = labelElement ? labelElement.innerHTML : 'mat-label is missing!';
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.correctWidth = function () {
-            var formField = this.originalContent.nativeElement.querySelector('mat-form-field');
-            if (formField) {
-                formField.setAttribute('style', 'width:100%');
-            }
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.setReadonlyFieldStyle = function () {
-            var _a, _b;
-            var input = (_b = (_a = this.readOnlyContentWrapper) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.querySelector('input');
-            if (input) {
-                var textOverFlowStyleValue = this.getTextOverFlowStyleValue();
-                if (textOverFlowStyleValue) {
-                    input.setAttribute('style', 'text-overflow: ' + textOverFlowStyleValue);
-                }
-            }
-        };
-        // Ellipsis is enabled by default as text-overflow behaviour
-        ReadOnlyFormFieldWrapperComponent.prototype.getTextOverFlowStyleValue = function () {
-            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
-            var 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;
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.setTooltipForOverflownField = function () {
-            var _a, _b;
-            if (this.isEllipsisForTextOverflowEnabled()) {
-                var 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();
-                }
-            }
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.isEllipsisForTextOverflowEnabled = function () {
-            return this.getTextOverFlowStyleValue() === 'ellipsis';
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.isTextOverflown = function (input) {
-            if (input) {
-                return input.offsetWidth < input.scrollWidth;
-            }
-            return false;
-        };
-        ReadOnlyFormFieldWrapperComponent.prototype.calculateToolTipText = function () {
-            if (!this.unit) {
-                return this.value;
-            }
-            return this.unitPosition === 'left' ? this.unit + ' ' + this.value : this.value + ' ' + this.unit;
-        };
-        return ReadOnlyFormFieldWrapperComponent;
-    }());
-    ReadOnlyFormFieldWrapperComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef }
-    ]; };
-    ReadOnlyFormFieldWrapperComponent.propDecorators = {
-        originalContent: [{ type: i0.ViewChild, args: ['contentWrapper', { static: false },] }],
-        readOnlyContentWrapper: [{ type: i0.ViewChild, args: ['readOnlyContentWrapper', { static: false },] }],
-        readonly: [{ type: i0.Input }],
-        value: [{ type: i0.Input, args: ['value',] }],
-        textAlign: [{ type: i0.Input, args: ['textAlign',] }],
-        formatNumber: [{ type: i0.Input, args: ['formatNumber',] }],
-        decimalPlaces: [{ type: i0.Input, args: ['decimalPlaces',] }],
-        roundValue: [{ type: i0.Input, args: ['roundDisplayValue',] }],
-        autofillDecimals: [{ type: i0.Input, args: ['autofillDecimals',] }],
-        unit: [{ type: i0.Input, args: ['unit',] }],
-        unitPosition: [{ type: i0.Input, args: ['unitPosition',] }],
-        errorMessage: [{ type: i0.Input, args: ['errorMessage',] }],
-        id: [{ type: i0.Input }],
-        multiline: [{ type: i0.Input }],
-        rows: [{ type: i0.Input }],
-        shrinkIfEmpty: [{ type: i0.Input }]
-    };
-
-    var NumberFormatService = /** @class */ (function () {
-        function NumberFormatService(locale) {
-            this.allowedKeys = [];
-            // try to get the current formatting
-            var localeDecimalSeparator = (1.1).toLocaleString(locale).charAt(1);
-            this.decimalSeparator = localeDecimalSeparator === ',' ? ',' : '.';
-            this.groupingSeparator = localeDecimalSeparator === ',' ? '.' : ',';
-            this.allowedKeys = __spread(NumberFormatService.NUMBERS, [NumberFormatService.NEGATIVE, this.decimalSeparator]);
-        }
-        NumberFormatService.valueIsSet = function (value) {
-            return typeof value !== 'undefined' && value !== null && (typeof value !== 'string' || value.length !== 0);
-        };
-        NumberFormatService.prototype.format = function (value, options) {
-            return NumberFormatService.valueIsSet(value)
-                ? this.formatNumber(value.toString().replace(new RegExp('[.]', 'g'), this.decimalSeparator), options)
-                : '';
-        };
-        NumberFormatService.prototype.formatNumber = function (value, options) {
-            var autofillDecimals = this.valueOrDefault(options === null || options === void 0 ? void 0 : options.autofillDecimals, NumberFormatService.DEFAULT_AUTOFILL_DECIMALS);
-            var decimalPlaces = this.valueOrDefault(options === null || options === void 0 ? void 0 : options.decimalPlaces, NumberFormatService.DEFAULT_DECIMAL_PLACES);
-            var finalFormatting = this.valueOrDefault(options === null || options === void 0 ? void 0 : options.finalFormatting, NumberFormatService.DEFAULT_FINAL_FORMATTING);
-            var result = this.strip(value, { decimalPlaces: decimalPlaces, removeLeadingZeros: finalFormatting });
-            /* add grouping separator */
-            var decimalIndex = result.indexOf(this.decimalSeparator);
-            var isNegative = result.startsWith(NumberFormatService.NEGATIVE);
-            var 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 */
-                    var 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);
-                        var actualDecimalPlaces = result.length - actualDecimalIndex - 1;
-                        for (var j = 0; j < decimalPlaces - actualDecimalPlaces; j++) {
-                            result += '0';
-                        }
-                    }
-                    else {
-                        result = this.addMissingLeadingZero(result, actualDecimalIndex);
-                    }
-                }
-            }
-            return result;
-        };
-        NumberFormatService.prototype.strip = function (value, options) {
-            var e_1, _a;
-            var decimalPlaces = this.valueOrDefault(options === null || options === void 0 ? void 0 : options.decimalPlaces, NumberFormatService.DEFAULT_DECIMAL_PLACES);
-            var removeLeadingZeros = this.valueOrDefault(options === null || options === void 0 ? void 0 : options.removeLeadingZeros, NumberFormatService.DEFAULT_REMOVE_LEADING_ZEROS);
-            var result = '';
-            var indexDecimalSep = -1;
-            var j = -1;
-            var ignoredChars = 0;
-            try {
-                for (var value_1 = __values(value), value_1_1 = value_1.next(); !value_1_1.done; value_1_1 = value_1.next()) {
-                    var char = value_1_1.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;
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (value_1_1 && !value_1_1.done && (_a = value_1.return)) _a.call(value_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            return result;
-        };
-        NumberFormatService.prototype.addMissingLeadingZero = function (result, actualDecimalIndex) {
-            var 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;
-        };
-        NumberFormatService.prototype.valueOrDefault = function (value, defaultValue) {
-            return NumberFormatService.valueIsSet(value) ? value : defaultValue;
-        };
-        return NumberFormatService;
-    }());
-    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 = i0.ɵɵdefineInjectable({ factory: function NumberFormatService_Factory() { return new NumberFormatService(i0.ɵɵinject(i0.LOCALE_ID)); }, token: NumberFormatService, providedIn: "any" });
-    NumberFormatService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'any',
-                },] }
-    ];
-    NumberFormatService.ctorParameters = function () { return [
-        { type: String, decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
-    ]; };
-
-    /**
-     * Read-only mat-form-field representation of provided value
-     *
-     * @author Stefan Laesser
-     */
-    var ReadOnlyFormFieldComponent = /** @class */ (function () {
-        function ReadOnlyFormFieldComponent(changeDetector, renderer, numberFormatService) {
-            var _this = this;
-            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: function () { return !!_this.errorMessage; },
-            };
-        }
-        ReadOnlyFormFieldComponent.prototype.ngOnChanges = function (_) {
-            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
-        ReadOnlyFormFieldComponent.prototype.ngAfterViewChecked = function () {
-            this.injectUnitSymbol();
-        };
-        ReadOnlyFormFieldComponent.prototype.injectUnitSymbol = function () {
-            // 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
-                var 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') {
-                var 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;
-                var 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;
-            }
-        };
-        return ReadOnlyFormFieldComponent;
-    }());
-    ReadOnlyFormFieldComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.Renderer2 },
-        { type: NumberFormatService }
-    ]; };
-    ReadOnlyFormFieldComponent.propDecorators = {
-        value: [{ type: i0.Input, args: ['value',] }],
-        label: [{ type: i0.Input, args: ['label',] }],
-        textAlign: [{ type: i0.Input, args: ['textAlign',] }],
-        formatNumber: [{ type: i0.Input, args: ['formatNumber',] }],
-        decimalPlaces: [{ type: i0.Input, args: ['decimalPlaces',] }],
-        roundValue: [{ type: i0.Input, args: ['roundDisplayValue',] }],
-        autofillDecimals: [{ type: i0.Input, args: ['autofillDecimals',] }],
-        unit: [{ type: i0.Input, args: ['unit',] }],
-        unitPosition: [{ type: i0.Input, args: ['unitPosition',] }],
-        errorMessage: [{ type: i0.Input, args: ['errorMessage',] }],
-        multiline: [{ type: i0.Input }],
-        rows: [{ type: i0.Input }],
-        id: [{ type: i0.Input }],
-        shrinkIfEmpty: [{ type: i0.Input }],
-        inputEl: [{ type: i0.ViewChild, args: ['inputEl',] }]
-    };
-
-    var ReadOnlyFormFieldModule = /** @class */ (function () {
-        function ReadOnlyFormFieldModule() {
-        }
-        return ReadOnlyFormFieldModule;
-    }());
-    ReadOnlyFormFieldModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
-                    imports: [common.CommonModule, i1.RouterModule, formField.MatFormFieldModule, input.MatInputModule, forms.FormsModule, tooltip.MatTooltipModule],
-                    exports: [ReadOnlyFormFieldComponent, ReadOnlyFormFieldWrapperComponent],
-                },] }
-    ];
-
-    var ToolbarService = /** @class */ (function () {
-        function ToolbarService(router, translate) {
-            var _this = this;
-            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(function (routingEvent) {
-                if (routingEvent instanceof i1.NavigationEnd) {
-                    if (_this.currentUrl !== routingEvent.urlAfterRedirects) {
-                        _this.clearToolbarActions();
-                        _this.clearMainActions();
-                        delete _this.backAction;
-                        delete _this.dataTitle;
-                    }
-                    _this.currentUrl = router.url;
-                }
-            });
-        }
-        Object.defineProperty(ToolbarService.prototype, "toolbarTitle", {
-            get: function () {
-                return this.title;
-            },
-            set: function (toolbarTitle) {
-                this.title = toolbarTitle;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ToolbarService.prototype.ngOnDestroy = function () {
-            if (this.routerSubscription) {
-                this.routerSubscription.unsubscribe();
-            }
-        };
-        ToolbarService.prototype.getToolbarActions = function () {
-            return this.toolbarActions;
-        };
-        ToolbarService.prototype.addToolbarAction = function (action) {
-            var _this = this;
-            this.translate
-                .get(action.i18nActionKey)
-                .toPromise()
-                .then(function (translated) {
-                action.actionName = translated;
-                _this.toolbarActions.push(action);
-            });
-        };
-        ToolbarService.prototype.setDataTitle = function (dataTitle) {
-            this.dataTitle = dataTitle;
-        };
-        ToolbarService.prototype.setToolbarActionsAlwaysAsMenu = function (toolbarActionsAlwaysAsMenu) {
-            this.toolbarActionsAlwaysAsMenu = toolbarActionsAlwaysAsMenu;
-        };
-        ToolbarService.prototype.getToolbarActionsAlwaysAsMenu = function () {
-            return this.toolbarActionsAlwaysAsMenu;
-        };
-        ToolbarService.prototype.getDataTitle = function () {
-            return this.dataTitle;
-        };
-        ToolbarService.prototype.clearToolbarActions = function () {
-            this.toolbarActions = [];
-        };
-        ToolbarService.prototype.getMainActions = function () {
-            return this.mainActions;
-        };
-        ToolbarService.prototype.getBackAction = function () {
-            return this.backAction;
-        };
-        ToolbarService.prototype.setToolbarActionsMenuTitle = function (toolbarActionsMenuTitle) {
-            this.toolbarActionsMenuTitle = toolbarActionsMenuTitle;
-        };
-        ToolbarService.prototype.getToolbarActionsMenuTitle = function () {
-            return this.toolbarActionsMenuTitle;
-        };
-        ToolbarService.prototype.addMainAction = function (mainAction) {
-            var _this = this;
-            this.translate
-                .get(mainAction.i18nActionKey)
-                .toPromise()
-                .then(function (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.
-         */
-        ToolbarService.prototype.addBackAction = function (goBackRoute, isAbsoluteUrl) {
-            if (isAbsoluteUrl === void 0) { isAbsoluteUrl = false; }
-            this.backAction = {
-                matIcon: 'keyboard_backspace',
-                i18nActionKey: '',
-            };
-            if (!isAbsoluteUrl) {
-                this.backAction.routerLink = goBackRoute;
-            }
-            else {
-                this.backAction.href = goBackRoute;
-            }
-        };
-        ToolbarService.prototype.addSimpleBackButton = function (overrideIfPresent) {
-            if (overrideIfPresent === void 0) { overrideIfPresent = false; }
-            if (this.getBackAction() && !overrideIfPresent) {
-                return;
-            }
-            this.backAction = {
-                matIcon: 'keyboard_backspace',
-                i18nActionKey: '',
-                action: function () {
-                    window.history.back();
-                },
-            };
-        };
-        ToolbarService.prototype.clearMainActions = function () {
-            this.mainActions = [];
-        };
-        return ToolbarService;
-    }());
-    ToolbarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToolbarService_Factory() { return new ToolbarService(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.TranslateService)); }, token: ToolbarService, providedIn: "root" });
-    ToolbarService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    ToolbarService.ctorParameters = function () { return [
-        { type: i1.Router },
-        { type: i2.TranslateService }
-    ]; };
-
-    var ToolbarComponent = /** @class */ (function () {
-        function ToolbarComponent(breakpointObserver, titleService, toolbarService) {
-            this.breakpointObserver = breakpointObserver;
-            this.titleService = titleService;
-            this.toolbarService = toolbarService;
-            this.isHandset$ = this.breakpointObserver.observe([layout.Breakpoints.Handset]).pipe(operators.map(function (result) { return result.matches; }));
-        }
-        ToolbarComponent.prototype.getTitle = function () {
-            var dataTitle = this.toolbarService.getDataTitle();
-            var toolbarTitle = this.toolbarService.toolbarTitle;
-            var title = !toolbarTitle || toolbarTitle.length <= 0 ? this.titleService.getTitle() : toolbarTitle;
-            return !dataTitle || dataTitle.length <= 0 ? title : title + ': ' + dataTitle;
-        };
-        ToolbarComponent.prototype.getToolbarActions = function () {
-            return this.toolbarService.getToolbarActions();
-        };
-        ToolbarComponent.prototype.getMainActions = function () {
-            return this.toolbarService.getMainActions();
-        };
-        ToolbarComponent.prototype.hasPermission = function (action) {
-            if (!action || !action.showIf) {
-                return rxjs.of(true);
-            }
-            return action.showIf;
-        };
-        ToolbarComponent.prototype.isRouterLink = function () {
-            return this.toolbarService.getBackAction() && !!this.toolbarService.getBackAction().routerLink;
-        };
-        ToolbarComponent.prototype.isAbsoluteLink = function () {
-            return this.toolbarService.getBackAction() && !!this.toolbarService.getBackAction().href;
-        };
-        ToolbarComponent.prototype.isAction = function () {
-            return this.toolbarService.getBackAction() && !!this.toolbarService.getBackAction().action;
-        };
-        ToolbarComponent.prototype.getBackAction = function () {
-            return this.toolbarService.getBackAction();
-        };
-        ToolbarComponent.prototype.getToolbarActionsAlwaysAsMenu = function () {
-            return this.toolbarService.getToolbarActionsAlwaysAsMenu();
-        };
-        ToolbarComponent.prototype.getToolbarActionsMenuTitle = function () {
-            return this.toolbarService.getToolbarActionsMenuTitle();
-        };
-        ToolbarComponent.prototype.showBadgeForMenu = function () {
-            return (this.getToolbarActions()
-                .slice(1) // the first icon is not shown in menu
-                .filter(function (value) { return value.badge && value.badge.value; }).length > 0);
-        };
-        ToolbarComponent.prototype.hasImportantToolbarActions = function () {
-            return this.getToolbarActions().filter(function (value) { return !!value.importantAction; }).length > 0;
-        };
-        return ToolbarComponent;
-    }());
-    ToolbarComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: layout.BreakpointObserver },
-        { type: platformBrowser.Title },
-        { type: ToolbarService }
-    ]; };
-
-    var ToolbarModule = /** @class */ (function () {
-        function ToolbarModule() {
-        }
-        return ToolbarModule;
-    }());
-    ToolbarModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [ToolbarComponent],
-                    imports: [
-                        common.CommonModule,
-                        i1.RouterModule,
-                        menu.MatMenuModule,
-                        button.MatButtonModule,
-                        toolbar.MatToolbarModule,
-                        icon.MatIconModule,
-                        MaterialActionButtonModule,
-                        tooltip.MatTooltipModule,
-                        ButtonModule,
-                        badge.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.
-     */
-    var BACK_KEYCODE = 8;
-    var SPACE_KEYCODE = 32;
-    var DEL_KEYCODE = 46;
-    var CONTROL_KEYCODES_UPPER_BORDER = 46;
-    var OTHER_CONTROL_KEYS = new Set([224, 91, 93]);
-    var NumericFieldDirective = /** @class */ (function () {
-        function NumericFieldDirective(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 i0.EventEmitter();
-            this.displayValue = '';
-            this.originalValue = NaN;
-            /* Control Values Accessor Stuff below */
-            // eslint-disable-next-line
-            this.onChange = function () { };
-            // eslint-disable-next-line
-            this.onTouched = function () { };
-        }
-        Object.defineProperty(NumericFieldDirective.prototype, "numericValue", {
-            set: function (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();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NumericFieldDirective.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        NumericFieldDirective.prototype.registerOnTouched = function (fn) {
-            this.onTouched = fn;
-        };
-        NumericFieldDirective.prototype.setDisabledState = function () {
-            // Dont need to implement since its just a directive
-        };
-        NumericFieldDirective.prototype.writeValue = function (value) {
-            this.numericValue = value;
-        };
-        NumericFieldDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            /* 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', function (event) {
-                _this.formatInput(event.target, true);
-            });
-            this.keyupListener = this.renderer.listen(this.inputEl.nativeElement, 'keyup', function (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', function (event) {
-                var 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 */
-                    var 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 */
-                    var 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 */
-                    var 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;
-            });
-        };
-        NumericFieldDirective.prototype.ngOnDestroy = function () {
-            this.detachListener();
-        };
-        NumericFieldDirective.prototype.ngAfterViewChecked = function () {
-            this.injectUnitSymbol();
-        };
-        NumericFieldDirective.prototype.handleInputChanged = function () {
-            var _this = this;
-            // 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(function () {
-                _this.updateInput(_this.numberFormatService.format(_this._numericValue, {
-                    decimalPlaces: _this.decimalPlaces,
-                    finalFormatting: false,
-                    autofillDecimals: _this.autofillDecimals,
-                }));
-            }, 1);
-        };
-        NumericFieldDirective.prototype.formatInput = function (element, finalFormatting) {
-            var cursorPos = element.selectionStart;
-            var length = element.value.length;
-            var setCursor = this.displayValue !== element.value;
-            var textFormatted = this.numberFormatService.formatNumber(element.value, {
-                decimalPlaces: this.decimalPlaces,
-                finalFormatting: finalFormatting,
-                autofillDecimals: this.autofillDecimals,
-            });
-            // special handling to move unit symbol along with display value
-            if (this.textAlign === 'left' && this.unitPosition === 'right') {
-                var 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;
-                var 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);
-            }
-        };
-        NumericFieldDirective.prototype.updateInput = function (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);
-            }
-        };
-        NumericFieldDirective.prototype.getValueForFormControl = function () {
-            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;
-        };
-        NumericFieldDirective.prototype.injectUnitSymbol = function () {
-            // 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
-                var 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;
-            }
-        };
-        NumericFieldDirective.prototype.detachListener = function () {
-            if (this.inputChangeListener) {
-                this.inputChangeListener();
-                delete this.inputChangeListener;
-            }
-            if (this.keydownListener) {
-                this.keydownListener();
-                delete this.keydownListener;
-            }
-            if (this.keyupListener) {
-                this.keyupListener();
-                delete this.keyupListener;
-            }
-        };
-        NumericFieldDirective.prototype.roundOrTruncate = function (value) {
-            var method = this.roundValue ? 'round' : value < 0 ? 'ceil' : 'floor';
-            return Math[method](value * Math.pow(10, this.decimalPlaces)) / Math.pow(10, this.decimalPlaces);
-        };
-        return NumericFieldDirective;
-    }());
-    NumericFieldDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[madNumericField]',
-                    host: {
-                        '[class.text-right]': 'textAlign === "right"',
-                        '(change)': 'onChange(getValueForFormControl())',
-                        '(input)': 'onChange(getValueForFormControl())',
-                        '(blur)': 'onTouched()',
-                    },
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return NumericFieldDirective; }),
-                            multi: true,
-                        },
-                    ],
-                },] }
-    ];
-    NumericFieldDirective.ctorParameters = function () { return [
-        { type: i0.Renderer2 },
-        { type: i0.ElementRef },
-        { type: NumberFormatService }
-    ]; };
-    NumericFieldDirective.propDecorators = {
-        textAlign: [{ type: i0.Input, args: ['textAlign',] }],
-        decimalPlaces: [{ type: i0.Input, args: ['decimalPlaces',] }],
-        roundValue: [{ type: i0.Input, args: ['roundDisplayValue',] }],
-        autofillDecimals: [{ type: i0.Input, args: ['autofillDecimals',] }],
-        unit: [{ type: i0.Input, args: ['unit',] }],
-        unitPosition: [{ type: i0.Input, args: ['unitPosition',] }],
-        numericValueChanged: [{ type: i0.Output, args: ['numericValueChange',] }],
-        numericValue: [{ type: i0.Input, args: ['numericValue',] }]
-    };
-
-    var NumericFieldModule = /** @class */ (function () {
-        function NumericFieldModule() {
-        }
-        NumericFieldModule.forRoot = function () {
-            return {
-                ngModule: NumericFieldModule,
-                providers: [NumberFormatService],
-            };
-        };
-        return NumericFieldModule;
-    }());
-    NumericFieldModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    providers: [NumberFormatService],
-                    declarations: [NumericFieldDirective],
-                    exports: [NumericFieldDirective],
-                },] }
-    ];
-
-    var CardComponent = /** @class */ (function () {
-        function CardComponent() {
-            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 i0.EventEmitter();
-            this.cancel = new i0.EventEmitter();
-            this.save = new i0.EventEmitter();
-            this.additionalAction = new i0.EventEmitter();
-        }
-        CardComponent.prototype.onCancel = function () {
-            this.cancel.emit(undefined);
-        };
-        CardComponent.prototype.onEdit = function () {
-            this.edit.emit(undefined);
-            this.expanded = true;
-        };
-        CardComponent.prototype.onSave = function () {
-            this.save.emit(undefined);
-        };
-        CardComponent.prototype.toggleCollapse = function () {
-            this.expanded = !this.expanded;
-        };
-        CardComponent.prototype.additionalActionClicked = function () {
-            this.additionalAction.emit(undefined);
-        };
-        return CardComponent;
-    }());
-    CardComponent.decorators = [
-        { type: i0.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: [
-                        animations.trigger('collapseExpandAnimation', [
-                            animations.transition(':enter', [
-                                animations.style({ opacity: 0, height: 0, overflow: 'hidden' }),
-                                animations.animate('100ms', animations.style({
-                                    opacity: 1,
-                                    height: '*',
-                                })),
-                            ]),
-                            animations.transition(':leave', [
-                                animations.style({ opacity: 1, height: '*', overflow: 'hidden' }),
-                                animations.animate('100ms', animations.style({
-                                    opacity: 0,
-                                    height: 0,
-                                })),
-                            ]),
-                        ]),
-                        animations.trigger('rotateIcon', [
-                            animations.state('true', animations.style({ transform: 'rotate(0)' })),
-                            animations.state('false', animations.style({ transform: 'rotate(180deg)' })),
-                            animations.transition('true => false', animations.animate('100ms ease-out')),
-                            animations.transition('false => true', animations.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: i0.Input }],
-        cancelText: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
-        editText: [{ type: i0.Input }],
-        expandable: [{ type: i0.Input }],
-        expanded: [{ type: i0.Input }],
-        saveDisabled: [{ type: i0.Input }],
-        saveText: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        editMode: [{ type: i0.Input }],
-        additionalActionIcon: [{ type: i0.Input }],
-        additionalActionText: [{ type: i0.Input }],
-        edit: [{ type: i0.Output }],
-        cancel: [{ type: i0.Output }],
-        save: [{ type: i0.Output }],
-        additionalAction: [{ type: i0.Output }]
-    };
-
-    var ThrottleClickDirective = /** @class */ (function () {
-        function ThrottleClickDirective() {
-            this.throttleTime = 300;
-            this.throttleClick = new i0.EventEmitter();
-            this.clicks = new rxjs.Subject();
-        }
-        ThrottleClickDirective.prototype.clickEvent = function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.clicks.next(event);
-        };
-        ThrottleClickDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            this.subscription = this.clicks.pipe(operators.throttleTime(this.throttleTime)).subscribe(function (e) { return _this.throttleClick.emit(e); });
-        };
-        ThrottleClickDirective.prototype.ngOnDestroy = function () {
-            this.subscription.unsubscribe();
-        };
-        return ThrottleClickDirective;
-    }());
-    ThrottleClickDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[madThrottleClick]',
-                },] }
-    ];
-    ThrottleClickDirective.propDecorators = {
-        throttleTime: [{ type: i0.Input }],
-        throttleClick: [{ type: i0.Output }],
-        clickEvent: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
-    };
-
-    var ThrottleClickModule = /** @class */ (function () {
-        function ThrottleClickModule() {
-        }
-        return ThrottleClickModule;
-    }());
-    ThrottleClickModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [ThrottleClickDirective],
-                    imports: [common.CommonModule],
-                    exports: [ThrottleClickDirective],
-                },] }
-    ];
-
-    var CardModule = /** @class */ (function () {
-        function CardModule() {
-        }
-        return CardModule;
-    }());
-    CardModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [CardComponent],
-                    imports: [common.CommonModule, card.MatCardModule, icon.MatIconModule, ButtonModule, button.MatButtonModule, ThrottleClickModule],
-                    exports: [CardComponent],
-                },] }
-    ];
-
-    var BaseQuickListComponent = /** @class */ (function () {
-        function BaseQuickListComponent(changeDetectorRef) {
-            this.changeDetectorRef = changeDetectorRef;
-            this.allItems = [];
-            this.addLabel = 'NOT SET';
-            this.addPossible = true;
-            this.removePossible = true;
-            this.blankItem = {};
-            this.added = new i0.EventEmitter();
-            this.removed = new i0.EventEmitter();
-        }
-        BaseQuickListComponent.prototype.ngOnInit = function () {
-            this.addEventFunction = this.addItem.bind(this);
-            if (this.minItems) {
-                for (var n = this.allItems.length; n < this.minItems; n++) {
-                    this.interalAddItem();
-                }
-            }
-        };
-        BaseQuickListComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            setTimeout(function () { return _this.setFocusOnAdd(); }, 1);
-        };
-        BaseQuickListComponent.prototype.addItem = function () {
-            var newItem = this.interalAddItem();
-            if (!!newItem) {
-                this.added.emit(newItem);
-            }
-        };
-        BaseQuickListComponent.prototype.removeItem = function (item) {
-            if (this.isDeleteAllowed()) {
-                this.allItems.splice(this.allItems.indexOf(item), 1);
-                this.removed.emit(item);
-            }
-        };
-        BaseQuickListComponent.prototype.setFocusOnAdd = function () {
-            var _this = this;
-            this.rowCountFocus = this.itemRows.length;
-            this.itemRows.changes.subscribe(function (els) {
-                if (els.length > _this.rowCountFocus && !!els.last) {
-                    var firstFocusable = els.last.nativeElement.querySelector("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])");
-                    if (firstFocusable) {
-                        firstFocusable.focus();
-                    }
-                }
-                _this.rowCountFocus = els.length;
-            });
-        };
-        BaseQuickListComponent.prototype.isAddAllowed = function () {
-            return this.addPossible && (!this.maxItems || this.allItems.length < this.maxItems);
-        };
-        BaseQuickListComponent.prototype.isDeleteAllowed = function () {
-            return this.removePossible && (!this.minItems || this.allItems.length > this.minItems);
-        };
-        BaseQuickListComponent.prototype.interalAddItem = function () {
-            if (this.isAddAllowed()) {
-                var 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;
-        };
-        return BaseQuickListComponent;
-    }());
-    BaseQuickListComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'mad-base-quick-list',
-                    template: ''
-                },] }
-    ];
-    BaseQuickListComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    BaseQuickListComponent.propDecorators = {
-        allItems: [{ type: i0.Input }],
-        addLabel: [{ type: i0.Input }],
-        addPossible: [{ type: i0.Input }],
-        removePossible: [{ type: i0.Input }],
-        blankItem: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
-        maxItems: [{ type: i0.Input }],
-        minItems: [{ type: i0.Input }],
-        added: [{ type: i0.Output }],
-        removed: [{ type: i0.Output }],
-        itemTemplate: [{ type: i0.ContentChild, args: [i0.TemplateRef,] }],
-        itemRows: [{ type: i0.ViewChildren, args: ['row',] }]
-    };
-
-    var QuickListComponent = /** @class */ (function (_super) {
-        __extends(QuickListComponent, _super);
-        function QuickListComponent(changeDetectorRef) {
-            var _this = _super.call(this, changeDetectorRef) || this;
-            _this.changeDetectorRef = changeDetectorRef;
-            return _this;
-        }
-        return QuickListComponent;
-    }(BaseQuickListComponent));
-    QuickListComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-
-    var QuickListCompactComponent = /** @class */ (function (_super) {
-        __extends(QuickListCompactComponent, _super);
-        function QuickListCompactComponent(changeDetectorRef) {
-            var _this = _super.call(this, changeDetectorRef) || this;
-            _this.changeDetectorRef = changeDetectorRef;
-            return _this;
-        }
-        return QuickListCompactComponent;
-    }(BaseQuickListComponent));
-    QuickListCompactComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-
-    var QuickListModule = /** @class */ (function () {
-        function QuickListModule() {
-        }
-        return QuickListModule;
-    }());
-    QuickListModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [QuickListComponent, BaseQuickListComponent, QuickListCompactComponent],
-                    imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, ButtonModule],
-                    exports: [QuickListComponent, QuickListCompactComponent, BaseQuickListComponent],
-                },] }
-    ];
-
-    var TableComponent = /** @class */ (function () {
-        function TableComponent() {
-            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 i0.EventEmitter();
-            this.rowAction = new i0.EventEmitter();
-            this.sortEvent = new i0.EventEmitter();
-            this.ACTION_COLUMN_NAME = '__action__';
-            this.isFilterEnabled = false;
-            this.isPaginationEnabled = false;
-        }
-        Object.defineProperty(TableComponent.prototype, "displayedData", {
-            set: function (data) {
-                if (!this.dataSource) {
-                    this.dataSource = new table.MatTableDataSource(data);
-                }
-                else {
-                    this.dataSource.data = data;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TableComponent.prototype, "paginationEnabled", {
-            set: function (isPaginationEnabled) {
-                this.isPaginationEnabled = isPaginationEnabled;
-                // eslint-disable-next-line
-                var pageSize = this.isPaginationEnabled ? this.defaultPageSize : Number.MAX_VALUE;
-                if (this.dataSource.paginator) {
-                    this.dataSource.paginator._changePageSize(pageSize);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TableComponent.prototype, "filterEnabled", {
-            set: function (isFilterEnabled) {
-                this.isFilterEnabled = isFilterEnabled;
-                this.setFilterValue(undefined);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TableComponent.prototype.ngOnInit = function () {
-            this.columnNames = this.columns.map(function (column) { return column.label; });
-            this.isRowClickable = this.rowActions.length > 0;
-            if (this.isRowClickable) {
-                this.columnNames.unshift(this.ACTION_COLUMN_NAME);
-                this.defaultAction = this.rowActions[0];
-            }
-        };
-        TableComponent.prototype.ngAfterViewInit = function () {
-            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 = function (data, filter) { return !filter || filter.split(/\s+/).every(function (term) { return !!Object.keys(data).find(function (key) { return data[key].includes(term); }); }); };
-        };
-        TableComponent.prototype.onFilter = function (value) {
-            this.setFilterValue(value);
-        };
-        TableComponent.prototype.onRowEvent = function (event, row, action) {
-            if (action === void 0) { action = this.defaultAction; }
-            if (!!action && !this.isClickOnRowMenuIcon(event)) {
-                this.rowAction.emit(Object.assign(Object.assign({}, action), { outputRow: row }));
-            }
-        };
-        TableComponent.prototype.onSortingEvent = function (sortingParams) {
-            this.sortEvent.emit(sortingParams);
-        };
-        TableComponent.prototype.onTableAction = function (tableAction) {
-            if (!!tableAction) {
-                this.tableAction.emit(tableAction);
-            }
-        };
-        TableComponent.prototype.setFilterValue = function (value) {
-            this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
-        };
-        TableComponent.prototype.isClickOnRowMenuIcon = function (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');
-        };
-        return TableComponent;
-    }());
-    TableComponent.decorators = [
-        { type: i0.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: i0.Input }],
-        filterLabel: [{ type: i0.Input }],
-        filterPlaceholder: [{ type: i0.Input }],
-        noDataText: [{ type: i0.Input }],
-        pageSizeOptions: [{ type: i0.Input }],
-        defaultPageSize: [{ type: i0.Input }],
-        rowActions: [{ type: i0.Input }],
-        tableActions: [{ type: i0.Input }],
-        tableAction: [{ type: i0.Output }],
-        rowAction: [{ type: i0.Output }],
-        sortEvent: [{ type: i0.Output }],
-        paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator, { static: false },] }],
-        sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }],
-        displayedData: [{ type: i0.Input }],
-        paginationEnabled: [{ type: i0.Input }],
-        filterEnabled: [{ type: i0.Input }]
-    };
-
-    var TableModule = /** @class */ (function () {
-        function TableModule() {
-        }
-        return TableModule;
-    }());
-    TableModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [TableComponent],
-                    imports: [
-                        common.CommonModule,
-                        button.MatButtonModule,
-                        icon.MatIconModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        menu.MatMenuModule,
-                        paginator.MatPaginatorModule,
-                        sort.MatSortModule,
-                        table.MatTableModule,
-                        ButtonModule,
-                    ],
-                    exports: [TableComponent],
-                },] }
-    ];
-
-    var DataTableActionType = /** @class */ (function () {
-        function DataTableActionType() {
-        }
-        return DataTableActionType;
-    }());
-    DataTableActionType.SINGLE = 'SINGLE';
-    DataTableActionType.BATCH = 'BATCH';
-    DataTableActionType.NONE = 'NONE';
-
-    var DataTableColumnsModalComponent = /** @class */ (function () {
-        function DataTableColumnsModalComponent(dialogRef, data) {
-            this.dialogRef = dialogRef;
-            this.data = data;
-            this.selectedColumns = [];
-            this.availableColumns = [];
-            this.filteredAvailableColumns = [];
-        }
-        DataTableColumnsModalComponent.prototype.ngOnInit = function () {
-            var e_1, _b;
-            this.definition = this.data.definition;
-            try {
-                for (var _c = __values(this.data.allColumns), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var column = _d.value;
-                    var columnId = column.id;
-                    var selectedColumnIds = this.definition.displayedColumns.map(function (col) { return col.id; });
-                    if (selectedColumnIds.includes(columnId)) {
-                        this.selectedColumns.push(column);
-                    }
-                    else {
-                        this.availableColumns.push(column);
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            this.clearFilterValue();
-        };
-        DataTableColumnsModalComponent.prototype.onDrop = function (event) {
-            if (event.previousContainer === event.container) {
-                dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-            }
-            else {
-                var itemIndex = this.findMatchingItemIndex(event.previousContainer, event.item);
-                dragDrop.transferArrayItem(event.previousContainer.data, event.container.data, itemIndex, event.currentIndex);
-                this.clearFilterValue();
-                this.availableColumns.sort(function (a, b) { return a.label.localeCompare(b.label); });
-            }
-        };
-        DataTableColumnsModalComponent.prototype.onSave = function () {
-            this.definition.displayedColumns = this.selectedColumns;
-            var saveChange = {
-                action: 'SAVE',
-                definition: this.definition,
-            };
-            this.dialogRef.close(saveChange);
-        };
-        DataTableColumnsModalComponent.prototype.onDelete = function () {
-            var deleteChange = {
-                action: 'DELETE',
-                definition: this.definition,
-            };
-            this.dialogRef.close(deleteChange);
-        };
-        DataTableColumnsModalComponent.prototype.onCancel = function () {
-            this.dialogRef.close();
-        };
-        DataTableColumnsModalComponent.prototype.updateFilterValue = function () {
-            var _this = this;
-            var _a;
-            if (((_a = this.searchFilter) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                this.filteredAvailableColumns = this.availableColumns.filter(function (c) { return c.label.toLowerCase().includes(_this.searchFilter.toLowerCase()); });
-            }
-            else {
-                this.filteredAvailableColumns = __spread(this.availableColumns);
-            }
-        };
-        DataTableColumnsModalComponent.prototype.findMatchingItemIndex = function (previousContainer, item) {
-            var itemId = item.element.nativeElement.id;
-            var previousContainerItems = __spread(previousContainer.data);
-            if ((previousContainerItems === null || previousContainerItems === void 0 ? void 0 : previousContainerItems.length) < 1) {
-                return 0;
-            }
-            for (var itemIndex = 0; itemIndex < previousContainerItems.length; itemIndex++) {
-                if (previousContainerItems[itemIndex].id === itemId) {
-                    return itemIndex;
-                }
-            }
-            return 0;
-        };
-        DataTableColumnsModalComponent.prototype.clearFilterValue = function () {
-            this.searchFilter = '';
-            this.filteredAvailableColumns = __spread(this.availableColumns);
-        };
-        return DataTableColumnsModalComponent;
-    }());
-    DataTableColumnsModalComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: dialog.MatDialogRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
-    ]; };
-
-    var DataTableComponent = /** @class */ (function () {
-        function DataTableComponent(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 i0.EventEmitter();
-            this.actionEvent = new i0.EventEmitter();
-            this.pageEvent = new i0.EventEmitter();
-            this.allColumnsEvent = new i0.EventEmitter();
-            this.columnDefinitionChangeEvent = new i0.EventEmitter();
-            this.viewDefinitionChangeEvent = new i0.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 collections.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;
-        }
-        Object.defineProperty(DataTableComponent.prototype, "displayedColumns", {
-            set: function (cols) {
-                if (!this.displayedColumnDefinition) {
-                    this.columns = cols ? __spread(cols) : [];
-                    this.columnIds = this.columns.map(function (column) { return column.id; });
-                    this.columnIds.unshift(this.ACTION_COLUMN_NAME);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "displayedColumnDefinition", {
-            set: function (def) {
-                this.selectedColumnDefinion = def;
-                this.columns = def.displayedColumns;
-                this.columnIds = this.columns.map(function (column) { return column.id; });
-                this.columnIds.unshift(this.ACTION_COLUMN_NAME);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "tableData", {
-            set: function (data) {
-                if (!this.dataSource) {
-                    this.dataSource = new table.MatTableDataSource(data);
-                }
-                this.createDataMapsAndSetDisplayedDataSourceData(data);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "page", {
-            set: function (page) {
-                this.paginatorPageIndex = page.pageIndex;
-                this.paginatorPageSize = page.pageSize;
-                this.paginatorLength = page.length;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "columnDefinitions", {
-            set: function (definitions) {
-                var e_1, _b;
-                var _a;
-                this.editableColumnDefinitions = [];
-                this.viewableColumnDefinitions = [];
-                this.allColumnDefinitions = __spread(definitions);
-                try {
-                    for (var definitions_1 = __values(definitions), definitions_1_1 = definitions_1.next(); !definitions_1_1.done; definitions_1_1 = definitions_1.next()) {
-                        var definition = definitions_1_1.value;
-                        if (definition.editable) {
-                            this.editableColumnDefinitions.push(definition);
-                        }
-                        if (((_a = definition.displayedColumns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                            this.viewableColumnDefinitions.push(definition);
-                        }
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (definitions_1_1 && !definitions_1_1.done && (_b = definitions_1.return)) _b.call(definitions_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "loading", {
-            set: function (isLoading) {
-                this.isLoading = isLoading;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "defaultPageSize", {
-            set: function (defaultSize) {
-                this.paginatorPageSize = defaultSize;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "externalPaginator", {
-            set: function (paginator) {
-                this.extPaginator = paginator;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "paginationEnabled", {
-            set: function (isPaginationEnabled) {
-                this.isPaginationEnabled = isPaginationEnabled;
-                this.unsetPageSizeIfNecessary();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "allColumns", {
-            set: function (allColumns) {
-                this.allAvailableColumns = allColumns;
-                if (allColumns && this.showColumnModal) {
-                    this.openColumnModal();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "filterEnabled", {
-            set: function (isFilterEnabled) {
-                this.isFilterEnabled = !this.useAsync ? isFilterEnabled : false;
-                this.setFilterValue(undefined);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "forceMode", {
-            set: function (mode) {
-                if (mode === this.SINGLE || mode === this.BATCH || mode === this.NONE) {
-                    this._forceMode = mode;
-                    this.mode = mode;
-                    this.setActions();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DataTableComponent.compare = function (a, b, sort) {
-            var x = a[sort.active];
-            var y = b[sort.active];
-            var 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;
-            }
-        };
-        DataTableComponent.compareNumber = function (x, y, ascending) {
-            return ascending ? x - y : y - x;
-        };
-        DataTableComponent.compareString = function (x, y, ascending) {
-            return ascending ? x.localeCompare(y) : y.localeCompare(x);
-        };
-        DataTableComponent.compareBoolean = function (x, y, ascending) {
-            if (x === y) {
-                return 0;
-            }
-            if (ascending) {
-                // true first
-                return x ? -1 : 1;
-            }
-            else {
-                // false first
-                return x ? 1 : -1;
-            }
-        };
-        DataTableComponent.transformData = function (value, transformer, transformerParams) {
-            if (!transformer || !(transformer instanceof Function)) {
-                return value;
-            }
-            return transformer(value, transformerParams);
-        };
-        DataTableComponent.generateRowId = function () {
-            return uuid.v4();
-        };
-        DataTableComponent.isClickOnRowMenuIcon = function (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');
-        };
-        DataTableComponent.prototype.ngOnInit = function () {
-            this.mode = this.getTableMode();
-            this.setActions();
-            if (this.mode !== this.NONE) {
-                this.isRowClickable = true;
-                this.defaultAction = this.rowActions[0];
-            }
-        };
-        DataTableComponent.prototype.ngAfterViewInit = function () {
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort;
-        };
-        DataTableComponent.prototype.onColumnSettings = function (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();
-            }
-        };
-        DataTableComponent.prototype.onViewDefinition = function (definition) {
-            this.selectedDefinition = definition;
-            this.viewDefinitionChangeEvent.emit(definition);
-        };
-        DataTableComponent.prototype.isCurrentDefinition = function (definition) {
-            return this.selectedDefinition && this.selectedDefinition.id === definition.id;
-        };
-        Object.defineProperty(DataTableComponent.prototype, "selectedCount", {
-            get: function () {
-                var _a;
-                return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selected) ? this.selectionModel.selected.length : 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DataTableComponent.prototype, "rowCount", {
-            get: function () {
-                return this.getAllDataSourceRowsOfCurrentPage() ? this.getAllDataSourceRowsOfCurrentPage().length : 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DataTableComponent.prototype.getAllDataSourceRowsOfCurrentPage = function () {
-            var _a;
-            return (_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._pageData(this.dataSource.data);
-        };
-        DataTableComponent.prototype.getSelectedCount = function (actionType) {
-            var count = this.selectedCount;
-            if (actionType !== this.BATCH || count < 2) {
-                return '';
-            }
-            return ' (' + count + ')';
-        };
-        DataTableComponent.prototype.isDisabled = function (actionType) {
-            switch (actionType) {
-                case this.SINGLE:
-                    return this.selectedCount !== 1;
-                case this.BATCH:
-                    return this.selectedCount < 1;
-                default:
-                    return false;
-            }
-        };
-        DataTableComponent.prototype.onToggleSelectAll = function () {
-            var _this = this;
-            // 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(function (row) {
-                    _this.selectionModel.select('' + row.rowId);
-                });
-            }
-        };
-        DataTableComponent.prototype.isSelected = function (rowId) {
-            return this.selectionModel.isSelected(rowId);
-        };
-        DataTableComponent.prototype.setFilterValue = function (value) {
-            this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
-        };
-        DataTableComponent.prototype.onRowCheckbox = function (event, row) {
-            event.stopPropagation(); // no click event on row
-            this.selectionModel.toggle(row.rowId);
-        };
-        DataTableComponent.prototype.onRowEvent = function (event, row, action) {
-            if (action === void 0) { 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)) {
-                        var 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;
-            }
-        };
-        DataTableComponent.prototype.onSortingEvent = function (sort) {
-            if (this.useAsync) {
-                this.sortEvent.emit(sort);
-            }
-            else {
-                this.internalSort(sort);
-            }
-        };
-        DataTableComponent.prototype.onPageEvent = function (event) {
-            if (this.useAsync) {
-                this.pageEvent.emit(event);
-            }
-        };
-        DataTableComponent.prototype.onTableAction = function (tableAction) {
-            var e_2, _b;
-            if (!!tableAction) {
-                var selection = [];
-                try {
-                    for (var _c = __values(this.selectionModel.selected), _d = _c.next(); !_d.done; _d = _c.next()) {
-                        var selected = _d.value;
-                        selection.push(this.idGenerator ? selected : this.actualDataMap.get(selected));
-                    }
-                }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-                    }
-                    finally { if (e_2) throw e_2.error; }
-                }
-                tableAction.selected = selection;
-                this.actionEvent.emit(tableAction);
-            }
-        };
-        DataTableComponent.prototype.emitTableAction = function (action, selected) {
-            var emitAction = Object.assign({}, action);
-            if (action.type !== this.NONE) {
-                emitAction.selected = __spread(selected);
-            }
-            this.actionEvent.emit(emitAction);
-        };
-        DataTableComponent.prototype.generateDisplayedDataElement = function (rowId, actualDataElement) {
-            var e_3, _b;
-            var displayedDataElement = {};
-            displayedDataElement.rowId = rowId;
-            try {
-                for (var _c = __values(this.columns), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var column = _d.value;
-                    var actualValue = actualDataElement[column.dataPropertyName];
-                    displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-            return displayedDataElement;
-        };
-        DataTableComponent.prototype.internalSort = function (sort) {
-            var sortedData = __spread(this.dataSource.data).sort(function (a, b) { return DataTableComponent.compare(a, b, sort); });
-            this.dataSource.data = __spread(sortedData);
-        };
-        DataTableComponent.prototype.setActions = function () {
-            var e_4, _b;
-            this.rowActions = [];
-            this.tableActions = [];
-            try {
-                for (var _c = __values(this.actions), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var action = _d.value;
-                    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);
-                        }
-                    }
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
-                try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-                }
-                finally { if (e_4) throw e_4.error; }
-            }
-        };
-        DataTableComponent.prototype.createDataMapsAndSetDisplayedDataSourceData = function (data) {
-            var e_5, _b;
-            var displayedDataList = [];
-            this.actualDataMap.clear();
-            this.displayedDataMap.clear();
-            if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
-                try {
-                    for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
-                        var dataEntry = data_1_1.value;
-                        var rowId = this.idGenerator ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
-                        this.actualDataMap.set(rowId, dataEntry);
-                        var displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
-                        this.displayedDataMap.set(rowId, displayedDataElement);
-                        displayedDataList.push(displayedDataElement);
-                    }
-                }
-                catch (e_5_1) { e_5 = { error: e_5_1 }; }
-                finally {
-                    try {
-                        if (data_1_1 && !data_1_1.done && (_b = data_1.return)) _b.call(data_1);
-                    }
-                    finally { if (e_5) throw e_5.error; }
-                }
-            }
-            this.dataSource.data = displayedDataList;
-            this.unsetPageSizeIfNecessary();
-        };
-        DataTableComponent.prototype.openColumnModal = function () {
-            var _this = this;
-            var 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,
-            };
-            var dialog = this.matDialog.open(DataTableColumnsModalComponent, { data: dialogData });
-            dialog.afterClosed().subscribe(function (result) {
-                // no event on CANCEL
-                if (result) {
-                    _this.columnDefinitionChangeEvent.emit(result);
-                }
-            });
-        };
-        DataTableComponent.prototype.getTableMode = function () {
-            var e_6, _b;
-            if (this._forceMode) {
-                return this._forceMode;
-            }
-            if (!this.actions) {
-                return this.NONE;
-            }
-            var distinctActionTypes = new Set();
-            try {
-                for (var _c = __values(this.actions), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var rowAction = _d.value;
-                    distinctActionTypes.add(rowAction.type);
-                }
-            }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
-            finally {
-                try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-                }
-                finally { if (e_6) throw e_6.error; }
-            }
-            if (distinctActionTypes.has(this.BATCH)) {
-                return this.BATCH;
-            }
-            if (distinctActionTypes.has(this.SINGLE)) {
-                return this.SINGLE;
-            }
-            return this.NONE;
-        };
-        DataTableComponent.prototype.unsetPageSizeIfNecessary = function () {
-            if (!this.useAsync && !this.isPaginationEnabled) {
-                var dataCount = this.dataSource.data ? this.dataSource.data.length : 0;
-                this.paginatorPageSize = dataCount;
-                this.paginatorLength = dataCount;
-            }
-        };
-        return DataTableComponent;
-    }());
-    DataTableComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: dialog.MatDialog }
-    ]; };
-    DataTableComponent.propDecorators = {
-        filterLabel: [{ type: i0.Input }],
-        filterPlaceholder: [{ type: i0.Input }],
-        filterColumnsLabel: [{ type: i0.Input }],
-        filterColumnsPlaceHolder: [{ type: i0.Input }],
-        noDataText: [{ type: i0.Input }],
-        columnSettingsModalTitleLabel: [{ type: i0.Input }],
-        selectedLabel: [{ type: i0.Input }],
-        availableLabel: [{ type: i0.Input }],
-        saveLabel: [{ type: i0.Input }],
-        deleteLabel: [{ type: i0.Input }],
-        cancelLabel: [{ type: i0.Input }],
-        infoTextLabel: [{ type: i0.Input }],
-        tableClass: [{ type: i0.Input }],
-        pageSizeOptions: [{ type: i0.Input }],
-        externalFilter: [{ type: i0.Input }],
-        actions: [{ type: i0.Input }],
-        idGenerator: [{ type: i0.Input }],
-        deleteDefinitionAllowed: [{ type: i0.Input }],
-        useAsync: [{ type: i0.Input }],
-        displayedColumns: [{ type: i0.Input }],
-        displayedColumnDefinition: [{ type: i0.Input }],
-        tableData: [{ type: i0.Input }],
-        page: [{ type: i0.Input }],
-        columnDefinitions: [{ type: i0.Input }],
-        loading: [{ type: i0.Input }],
-        defaultPageSize: [{ type: i0.Input }],
-        externalPaginator: [{ type: i0.Input }],
-        paginationEnabled: [{ type: i0.Input }],
-        allColumns: [{ type: i0.Input }],
-        filterEnabled: [{ type: i0.Input }],
-        forceMode: [{ type: i0.Input }],
-        sortEvent: [{ type: i0.Output }],
-        actionEvent: [{ type: i0.Output }],
-        pageEvent: [{ type: i0.Output }],
-        allColumnsEvent: [{ type: i0.Output }],
-        columnDefinitionChangeEvent: [{ type: i0.Output }],
-        viewDefinitionChangeEvent: [{ type: i0.Output }],
-        paginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator, { static: false },] }],
-        sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
-    };
-
-    var DataTableModule = /** @class */ (function () {
-        function DataTableModule() {
-        }
-        return DataTableModule;
-    }());
-    DataTableModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [DataTableComponent, DataTableColumnsModalComponent],
-                    imports: [
-                        common.CommonModule,
-                        button.MatButtonModule,
-                        icon.MatIconModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        menu.MatMenuModule,
-                        paginator.MatPaginatorModule,
-                        sort.MatSortModule,
-                        table.MatTableModule,
-                        progressSpinner.MatProgressSpinnerModule,
-                        ButtonModule,
-                        i2.TranslateModule,
-                        checkbox.MatCheckboxModule,
-                        badge.MatBadgeModule,
-                        dragDrop.DragDropModule,
-                        forms.FormsModule,
-                    ],
-                    exports: [DataTableComponent, DataTableColumnsModalComponent],
-                },] }
-    ];
-
-    var StepHeaderComponent = /** @class */ (function (_super) {
-        __extends(StepHeaderComponent, _super);
-        function StepHeaderComponent(_focusMonitor, _elementRef) {
-            var _this = _super.call(this, _elementRef) || this;
-            _this._focusMonitor = _focusMonitor;
-            return _this;
-        }
-        StepHeaderComponent.prototype.ngAfterViewInit = function () {
-            this._focusMonitor.monitor(this._elementRef, true);
-        };
-        StepHeaderComponent.prototype.ngOnDestroy = function () {
-            this._focusMonitor.stopMonitoring(this._elementRef);
-        };
-        /** Focuses the step header. */
-        StepHeaderComponent.prototype.focus = function (origin, options) {
-            if (origin) {
-                this._focusMonitor.focusVia(this._elementRef, origin, options);
-            }
-            else {
-                this._elementRef.nativeElement.focus(options);
-            }
-        };
-        StepHeaderComponent.prototype.getCssForState = function () {
-            if (this.state === stepper.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';
-            }
-        };
-        StepHeaderComponent.prototype.getIcon = function () {
-            if (this.completed) {
-                return 'check_circle_outline';
-            }
-            else if (this.hasError) {
-                return 'error_outline';
-            }
-            return '';
-        };
-        return StepHeaderComponent;
-    }(stepper.CdkStepHeader));
-    StepHeaderComponent.decorators = [
-        { type: i0.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: i0.ViewEncapsulation.None,
-                    changeDetection: i0.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 = function () { return [
-        { type: a11y.FocusMonitor },
-        { type: i0.ElementRef }
-    ]; };
-    StepHeaderComponent.propDecorators = {
-        index: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        state: [{ type: i0.Input }],
-        errorMessage: [{ type: i0.Input }],
-        selected: [{ type: i0.Input }],
-        active: [{ type: i0.Input }],
-        optional: [{ type: i0.Input }],
-        hasError: [{ type: i0.Input }],
-        completed: [{ type: i0.Input }],
-        closed: [{ type: i0.Input }]
-    };
-
-    /**
-     * Animations used by the MAD stepper.
-     */
-    var madStepperAnimations = {
-        verticalStepTransition: animations.trigger('stepTransition', [
-            animations.state('previous', animations.style({ height: '0px', visibility: 'hidden' })),
-            animations.state('next', animations.style({ height: '0px', visibility: 'hidden' })),
-            animations.state('current', animations.style({ height: '*', visibility: 'visible' })),
-            animations.transition('* <=> current', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-        ]),
-    };
-
-    var StepComponent = /** @class */ (function (_super) {
-        __extends(StepComponent, _super);
-        function StepComponent(stepper, _viewContainerRef) {
-            var _this = _super.call(this, stepper) || this;
-            _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 i0.EventEmitter();
-            /** Action event for the done button. If not set the StepComponent will handle the step navigation  */
-            _this.onDone = new i0.EventEmitter();
-            /*** Action event when the header is clicked. If not set the StepComponent will handle the step navigation*/
-            _this.onHeaderClick = new i0.EventEmitter();
-            _this.stepClosed = false;
-            _this._isSelected = rxjs.Subscription.EMPTY;
-            return _this;
-        }
-        StepComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            this._isSelected = this._stepper.steps.changes
-                .pipe(operators.switchMap(function () { return _this._stepper.selectionChange.pipe(operators.map(function (event) { return event.selectedStep === _this; }), operators.tap(function () { return (_this.stepClosed = false); }), operators.startWith(_this._stepper.selected === _this)); }))
-                .subscribe();
-        };
-        StepComponent.prototype.ngOnDestroy = function () {
-            this._isSelected.unsubscribe();
-        };
-        StepComponent.prototype.next = function (markFormAsTouched) {
-            if (markFormAsTouched === void 0) { markFormAsTouched = true; }
-            this.stepValidation(markFormAsTouched);
-            if (this.onNext.observers.length <= 0) {
-                this.stepper.next();
-            }
-            this.onNext.emit();
-        };
-        StepComponent.prototype.selectAndMarkAsTouched = function (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);
-        };
-        StepComponent.prototype.completeLast = function () {
-            this.stepValidation(true);
-            this.stepClosed = true;
-            if (this.onDone.observers.length <= 0) {
-                this.stepper.next();
-            }
-            this.onDone.emit();
-        };
-        StepComponent.prototype.resetValidations = function () {
-            this.hasError = false;
-            this.completed = true;
-            this.state = stepper.STEP_STATE.DONE;
-        };
-        StepComponent.prototype.stepValidation = function (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 = stepper.STEP_STATE.DONE;
-            }
-            else {
-                this.completed = false;
-                this.hasError = true;
-                this.state = stepper.STEP_STATE.ERROR;
-            }
-        };
-        return StepComponent;
-    }(stepper.CdkStep));
-    StepComponent.decorators = [
-        { type: i0.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: stepper.CdkStep, useExisting: StepComponent }],
-                    encapsulation: i0.ViewEncapsulation.None,
-                    changeDetection: i0.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 = function () { return [
-        { type: StepperComponent, decorators: [{ type: i0.Inject, args: [i0.forwardRef(function () { return StepperComponent; }),] }] },
-        { type: i0.ViewContainerRef }
-    ]; };
-    StepComponent.propDecorators = {
-        onNext: [{ type: i0.Output }],
-        onDone: [{ type: i0.Output }],
-        onHeaderClick: [{ type: i0.Output }]
-    };
-    var StepperComponent = /** @class */ (function (_super) {
-        __extends(StepperComponent, _super);
-        function StepperComponent(dir, changeDetectorRef, elementRef, _document) {
-            var _this = _super.call(this, dir, changeDetectorRef, elementRef, _document) || this;
-            /** Event emitted when the current step is done transitioning in. */
-            _this.animationDone = new i0.EventEmitter();
-            /** Steps that belong to the current stepper, excluding ones from nested steppers. */
-            _this.steps = new i0.QueryList();
-            _this._animationDone = new rxjs.Subject();
-            _this._orientation = 'vertical';
-            return _this;
-        }
-        StepperComponent.prototype.ngOnInit = function () {
-            // Only linear stepper implementation is supported
-            _super.prototype.linear = true;
-        };
-        StepperComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            _super.prototype.ngAfterContentInit.call(this);
-            this.steps.changes.pipe(operators.takeUntil(this._destroyed)).subscribe(function () {
-                _this._stateChanged();
-            });
-            this._animationDone
-                .pipe(operators.distinctUntilChanged(function (x, y) { return x.fromState === y.fromState && x.toState === y.toState; }), operators.takeUntil(this._destroyed))
-                .subscribe(function (event) {
-                if (event.toState === 'current') {
-                    _this.animationDone.emit();
-                }
-            });
-        };
-        /**
-         * Method patched to enable the closing of the last step.
-         */
-        StepperComponent.prototype._getAnimationDirection = function (index) {
-            var _a, _b;
-            var 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.prototype._getAnimationDirection.call(this, index);
-        };
-        StepperComponent.prototype._stepIsNavigable = function (index, step) {
-            return step.completed || this.selectedIndex === index || !this.linear;
-        };
-        return StepperComponent;
-    }(stepper.CdkStepper));
-    StepperComponent.decorators = [
-        { type: i0.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: stepper.CdkStepper, useExisting: StepperComponent }],
-                    encapsulation: i0.ViewEncapsulation.None,
-                    changeDetection: i0.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 = function () { return [
-        { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-    StepperComponent.propDecorators = {
-        animationDone: [{ type: i0.Output }],
-        nextButtonLabel: [{ type: i0.Input }],
-        doneButtonLabel: [{ type: i0.Input }],
-        _stepHeader: [{ type: i0.ViewChildren, args: [StepHeaderComponent,] }],
-        _steps: [{ type: i0.ContentChildren, args: [StepComponent, { descendants: true },] }]
-    };
-
-    var StepperModule = /** @class */ (function () {
-        function StepperModule() {
-        }
-        return StepperModule;
-    }());
-    StepperModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [StepperComponent, StepHeaderComponent, StepComponent],
-                    imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, stepper.CdkStepperModule, flexLayout.FlexModule],
-                    exports: [StepperComponent, StepHeaderComponent, StepComponent],
-                },] }
-    ];
-
-    var ContentHeaderComponent = /** @class */ (function () {
-        function ContentHeaderComponent() {
-        }
-        return ContentHeaderComponent;
-    }());
-    ContentHeaderComponent.decorators = [
-        { type: i0.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}"]
-                },] }
-    ];
-
-    var ContentPanelContainerComponent = /** @class */ (function () {
-        function ContentPanelContainerComponent() {
-        }
-        return ContentPanelContainerComponent;
-    }());
-    ContentPanelContainerComponent.decorators = [
-        { type: i0.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}"]
-                },] }
-    ];
-
-    var ContentPanelContainerContentComponent = /** @class */ (function () {
-        function ContentPanelContainerContentComponent() {
-        }
-        return ContentPanelContainerContentComponent;
-    }());
-    ContentPanelContainerContentComponent.decorators = [
-        { type: i0.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}"]
-                },] }
-    ];
-
-    var ContentPanelContainerFooterComponent = /** @class */ (function () {
-        function ContentPanelContainerFooterComponent() {
-        }
-        return ContentPanelContainerFooterComponent;
-    }());
-    ContentPanelContainerFooterComponent.decorators = [
-        { type: i0.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}"]
-                },] }
-    ];
-
-    var MainContainerComponent = /** @class */ (function () {
-        function MainContainerComponent() {
-        }
-        return MainContainerComponent;
-    }());
-    MainContainerComponent.decorators = [
-        { type: i0.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%}"]
-                },] }
-    ];
-
-    var ContentPanelModule = /** @class */ (function () {
-        function ContentPanelModule() {
-        }
-        return ContentPanelModule;
-    }());
-    ContentPanelModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        ContentHeaderComponent,
-                        ContentPanelContainerComponent,
-                        ContentPanelContainerContentComponent,
-                        ContentPanelContainerFooterComponent,
-                        MainContainerComponent,
-                    ],
-                    imports: [common.CommonModule],
-                    exports: [
-                        ContentHeaderComponent,
-                        ContentPanelContainerComponent,
-                        ContentPanelContainerContentComponent,
-                        ContentPanelContainerFooterComponent,
-                        MainContainerComponent,
-                    ],
-                },] }
-    ];
-
-    var FlowbarComponent = /** @class */ (function () {
-        function FlowbarComponent() {
-            this._steps = [];
-            this._activeStepChange = new i0.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 i0.EventEmitter(true);
-        }
-        Object.defineProperty(FlowbarComponent.prototype, "currentStepLabel", {
-            get: function () {
-                return this._activeStep.label;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FlowbarComponent.prototype, "currentSubStepLabel", {
-            get: function () {
-                var _a;
-                return (_a = this._activeStep.activeSubStep) === null || _a === void 0 ? void 0 : _a.label;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FlowbarComponent.prototype.ngOnInit = function () {
-            // 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(function (step) { return 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(function (step) { return step.enabled; });
-                    }
-                    this._activeStepChange.emit(this._activeStep);
-                }
-            }
-        };
-        FlowbarComponent.prototype.ngAfterViewInit = function () {
-            this.stepper._getIndicatorType = function () { return 'number'; };
-        };
-        FlowbarComponent.prototype.getIndexForActiveStep = function () {
-            var selectedIndex = this._steps.indexOf(this._activeStep);
-            return selectedIndex === -1 ? 0 : selectedIndex;
-        };
-        FlowbarComponent.prototype.changeActiveStep = function (step) {
-            var 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);
-        };
-        FlowbarComponent.prototype.changeActiveStepOnHeader = function (step) {
-            var stepIndex = this._steps.indexOf(step);
-            this._activeStep = step;
-            this.stepper.selected = this.stepper._steps.find(function (_, i) { return i === stepIndex; });
-        };
-        FlowbarComponent.prototype.changeActiveSubStep = function (subStep) {
-            this._activeStep.activeSubStep = subStep;
-        };
-        FlowbarComponent.prototype.previous = function () {
-            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()) {
-                    var previousEnabledStep = this.findPreviousEnabledStep();
-                    this.changeActiveStep(previousEnabledStep);
-                    this.stepper.selectedIndex = this._steps.indexOf(previousEnabledStep);
-                }
-                else {
-                    var subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
-                    this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex - 1];
-                }
-            }
-        };
-        FlowbarComponent.prototype.next = function () {
-            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()) {
-                    var nextEnabledStep = this.findNextEnabledStep();
-                    this.changeActiveStep(nextEnabledStep);
-                    this.stepper.selectedIndex = this._steps.indexOf(nextEnabledStep);
-                }
-                else {
-                    var subStepIndex = this._activeStep.subSteps.indexOf(this._activeStep.activeSubStep);
-                    this._activeStep.activeSubStep = this._activeStep.subSteps[subStepIndex + 1];
-                }
-            }
-        };
-        FlowbarComponent.prototype.isPreviousAvailable = function () {
-            if (this._activeStep) {
-                if (!this.activeTabHasSubSteps() || this.isFirstSubStep()) {
-                    var index = this.getCurrentIndex();
-                    return index > 0 && this.isAnyPreviousStepEnabled(index);
-                }
-                else {
-                    return true;
-                }
-            }
-            return false;
-        };
-        FlowbarComponent.prototype.isNextAvailable = function () {
-            if (this._activeStep) {
-                if (!this.activeTabHasSubSteps() || this.isLastSubStep()) {
-                    var index = this.getCurrentIndex();
-                    return index < this._steps.length - 1 && this.isAnyFollowingStepEnabled(index);
-                }
-                else {
-                    return true;
-                }
-            }
-            return false;
-        };
-        FlowbarComponent.prototype.isLastStep = function () {
-            if (this.getCurrentIndex() === this._steps.length - 1) {
-                if (this.activeTabHasSubSteps()) {
-                    return this.isLastSubStep();
-                }
-                else {
-                    return true;
-                }
-            }
-            return false;
-        };
-        FlowbarComponent.prototype.getCurrentIndex = function () {
-            var _this = this;
-            return this._steps.findIndex(function (value) { return value === _this._activeStep; });
-        };
-        FlowbarComponent.prototype.getCurrentSubStepIndex = function () {
-            var _this = this;
-            return this._activeStep.subSteps.findIndex(function (value) { return value === _this._activeStep.activeSubStep; });
-        };
-        FlowbarComponent.prototype.triggerClick = function () {
-            var selectedStep = this._steps[this.stepper.selectedIndex];
-            this.changeActiveStep(selectedStep);
-        };
-        FlowbarComponent.prototype.headerClick = function (event, step) {
-            event.stopPropagation(); //stop processing current header click event
-            this._headerClick.emit(step);
-        };
-        FlowbarComponent.prototype.activeTabHasSubSteps = function () {
-            return this._activeStep.subSteps && this._activeStep.subSteps.length > 0;
-        };
-        FlowbarComponent.prototype.isFirstSubStep = function () {
-            return this._activeStep.activeSubStep === this._activeStep.subSteps[0];
-        };
-        FlowbarComponent.prototype.isLastSubStep = function () {
-            return this._activeStep.activeSubStep === this._activeStep.subSteps[this._activeStep.subSteps.length - 1];
-        };
-        FlowbarComponent.prototype.isAnyPreviousStepEnabled = function (index) {
-            // eslint-disable-next-line id-blacklist
-            return this._steps.slice(0, index).find(function (step) { return step.enabled; }) !== undefined;
-        };
-        FlowbarComponent.prototype.isAnyFollowingStepEnabled = function (index) {
-            // eslint-disable-next-line id-blacklist
-            return this._steps.slice(index + 1, this._steps.length).find(function (step) { return step.enabled; }) !== undefined;
-        };
-        FlowbarComponent.prototype.findPreviousEnabledStep = function () {
-            var index = this.getCurrentIndex();
-            return this._steps
-                .slice(0, index)
-                .reverse()
-                .find(function (step) { return step.enabled; });
-        };
-        FlowbarComponent.prototype.findNextEnabledStep = function () {
-            var index = this.getCurrentIndex();
-            return this._steps.slice(index + 1, this._steps.length).find(function (step) { return step.enabled; });
-        };
-        return FlowbarComponent;
-    }());
-    FlowbarComponent.decorators = [
-        { type: i0.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: i0.Input, args: ['steps',] }],
-        _activeStep: [{ type: i0.Input, args: ['activeStep',] }],
-        _activeStepChange: [{ type: i0.Output, args: ['activeStepChange',] }],
-        _headerClick: [{ type: i0.Output, args: ['headerClick',] }],
-        stepper: [{ type: i0.ViewChild, args: ['stepper',] }]
-    };
-
-    var FlowbarModule = /** @class */ (function () {
-        function FlowbarModule() {
-        }
-        return FlowbarModule;
-    }());
-    FlowbarModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [FlowbarComponent],
-                    imports: [common.CommonModule, stepper$1.MatStepperModule],
-                    exports: [FlowbarComponent],
-                },] }
-    ];
-
-    var MaterialAddonsModule = /** @class */ (function () {
-        function MaterialAddonsModule() {
-        }
-        return MaterialAddonsModule;
-    }());
-    MaterialAddonsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    exports: [
-                        ReadOnlyFormFieldModule,
-                        ButtonModule,
-                        ToolbarModule,
-                        MaterialActionButtonModule,
-                        NumericFieldModule,
-                        CardModule,
-                        QuickListModule,
-                        ThrottleClickModule,
-                    ],
-                },] }
-    ];
-
-    /*
-     * Public API Surface of material-addons
-     */
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.ButtonModule = ButtonModule;
-    exports.CardModule = CardModule;
-    exports.ContentHeaderComponent = ContentHeaderComponent;
-    exports.ContentPanelContainerComponent = ContentPanelContainerComponent;
-    exports.ContentPanelContainerContentComponent = ContentPanelContainerContentComponent;
-    exports.ContentPanelContainerFooterComponent = ContentPanelContainerFooterComponent;
-    exports.ContentPanelModule = ContentPanelModule;
-    exports.DataTableModule = DataTableModule;
-    exports.FlowbarComponent = FlowbarComponent;
-    exports.FlowbarModule = FlowbarModule;
-    exports.MainContainerComponent = MainContainerComponent;
-    exports.MaterialActionButtonComponent = MaterialActionButtonComponent;
-    exports.MaterialActionButtonModule = MaterialActionButtonModule;
-    exports.MaterialAddonsModule = MaterialAddonsModule;
-    exports.NumberFormatService = NumberFormatService;
-    exports.NumericFieldModule = NumericFieldModule;
-    exports.QuickListModule = QuickListModule;
-    exports.ReadOnlyFormFieldComponent = ReadOnlyFormFieldComponent;
-    exports.ReadOnlyFormFieldModule = ReadOnlyFormFieldModule;
-    exports.ReadOnlyFormFieldWrapperComponent = ReadOnlyFormFieldWrapperComponent;
-    exports.StepComponent = StepComponent;
-    exports.StepHeaderComponent = StepHeaderComponent;
-    exports.StepperComponent = StepperComponent;
-    exports.StepperModule = StepperModule;
-    exports.TableModule = TableModule;
-    exports.ThrottleClickDirective = ThrottleClickDirective;
-    exports.ThrottleClickModule = ThrottleClickModule;
-    exports.ToolbarComponent = ToolbarComponent;
-    exports.ToolbarModule = ToolbarModule;
-    exports.ToolbarService = ToolbarService;
-    exports.madStepperAnimations = madStepperAnimations;
-    exports.ɵb = PrimaryButtonComponent;
-    exports.ɵc = MadBasicButton;
-    exports.ɵd = OutlineButtonComponent;
-    exports.ɵe = LinkButtonComponent;
-    exports.ɵf = DangerButtonComponent;
-    exports.ɵg = IconButtonComponent;
-    exports.ɵh = NumericFieldDirective;
-    exports.ɵi = CardComponent;
-    exports.ɵj = QuickListComponent;
-    exports.ɵk = BaseQuickListComponent;
-    exports.ɵl = QuickListCompactComponent;
-    exports.ɵm = TableComponent;
-    exports.ɵn = DataTableComponent;
-    exports.ɵo = DataTableColumnsModalComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=porscheinformatik-material-addons.umd.js.map