@kms-ngx-ui/presentational 0.0.20 → 0.0.22

package/bundles/kms-ngx-ui-presentational.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/animations'), require('@angular/platform-browser'), require('rxjs'), require('@angular/material/dialog'), require('subsink'), require('@angular/google-maps'), require('@angular/material/button'), require('@angular/material/expansion'), require('@angular/material/select'), require('@angular/material/menu'), require('enum-values/src/enumValues'), require('@angular/cdk/drag-drop'), require('@ngx-translate/core'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/progress-spinner'), require('ngx-useful-swiper')) :
-    typeof define === 'function' && define.amd ? define('@kms-ngx-ui/presentational', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@angular/material/radio', '@angular/animations', '@angular/platform-browser', 'rxjs', '@angular/material/dialog', 'subsink', '@angular/google-maps', '@angular/material/button', '@angular/material/expansion', '@angular/material/select', '@angular/material/menu', 'enum-values/src/enumValues', '@angular/cdk/drag-drop', '@ngx-translate/core', '@angular/material/form-field', '@angular/material/input', '@angular/material/progress-spinner', 'ngx-useful-swiper'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["kms-ngx-ui"] = global["kms-ngx-ui"] || {}, global["kms-ngx-ui"].presentational = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global.ng.material.radio, global.ng.animations, global.ng.platformBrowser, global.rxjs, global.ng.material.dialog, global.subsink, global.ng.googleMaps, global.ng.material.button, global.ng.material.expansion, global.ng.material.select, global.ng.material.menu, global.enumValues, global.ng.cdk.dragDrop, global.core, global.ng.material.formField, global.ng.material.input, global.ng.material.progressSpinner, global.ngxUsefulSwiper));
-})(this, (function (exports, i0, common, forms, checkbox, radio, animations, platformBrowser, rxjs, dialog, subsink, googleMaps, button, expansion, select, menu, enumValues, dragDrop, core, formField, input, progressSpinner, ngxUsefulSwiper) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/material/form-field'), require('@angular/platform-browser'), require('@angular/material/input'), require('@angular/material/button'), require('@ngx-translate/core'), require('@angular/material/progress-spinner'), require('@angular/animations'), require('@angular/material/expansion'), require('rxjs'), require('@angular/google-maps'), require('@angular/material/select'), require('@angular/material/core'), require('subsink'), require('@angular/material/dialog'), require('@angular/material/menu'), require('enum-values/src/enumValues'), require('@angular/cdk/drag-drop'), require('ngx-useful-swiper')) :
+    typeof define === 'function' && define.amd ? define('@kms-ngx-ui/presentational', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@angular/material/radio', '@angular/material/form-field', '@angular/platform-browser', '@angular/material/input', '@angular/material/button', '@ngx-translate/core', '@angular/material/progress-spinner', '@angular/animations', '@angular/material/expansion', 'rxjs', '@angular/google-maps', '@angular/material/select', '@angular/material/core', 'subsink', '@angular/material/dialog', '@angular/material/menu', 'enum-values/src/enumValues', '@angular/cdk/drag-drop', 'ngx-useful-swiper'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["kms-ngx-ui"] = global["kms-ngx-ui"] || {}, global["kms-ngx-ui"].presentational = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global.ng.material.radio, global.ng.material.formField, global.ng.platformBrowser, global.ng.material.input, global.ng.material.button, global.i5$1, global.ng.material.progressSpinner, global.ng.animations, global.ng.material.expansion, global.rxjs, global.ng.googleMaps, global.ng.material.select, global.ng.material.core, global.subsink, global.ng.material.dialog, global.ng.material.menu, global.enumValues, global.ng.cdk.dragDrop, global.i2$6));
+})(this, (function (exports, i0, i2, i1, i1$1, i2$2, i2$1, i1$2, i5, i2$3, i5$1, i1$3, animations, i2$4, rxjs, i2$5, i3, i4, subsink, i1$4, i3$1, enumValues, i6, i2$6) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,19 +23,38 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2$4);
+    var i2__namespace$5 = /*#__PURE__*/_interopNamespace(i2$5);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i2__namespace$6 = /*#__PURE__*/_interopNamespace(i2$6);
 
     var KmsUiPresentationalService = /** @class */ (function () {
         function KmsUiPresentationalService() {
         }
         return KmsUiPresentationalService;
     }());
-    KmsUiPresentationalService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function KmsUiPresentationalService_Factory() { return new KmsUiPresentationalService(); }, token: KmsUiPresentationalService, providedIn: "root" });
-    KmsUiPresentationalService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    KmsUiPresentationalService.ctorParameters = function () { return []; };
+    KmsUiPresentationalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    KmsUiPresentationalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root'
+                    }]
+            }], ctorParameters: function () { return []; } });
 
     var KmsUiPresentationalComponent = /** @class */ (function () {
         function KmsUiPresentationalComponent() {
@@ -44,13 +63,16 @@
         };
         return KmsUiPresentationalComponent;
     }());
-    KmsUiPresentationalComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'lib-kms-ngx-ui-presentational',
-                    template: "\n    <p>\n      kms-ngx-ui-presentational works!\n    </p>\n  "
-                },] }
-    ];
-    KmsUiPresentationalComponent.ctorParameters = function () { return []; };
+    KmsUiPresentationalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    KmsUiPresentationalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KmsUiPresentationalComponent, selector: "lib-kms-ngx-ui-presentational", ngImport: i0__namespace, template: "\n    <p>\n      kms-ngx-ui-presentational works!\n    </p>\n  ", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-kms-ngx-ui-presentational',
+                        template: "\n    <p>\n      kms-ngx-ui-presentational works!\n    </p>\n  ",
+                        styles: []
+                    }]
+            }], ctorParameters: function () { return []; } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -85,20 +107,27 @@
         };
         return ActionsParentComponent;
     }());
-    ActionsParentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-actions',
-                    template: ''
-                },] }
-    ];
-    ActionsParentComponent.propDecorators = {
-        disabled: [{ type: i0.Input }],
-        checked: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        link: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        select: [{ type: i0.Output }]
-    };
+    ActionsParentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsParentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ActionsParentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ActionsParentComponent, selector: "kms-actions", inputs: { disabled: "disabled", checked: "checked", label: "label", link: "link", initialValue: "initialValue" }, outputs: { select: "select" }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsParentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-actions',
+                        template: '',
+                    }]
+            }], propDecorators: { disabled: [{
+                    type: i0.Input
+                }], checked: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], link: [{
+                    type: i0.Input
+                }], initialValue: [{
+                    type: i0.Input
+                }], select: [{
+                    type: i0.Output
+                }] } });
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -470,26 +499,35 @@
         };
         return CheckboxComponent;
     }(ActionsParentComponent));
-    CheckboxComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-checkbox',
-                    template: "<!-- <label class=\"wrapper ui-copy-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\r\n    <input type=\"checkbox\" \r\n           [checked]=\"checked\"\r\n           [value]=\"value\"\r\n           [name]=\"name\"\r\n           [disabled]=\"disabled\"\r\n           (change)=\"selectAction($event)\">\r\n\r\n</label> -->\r\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\r\n<span *ngIf=\"infoText && infoText.length > 0\" \r\n      class=\"\"\r\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\r\n</span>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return CheckboxComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    CheckboxComponent.ctorParameters = function () { return []; };
-    CheckboxComponent.propDecorators = {
-        infoText: [{ type: i0.Input }],
-        name: [{ type: i0.Input }],
-        select: [{ type: i0.Output }]
-    };
+    CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "kms-checkbox", inputs: { infoText: "infoText", name: "name" }, outputs: { select: "select" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return CheckboxComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<!-- <label class=\"wrapper ui-copy-text\"\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\n    <input type=\"checkbox\" \n           [checked]=\"checked\"\n           [value]=\"value\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           (change)=\"selectAction($event)\">\n\n</label> -->\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\n<span *ngIf=\"infoText && infoText.length > 0\" \n      class=\"\"\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\n</span>", styles: [""], components: [{ type: i1__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-checkbox',
+                        templateUrl: './checkbox.component.html',
+                        styleUrls: ['./checkbox.component.scss'],
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return CheckboxComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { infoText: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], select: [{
+                    type: i0.Output
+                }] } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -557,19 +595,19 @@
         };
         return FormParentComponent;
     }());
-    FormParentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-form',
-                    template: ''
-                },] }
-    ];
-    FormParentComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder }
-    ]; };
-    FormParentComponent.propDecorators = {
-        formDataChanged: [{ type: i0.Output }],
-        disabled: [{ type: i0.Input }]
-    };
+    FormParentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormParentComponent, deps: [{ token: i1__namespace$1.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FormParentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormParentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-form',
+                        template: '',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }]; }, propDecorators: { formDataChanged: [{
+                    type: i0.Output
+                }], disabled: [{
+                    type: i0.Input
+                }] } });
 
     var FormControlParentComponent = /** @class */ (function (_super) {
         __extends(FormControlParentComponent, _super);
@@ -632,21 +670,308 @@
         };
         return FormControlParentComponent;
     }(FormParentComponent));
-    FormControlParentComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-formControlParent',
-                    template: ''
-                },] }
-    ];
-    FormControlParentComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
-    FormControlParentComponent.propDecorators = {
-        defaultDataOverride: [{ type: i0.Input }],
-        onSelectItemEmitter: [{ type: i0.Output }],
-        child: [{ type: i0.ViewChild, args: ['child',] }]
-    };
+    FormControlParentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlParentComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FormControlParentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormControlParentComponent, selector: "kms-formControlParent", inputs: { defaultDataOverride: "defaultDataOverride" }, outputs: { onSelectItemEmitter: "onSelectItemEmitter" }, viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlParentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-formControlParent',
+                        template: '',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { defaultDataOverride: [{
+                    type: i0.Input
+                }], onSelectItemEmitter: [{
+                    type: i0.Output
+                }], child: [{
+                    type: i0.ViewChild,
+                    args: ['child']
+                }] } });
+
+    /**
+     * Attached File DTO
+     */
+    var AttachedFileDTO = /** @class */ (function () {
+        function AttachedFileDTO() {
+        }
+        return AttachedFileDTO;
+    }());
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    exports.IconSize = void 0;
+    (function (IconSize) {
+        IconSize["FULLSIZE"] = "size-full";
+        IconSize["TINY"] = "size-16";
+        IconSize["SMALLER"] = "size-20";
+        IconSize["SMALL"] = "size-32";
+        IconSize["MEDIUM"] = "size-64";
+        IconSize["LARGE"] = "size-128";
+        IconSize["XL"] = "size-256";
+        IconSize["XXL"] = "size-512";
+        IconSize["XXXL"] = "size-1024";
+        IconSize["NONE"] = "NONE";
+    })(exports.IconSize || (exports.IconSize = {}));
+
+    /**
+     * @copyright FLYACTS GmbH 2019
+     */
+    /**
+     * Check if null or undefined
+     * @param value value that is being checked
+     */
+    function isValue(value) {
+        if (value === null) {
+            return false;
+        }
+        if (typeof value === 'undefined') {
+            return false;
+        }
+        return true;
+    }
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var IconSize;
+    (function (IconSize) {
+        IconSize["FULLSIZE"] = "size-full";
+        IconSize["TINY"] = "size-16";
+        IconSize["SMALLER"] = "size-20";
+        IconSize["SMALL"] = "size-32";
+        IconSize["MEDIUM"] = "size-64";
+        IconSize["LARGE"] = "size-128";
+        IconSize["XL"] = "size-256";
+        IconSize["XXL"] = "size-512";
+        IconSize["XXXL"] = "size-1024";
+        IconSize["NONE"] = "NONE";
+    })(IconSize || (IconSize = {}));
+
+    /**
+     * @copyright KMS GmbH
+     */
+    var IconComponent = /** @class */ (function () {
+        function IconComponent(sanitizer) {
+            this.sanitizer = sanitizer;
+            /**
+             * Optional: Different size via CSS inline style.
+             */
+            this.iconSize = IconSize.FULLSIZE;
+            /**
+             * Dont use icon sprite
+             */
+            this.dontUseSprite = false;
+            this.IconSize = IconSize;
+            this.Version = i0.VERSION.full;
+            this.timestamp = 0;
+            this.iconToShow = this.icon;
+        }
+        IconComponent.prototype.ngOnInit = function () {
+            this.iconToShow = this.icon;
+            var d = new Date();
+            var n = d.getTime();
+            this.timestamp = n;
+        };
+        return IconComponent;
+    }());
+    IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", dontUseSprite: "dontUseSprite" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-icon',
+                        templateUrl: './icon.component.html',
+                        styleUrls: ['./icon.component.scss'],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; }, propDecorators: { icon: [{
+                    type: i0.Input
+                }], iconClass: [{
+                    type: i0.Input
+                }], iconStyle: [{
+                    type: i0.Input
+                }], iconSize: [{
+                    type: i0.Input
+                }], dontUseSprite: [{
+                    type: i0.Input
+                }] } });
+
+    var TooltipDirective = /** @class */ (function () {
+        function TooltipDirective(el, renderer) {
+            this.el = el;
+            this.renderer = renderer;
+            this.tooltipTitle = "";
+            this.tooltipText = "";
+            this.tooltipLinkText = "";
+            this.tooltipLinkUrl = "";
+            this.tooltipPlacement = "bottom";
+            this.tooltipDelay = 1000;
+            this.tooltipPlaceIntoHost = false;
+            this.tooltipOnlyonclick = false;
+            this.offset = 0;
+        }
+        TooltipDirective.prototype.onMouseEnter = function () {
+            if (!this.tooltipOnlyonclick) {
+                this.show();
+            }
+        };
+        TooltipDirective.prototype.onClick = function () {
+            if (this.tooltipOnlyonclick) {
+                this.show();
+            }
+        };
+        TooltipDirective.prototype.onMouseLeave = function () {
+            if (this.tooltipElem) {
+                this.hide();
+            }
+        };
+        TooltipDirective.prototype.show = function () {
+            if (!this.tooltipElem) {
+                this.create();
+                this.setPosition();
+            }
+            this.renderer.addClass(this.tooltipElem, 'tooltip-show');
+        };
+        TooltipDirective.prototype.hide = function () {
+            this.renderer.removeClass(this.tooltipElem, 'tooltip-show');
+            window.setTimeout(function () {
+            }, this.tooltipDelay);
+        };
+        TooltipDirective.prototype.create = function () {
+            this.tooltipElem = this.renderer.createElement('kms-tooltip-element');
+            this.tooltipTitleElem = this.renderer.createElement('b');
+            this.renderer.appendChild(this.tooltipTitleElem, this.renderer.createText(this.tooltipTitle));
+            this.renderer.appendChild(this.tooltipElem, this.tooltipTitleElem);
+            this.tooltipTextElem = this.renderer.createElement('div');
+            this.renderer.appendChild(this.tooltipTextElem, this.renderer.createText(this.tooltipText));
+            this.renderer.appendChild(this.tooltipElem, this.tooltipTextElem);
+            this.tooltipLinkElem = this.renderer.createElement('a');
+            this.renderer.setAttribute(this.tooltipLinkElem, 'href', this.tooltipLinkUrl);
+            this.renderer.appendChild(this.tooltipLinkElem, this.renderer.createText(this.tooltipLinkText));
+            this.renderer.appendChild(this.tooltipElem, this.tooltipLinkElem);
+            if (this.tooltipPlaceIntoHost) {
+                this.renderer.appendChild(this.el.nativeElement, this.tooltipElem);
+            }
+            else {
+                this.renderer.appendChild(document.body, this.tooltipElem);
+            }
+            this.renderer.addClass(this.tooltipElem, 'tooltip');
+            this.renderer.addClass(this.tooltipElem, "tooltip-" + this.tooltipPlacement);
+            this.renderer.setStyle(this.tooltipElem, '-webkit-transition', "opacity " + this.tooltipDelay + "ms");
+            this.renderer.setStyle(this.tooltipElem, '-moz-transition', "opacity " + this.tooltipDelay + "ms");
+            this.renderer.setStyle(this.tooltipElem, '-o-transition', "opacity " + this.tooltipDelay + "ms");
+            this.renderer.setStyle(this.tooltipElem, 'transition', "opacity " + this.tooltipDelay + "ms");
+        };
+        TooltipDirective.prototype.setPosition = function () {
+            if (this.tooltipElem) {
+                var hostPos = this.el.nativeElement.getBoundingClientRect();
+                var tooltipPos = this.tooltipElem.getBoundingClientRect();
+                var top = void 0, left = void 0;
+                if (this.tooltipPlaceIntoHost) {
+                    left = 0;
+                    top = hostPos.height;
+                }
+                else {
+                    var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+                    if (this.tooltipPlacement === 'top') {
+                        top = hostPos.top - tooltipPos.height - this.offset;
+                        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                    }
+                    if (!this.tooltipPlacement || this.tooltipPlacement === 'bottom') {
+                        top = hostPos.bottom + this.offset;
+                        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+                    }
+                    if (this.tooltipPlacement === 'left') {
+                        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                        left = hostPos.left - tooltipPos.width - this.offset;
+                    }
+                    if (this.tooltipPlacement === 'right') {
+                        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+                        left = hostPos.right + this.offset;
+                    }
+                    top += scrollPos;
+                }
+                this.renderer.setStyle(this.tooltipElem, 'top', top + "px");
+                this.renderer.setStyle(this.tooltipElem, 'left', left + "px");
+            }
+        };
+        return TooltipDirective;
+    }());
+    TooltipDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TooltipDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TooltipDirective, selector: "[kmsTooltip]", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", tooltipPlacement: "tooltipPlacement", tooltipDelay: "tooltipDelay", tooltipPlaceIntoHost: "tooltipPlaceIntoHost", tooltipOnlyonclick: "tooltipOnlyonclick" }, host: { listeners: { "mouseenter": "onMouseEnter()", "click": "onClick()", "mouseleave": "onMouseLeave()" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[kmsTooltip]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { tooltipTitle: [{
+                    type: i0.Input,
+                    args: ['tooltipTitle']
+                }], tooltipText: [{
+                    type: i0.Input,
+                    args: ['tooltipText']
+                }], tooltipLinkText: [{
+                    type: i0.Input,
+                    args: ['tooltipLinkText']
+                }], tooltipLinkUrl: [{
+                    type: i0.Input,
+                    args: ['tooltipLinkUrl']
+                }], tooltipPlacement: [{
+                    type: i0.Input,
+                    args: ['tooltipPlacement']
+                }], tooltipDelay: [{
+                    type: i0.Input,
+                    args: ['tooltipDelay']
+                }], tooltipPlaceIntoHost: [{
+                    type: i0.Input,
+                    args: ['tooltipPlaceIntoHost']
+                }], tooltipOnlyonclick: [{
+                    type: i0.Input,
+                    args: ['tooltipOnlyonclick']
+                }], onMouseEnter: [{
+                    type: i0.HostListener,
+                    args: ['mouseenter']
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['click']
+                }], onMouseLeave: [{
+                    type: i0.HostListener,
+                    args: ['mouseleave']
+                }] } });
+
+    var TooltipIconComponent = /** @class */ (function () {
+        function TooltipIconComponent() {
+            this.tooltipTitle = "";
+            this.tooltipText = "";
+            this.tooltipLinkText = "";
+            this.tooltipLinkUrl = "";
+            this.placement = "";
+            this.delay = 1000;
+            this.IconSize = exports.IconSize;
+        }
+        return TooltipIconComponent;
+    }());
+    TooltipIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipIconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TooltipIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0__namespace, template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipIconComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-tooltip-icon',
+                        templateUrl: './tooltip-icon.component.html',
+                        styleUrls: ['./tooltip-icon.component.scss']
+                    }]
+            }], propDecorators: { tooltipTitle: [{
+                    type: i0.Input
+                }], tooltipText: [{
+                    type: i0.Input
+                }], tooltipLinkText: [{
+                    type: i0.Input
+                }], tooltipLinkUrl: [{
+                    type: i0.Input
+                }], placement: [{
+                    type: i0.Input
+                }], delay: [{
+                    type: i0.Input
+                }] } });
 
     var ColorInputComponent = /** @class */ (function (_super) {
         __extends(ColorInputComponent, _super);
@@ -694,29 +1019,35 @@
         };
         return ColorInputComponent;
     }(FormControlParentComponent));
-    ColorInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-color-input',
-                    template: "\r\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\r\n    <div>\r\n        <mat-form-field class=\"colorInput\">\r\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\r\n            <mat-label>{{ label }}</mat-label>\r\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\r\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\r\n        </mat-form-field>\r\n    </div>\r\n</form>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return ColorInputComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    ColorInputComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
-    ColorInputComponent.propDecorators = {
-        label: [{ type: i0.Input }],
-        tooltipText: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }]
-    };
+    ColorInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColorInputComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ColorInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorInputComponent, selector: "kms-color-input", inputs: { label: "label", tooltipText: "tooltipText", placeholder: "placeholder" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return ColorInputComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "\r\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\r\n    <div>\r\n        <mat-form-field class=\"colorInput\">\r\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\r\n            <mat-label>{{ label }}</mat-label>\r\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\r\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\r\n        </mat-form-field>\r\n    </div>\r\n</form>", styles: [""], components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "placement", "delay"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.MatLabel, selector: "mat-label" }, { type: i5__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColorInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-color-input',
+                        templateUrl: './color-input.component.html',
+                        styleUrls: ['./color-input.component.scss'],
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return ColorInputComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { label: [{
+                    type: i0.Input
+                }], tooltipText: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }] } });
 
     var RadioButtonComponent = /** @class */ (function (_super) {
         __extends(RadioButtonComponent, _super);
@@ -764,26 +1095,35 @@
         };
         return RadioButtonComponent;
     }(ActionsParentComponent));
-    RadioButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-radiobutton',
-                    template: "<label class=\"wrapper ui-small-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">\r\n    <input type=\"radio\"\r\n           [name]=\"name\"\r\n           [value]=\"value\"\r\n           [checked]=\"checked\"\r\n           [disabled]=\"disabled\"\r\n           [id]=\"id\"\r\n           (change)=\"selectAction($event)\">{{label}}\r\n\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true,\r\n                'size-16': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_active'\"\r\n        >\r\n    </kms-icon>\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"!checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true,\r\n                'size-16': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_inactive'\"\r\n        >\r\n    </kms-icon>\r\n    <ng-content></ng-content>\r\n</label>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return RadioButtonComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    RadioButtonComponent.ctorParameters = function () { return []; };
-    RadioButtonComponent.propDecorators = {
-        name: [{ type: i0.Input }],
-        id: [{ type: i0.Input }],
-        formControl: [{ type: i0.Input }]
-    };
+    RadioButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RadioButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", formControl: "formControl" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return RadioButtonComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<label class=\"wrapper ui-small-text\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-radiobutton',
+                        templateUrl: './radiobutton.component.html',
+                        styleUrls: ['./radiobutton.component.scss'],
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return RadioButtonComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], formControl: [{
+                    type: i0.Input
+                }] } });
 
     var TimeInputComponent = /** @class */ (function () {
         function TimeInputComponent(formBuilder) {
@@ -851,23 +1191,29 @@
         };
         return TimeInputComponent;
     }());
-    TimeInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-time-input',
-                    template: "<form [formGroup]=\"form\" class=\"timeInput\">\r\n    <input type=\"text\" formControlName=\"h\" [value]=\"h\" maxlength=\"2\" pattern=\"(0?[0-9]|1[0-9]|2[0-3])\"/>\r\n    <span>:</span>\r\n    <input type=\"text\" formControlName=\"m\" [value]=\"m\" maxlength=\"2\" pattern=\"(0?[0-9]|[1-5][0-9])\"/>\r\n</form>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return TimeInputComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    TimeInputComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder }
-    ]; };
+    TimeInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimeInputComponent, deps: [{ token: i1__namespace$1.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TimeInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeInputComponent, selector: "kms-time-input", providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return TimeInputComponent; }),
+                multi: true,
+            },
+        ], ngImport: i0__namespace, template: "<form [formGroup]=\"form\" class=\"timeInput\">\r\n    <input type=\"text\" formControlName=\"h\" [value]=\"h\" maxlength=\"2\" pattern=\"(0?[0-9]|1[0-9]|2[0-3])\"/>\r\n    <span>:</span>\r\n    <input type=\"text\" formControlName=\"m\" [value]=\"m\" maxlength=\"2\" pattern=\"(0?[0-9]|[1-5][0-9])\"/>\r\n</form>", styles: [""], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1__namespace$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimeInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-time-input',
+                        templateUrl: './time-input.component.html',
+                        styleUrls: ['./time-input.component.scss'],
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return TimeInputComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }]; } });
 
     var YesNoRadiogroupComponent = /** @class */ (function () {
         function YesNoRadiogroupComponent(formBuilder, renderer) {
@@ -922,64 +1268,39 @@
         };
         return YesNoRadiogroupComponent;
     }());
-    YesNoRadiogroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-yesno-radiogroup',
-                    template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\r\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return YesNoRadiogroupComponent; }),
-                            multi: true,
-                        },
-                    ]
-                },] }
-    ];
-    YesNoRadiogroupComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
-    YesNoRadiogroupComponent.propDecorators = {
-        header: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        textYes: [{ type: i0.Input }],
-        textNo: [{ type: i0.Input }],
-        child: [{ type: i0.ViewChild, args: ['child',] }]
-    };
-
-    /*!
-     * @copyright FLYACTS GmbH 2019
-     */
-    exports.IconSize = void 0;
-    (function (IconSize) {
-        IconSize["FULLSIZE"] = "size-full";
-        IconSize["TINY"] = "size-16";
-        IconSize["SMALLER"] = "size-20";
-        IconSize["SMALL"] = "size-32";
-        IconSize["MEDIUM"] = "size-64";
-        IconSize["LARGE"] = "size-128";
-        IconSize["XL"] = "size-256";
-        IconSize["XXL"] = "size-512";
-        IconSize["XXXL"] = "size-1024";
-        IconSize["NONE"] = "NONE";
-    })(exports.IconSize || (exports.IconSize = {}));
-
-    /**
-     * @copyright FLYACTS GmbH 2019
-     */
-    /**
-     * Check if null or undefined
-     * @param value value that is being checked
-     */
-    function isValue(value) {
-        if (value === null) {
-            return false;
-        }
-        if (typeof value === 'undefined') {
-            return false;
-        }
-        return true;
-    }
+    YesNoRadiogroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: YesNoRadiogroupComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    YesNoRadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: YesNoRadiogroupComponent, selector: "kms-yesno-radiogroup", inputs: { header: "header", disabled: "disabled", textYes: "textYes", textNo: "textNo" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return YesNoRadiogroupComponent; }),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\n    </mat-radio-group>\n</form>\n", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: YesNoRadiogroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-yesno-radiogroup',
+                        templateUrl: './yes-no-radiogroup.component.html',
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return YesNoRadiogroupComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { header: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], textYes: [{
+                    type: i0.Input
+                }], textNo: [{
+                    type: i0.Input
+                }], child: [{
+                    type: i0.ViewChild,
+                    args: ['child']
+                }] } });
 
     // Max size in bytes of uploaded image
     var MAX_SIZE_BYTES = 2097152;
@@ -1007,11 +1328,11 @@
             this.resizePixels = 0;
             this.acceptedFileMimetypes = 'image/jpeg, image/jpg, image/png';
             this.form = this.formBuilder.group({
-                ImageIdent: new forms.FormControl(''),
-                ImageLink: new forms.FormControl(''),
-                Filename: new forms.FormControl(''),
-                ImageAsDataURL: new forms.FormControl(''),
-                Text: new forms.FormControl(''),
+                ImageIdent: new i1.FormControl(''),
+                ImageLink: new i1.FormControl(''),
+                Filename: new i1.FormControl(''),
+                ImageAsDataURL: new i1.FormControl(''),
+                Text: new i1.FormControl(''),
             });
             this.subscriptions = [];
             this.newImageLoading = false;
@@ -1160,42 +1481,58 @@
         };
         return FileInputComponent;
     }());
-    FileInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-file-input',
-                    template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \r\n\r\n    <div *ngIf=\"form.value.Filename && previewImage\">\r\n        <div *ngIf=\"newImageLoading\">\r\n            {{ 'file-input.loading' | translate }}\r\n        </div>\r\n        <div *ngIf=\"!newImageLoading\">\r\n            <div class=\"\">\r\n                <div class=\"\">\r\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\r\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\r\n                </div>\r\n                <div class=\"\">{{form.value.Filename}}</div>\r\n                <div class=\"\">\r\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\r\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \r\n                        {{ 'file-input.remove' }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!previewImage\">\r\n        <div class=\"\">{{form.value.Filename}}</div>\r\n    </div>\r\n\r\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\r\n        <span>{{ label }}</span>\r\n    </button>\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"acceptedFileMimetypes\"\r\n        style=\"display: none\"\r\n        #fileInput\r\n        (click)=\"clearInputValue($event)\"\r\n        (change)=\"selectImage($event)\"\r\n    />\r\n\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\r\n\r\n</form>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return FileInputComponent; }),
-                            multi: true,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            useExisting: i0.forwardRef(function () { return FileInputComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    FileInputComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.ApplicationRef },
-        { type: i0.ChangeDetectorRef },
-        { type: i0.Renderer2 }
-    ]; };
-    FileInputComponent.propDecorators = {
-        fileInput: [{ type: i0.ViewChild, args: ['fileInput',] }],
-        label: [{ type: i0.Input }],
-        previewImage: [{ type: i0.Input }],
-        allowRemove: [{ type: i0.Input }],
-        previewImageText: [{ type: i0.Input }],
-        maxSizeBytes: [{ type: i0.Input }],
-        resizePixels: [{ type: i0.Input }],
-        acceptedFileMimetypes: [{ type: i0.Input }],
-        formDataChanged: [{ type: i0.Output }]
-    };
+    FileInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileInputComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FileInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileInputComponent, selector: "kms-file-input", inputs: { label: "label", previewImage: "previewImage", allowRemove: "allowRemove", previewImageText: "previewImageText", maxSizeBytes: "maxSizeBytes", resizePixels: "resizePixels", acceptedFileMimetypes: "acceptedFileMimetypes" }, outputs: { formDataChanged: "formDataChanged" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return FileInputComponent; }),
+                multi: true,
+            },
+            {
+                provide: i1.NG_VALIDATORS,
+                useExisting: i0.forwardRef(function () { return FileInputComponent; }),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-file-input',
+                        templateUrl: './file-input.component.html',
+                        styleUrls: ['./file-input.component.scss'],
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return FileInputComponent; }),
+                                multi: true,
+                            },
+                            {
+                                provide: i1.NG_VALIDATORS,
+                                useExisting: i0.forwardRef(function () { return FileInputComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { fileInput: [{
+                    type: i0.ViewChild,
+                    args: ['fileInput']
+                }], label: [{
+                    type: i0.Input
+                }], previewImage: [{
+                    type: i0.Input
+                }], allowRemove: [{
+                    type: i0.Input
+                }], previewImageText: [{
+                    type: i0.Input
+                }], maxSizeBytes: [{
+                    type: i0.Input
+                }], resizePixels: [{
+                    type: i0.Input
+                }], acceptedFileMimetypes: [{
+                    type: i0.Input
+                }], formDataChanged: [{
+                    type: i0.Output
+                }] } });
 
     var LoaderComponent = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1206,33 +1543,127 @@
         LoaderComponent.prototype.ngOnInit = function () { };
         return LoaderComponent;
     }());
-    LoaderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-loader',
-                    template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\r\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\r\n</div>\r\n",
-                    styles: [""]
-                },] }
-    ];
-    LoaderComponent.ctorParameters = function () { return []; };
-    LoaderComponent.propDecorators = {
-        loading: [{ type: i0.Input }]
-    };
+    LoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0__namespace, template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n", styles: [""], components: [{ type: i1__namespace$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LoaderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-loader',
+                        templateUrl: './loader.component.html',
+                        styleUrls: ['./loader.component.scss'],
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { loading: [{
+                    type: i0.Input
+                }] } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
      */
-    var FlyoutComponent = /** @class */ (function () {
-        function FlyoutComponent() {
-            this.icon = 'filter';
-            this.isDropdownOpened = false;
-            this.targetHeight = '0';
-            this.animationTime = 5000;
-            this.headerCssClass = '';
-            this.bodyCssClass = '';
-            this.headerTitle = '';
-            this.headerText = '';
-            this.hasButtonForMore = false;
-            this.moreText = '';
+    /**
+     * Directive to calc the height of all inner elements
+     */
+    var GetMaxHeightDirective = /** @class */ (function () {
+        function GetMaxHeightDirective(el) {
+            this.el = el;
+            /**
+             * CSS class name of the child items (markup elements) that should be checked for their height.
+             * This is mandatory.
+             */
+            this.cssClassName = '';
+            /**
+             * Event that will pass the height of the tallest child inside the container.
+             * Useful to calculate the target height of containers with different content (like accordion) for animations.
+             */
+            this.maxHeightChanged = new i0.EventEmitter();
+            /**
+             * Event that will pass the complete sum of all height values from each child.
+             * Useful to calculate the full target height of a container (like dropdown) for animations.
+             */
+            this.sumOfHeight = new i0.EventEmitter();
+        }
+        GetMaxHeightDirective.prototype.ngAfterContentChecked = function () {
+            this.checkHeightOfChildren(this.el.nativeElement, this.cssClassName);
+        };
+        GetMaxHeightDirective.prototype.checkHeightOfChildren = function (parent, cssClassName) {
+            if (!parent) {
+                return;
+            }
+            // find all the child elements with the selected class name
+            var children = parent.getElementsByClassName(cssClassName);
+            // failsafe
+            if (!children) {
+                return;
+            }
+            // get all the child elements heights
+            var itemHeights = Array.from(children).map(function (x) { return x.getBoundingClientRect().height; });
+            // failsafe
+            if (itemHeights.length === 0) {
+                return;
+            }
+            // find out the tallest element
+            var maxHeight = itemHeights.reduce(function (prev, curr) {
+                return curr > prev ? curr : prev;
+            }, 0);
+            // get sum of heights
+            var sumOfHeight = itemHeights.reduce(function (pv, cv) { return pv + cv; }, 0);
+            // inform
+            this.maxHeightChanged.emit(maxHeight);
+            this.sumOfHeight.emit(sumOfHeight);
+        };
+        return GetMaxHeightDirective;
+    }());
+    GetMaxHeightDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: GetMaxHeightDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    GetMaxHeightDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: { cssClassName: ["getMaxHeight", "cssClassName"] }, outputs: { maxHeightChanged: "maxHeightChanged", sumOfHeight: "sumOfHeight" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: GetMaxHeightDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[getMaxHeight]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { cssClassName: [{
+                    type: i0.Input,
+                    args: ['getMaxHeight']
+                }], maxHeightChanged: [{
+                    type: i0.Output
+                }], sumOfHeight: [{
+                    type: i0.Output
+                }] } });
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var SafeHtmlPipe = /** @class */ (function () {
+        function SafeHtmlPipe(sanitizer) {
+            this.sanitizer = sanitizer;
+        }
+        SafeHtmlPipe.prototype.transform = function (html) {
+            return this.sanitizer.bypassSecurityTrustHtml(html);
+        };
+        return SafeHtmlPipe;
+    }());
+    SafeHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeHtmlPipe, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeHtmlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeHtmlPipe, name: "kmsSafeHtml" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeHtmlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsSafeHtml',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; } });
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var FlyoutComponent = /** @class */ (function () {
+        function FlyoutComponent() {
+            this.icon = 'filter';
+            this.isDropdownOpened = false;
+            this.targetHeight = '0';
+            this.animationTime = 5000;
+            this.headerCssClass = '';
+            this.bodyCssClass = '';
+            this.headerTitle = '';
+            this.headerText = '';
+            this.hasButtonForMore = false;
+            this.moreText = '';
             this.lessText = '';
         }
         /**
@@ -1258,52 +1689,84 @@
         };
         return FlyoutComponent;
     }());
-    FlyoutComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-flyout',
-                    template: "<div class=\"flyout\"\r\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\r\n>\r\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\r\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\r\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\r\n\r\n        <ng-content select=\"[header]\"></ng-content>\r\n\r\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\r\n            <span *ngIf=\"!isDropdownOpened\">\r\n                {{ moreText }}\r\n            </span>\r\n            <span *ngIf=\"isDropdownOpened\">\r\n                {{ lessText }}\r\n            </span>\r\n            <kms-icon [icon]=\"'chevron-down'\"\r\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\r\n            </kms-icon>\r\n        </div>\r\n    </div>\r\n    <div \r\n        class=\"flyout-body\"\r\n        [ngClass]=\"bodyCssClass\"\r\n        tabindex=\"0\"\r\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\r\n        getMaxHeight=\"inner\"\r\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\r\n        #flyoutHeader>\r\n        <div class=\"inner\" #content>\r\n            <ng-content ></ng-content>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n",
-                    animations: [
-                        animations.trigger('dropdownAnimation', [
-                            animations.state('true', animations.style({
-                                height: '{{targetHeight}}',
-                                transition: 'height {{animationTime}}ms ease-in-out',
-                            }), {
-                                params: {
-                                    targetHeight: '300px',
-                                    animationTime: 3000,
-                                },
-                            }),
-                            animations.state('false', animations.style({
-                                height: 0,
-                                transition: 'height {{animationTime}}ms ease-in-out',
-                            }), {
-                                params: {
-                                    targetHeight: '300px',
-                                    opacity: 0,
-                                    animationTime: 3000,
-                                },
-                            }),
-                        ]),
-                    ],
-                    styles: [""]
-                },] }
-    ];
-    FlyoutComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
-        headerCssClass: [{ type: i0.Input }],
-        bodyCssClass: [{ type: i0.Input }],
-        headerTitle: [{ type: i0.Input }],
-        headerText: [{ type: i0.Input }],
-        hasButtonForMore: [{ type: i0.Input }],
-        moreText: [{ type: i0.Input }],
-        lessText: [{ type: i0.Input }],
-        content: [{ type: i0.ViewChild, args: ['content',] }],
-        flyoutHeader: [{ type: i0.ViewChild, args: ['flyoutHeader',] }]
-    };
+    FlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FlyoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"flyout\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\"\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }], pipes: { "kmsSafeHtml": SafeHtmlPipe }, animations: [
+            animations.trigger('dropdownAnimation', [
+                animations.state('true', animations.style({
+                    height: '{{targetHeight}}',
+                    transition: 'height {{animationTime}}ms ease-in-out',
+                }), {
+                    params: {
+                        targetHeight: '300px',
+                        animationTime: 3000,
+                    },
+                }),
+                animations.state('false', animations.style({
+                    height: 0,
+                    transition: 'height {{animationTime}}ms ease-in-out',
+                }), {
+                    params: {
+                        targetHeight: '300px',
+                        opacity: 0,
+                        animationTime: 3000,
+                    },
+                }),
+            ]),
+        ] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FlyoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-flyout',
+                        templateUrl: './flyout.component.html',
+                        styleUrls: ['./flyout.component.scss'],
+                        animations: [
+                            animations.trigger('dropdownAnimation', [
+                                animations.state('true', animations.style({
+                                    height: '{{targetHeight}}',
+                                    transition: 'height {{animationTime}}ms ease-in-out',
+                                }), {
+                                    params: {
+                                        targetHeight: '300px',
+                                        animationTime: 3000,
+                                    },
+                                }),
+                                animations.state('false', animations.style({
+                                    height: 0,
+                                    transition: 'height {{animationTime}}ms ease-in-out',
+                                }), {
+                                    params: {
+                                        targetHeight: '300px',
+                                        opacity: 0,
+                                        animationTime: 3000,
+                                    },
+                                }),
+                            ]),
+                        ],
+                    }]
+            }], propDecorators: { icon: [{
+                    type: i0.Input
+                }], headerCssClass: [{
+                    type: i0.Input
+                }], bodyCssClass: [{
+                    type: i0.Input
+                }], headerTitle: [{
+                    type: i0.Input
+                }], headerText: [{
+                    type: i0.Input
+                }], hasButtonForMore: [{
+                    type: i0.Input
+                }], moreText: [{
+                    type: i0.Input
+                }], lessText: [{
+                    type: i0.Input
+                }], content: [{
+                    type: i0.ViewChild,
+                    args: ['content']
+                }], flyoutHeader: [{
+                    type: i0.ViewChild,
+                    args: ['flyoutHeader']
+                }] } });
 
-    /**
-     * @copyright KMS GmbH
-     */
     var IntegerCurrency = /** @class */ (function () {
         function IntegerCurrency(cp) {
             this.cp = cp;
@@ -1320,14 +1783,14 @@
         };
         return IntegerCurrency;
     }());
-    IntegerCurrency.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsIntegerCurrency',
-                },] }
-    ];
-    IntegerCurrency.ctorParameters = function () { return [
-        { type: common.CurrencyPipe }
-    ]; };
+    IntegerCurrency.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IntegerCurrency, deps: [{ token: i2__namespace.CurrencyPipe }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    IntegerCurrency.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IntegerCurrency, name: "kmsIntegerCurrency" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IntegerCurrency, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsIntegerCurrency',
+                    }]
+            }], ctorParameters: function () { return [{ type: i2__namespace.CurrencyPipe }]; } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -1340,11 +1803,14 @@
         };
         return DecodeUriPipe;
     }());
-    DecodeUriPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsDecodeUri',
-                },] }
-    ];
+    DecodeUriPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DecodeUriPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    DecodeUriPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DecodeUriPipe, name: "kmsDecodeUri" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DecodeUriPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsDecodeUri',
+                    }]
+            }] });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -1357,32 +1823,14 @@
         };
         return EncodeUriPipe;
     }());
-    EncodeUriPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsEncodeUri',
-                },] }
-    ];
-
-    /*!
-     * @copyright FLYACTS GmbH 2019
-     */
-    var SafeHtmlPipe = /** @class */ (function () {
-        function SafeHtmlPipe(sanitizer) {
-            this.sanitizer = sanitizer;
-        }
-        SafeHtmlPipe.prototype.transform = function (html) {
-            return this.sanitizer.bypassSecurityTrustHtml(html);
-        };
-        return SafeHtmlPipe;
-    }());
-    SafeHtmlPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsSafeHtml',
-                },] }
-    ];
-    SafeHtmlPipe.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
+    EncodeUriPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EncodeUriPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    EncodeUriPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EncodeUriPipe, name: "kmsEncodeUri" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EncodeUriPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsEncodeUri',
+                    }]
+            }] });
 
     /**
      * @copyright KMS GmbH
@@ -1396,14 +1844,14 @@
         };
         return SafeStylePipe;
     }());
-    SafeStylePipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsSafeStyle',
-                },] }
-    ];
-    SafeStylePipe.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
+    SafeStylePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeStylePipe, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeStylePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeStylePipe, name: "kmsSafeStyle" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeStylePipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsSafeStyle',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; } });
 
     /**
      * @copyright KMS GmbH
@@ -1417,14 +1865,14 @@
         };
         return SafeUrlPipe;
     }());
-    SafeUrlPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsSafeSUrl',
-                },] }
-    ];
-    SafeUrlPipe.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
+    SafeUrlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeUrlPipe, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeUrlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeUrlPipe, name: "kmsSafeSUrl" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeUrlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsSafeSUrl',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; } });
 
     /**
      * @copyright KMS GmbH
@@ -1438,14 +1886,14 @@
         };
         return SafeResourceUrlPipe;
     }());
-    SafeResourceUrlPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsSafeResourceSUrl',
-                },] }
-    ];
-    SafeResourceUrlPipe.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
+    SafeResourceUrlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeResourceUrlPipe, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SafeResourceUrlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeResourceUrlPipe, name: "kmsSafeResourceSUrl" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SafeResourceUrlPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsSafeResourceSUrl',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; } });
 
     var TypeofPipe = /** @class */ (function () {
         function TypeofPipe() {
@@ -1455,11 +1903,14 @@
         };
         return TypeofPipe;
     }());
-    TypeofPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsTypeOf',
-                },] }
-    ];
+    TypeofPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TypeofPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TypeofPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TypeofPipe, name: "kmsTypeOf" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TypeofPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsTypeOf',
+                    }]
+            }] });
 
     /**
      * @copyright KMS GmbH
@@ -1475,9 +1926,12 @@
         };
         return TrimPipe;
     }());
-    TrimPipe.decorators = [
-        { type: i0.Pipe, args: [{ name: 'kmsTrim' },] }
-    ];
+    TrimPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TrimPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TrimPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TrimPipe, name: "kmsTrim" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TrimPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: 'kmsTrim' }]
+            }] });
 
     /**
      * @copyright KMS GmbH
@@ -1493,12 +1947,15 @@
         };
         return ToNumberPipe;
     }());
-    ToNumberPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'kmsToNumber',
-                    pure: false
-                },] }
-    ];
+    ToNumberPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ToNumberPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ToNumberPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ToNumberPipe, name: "kmsToNumber", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ToNumberPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'kmsToNumber',
+                        pure: false
+                    }]
+            }] });
 
     /**
      * @copyright KMS GmbH
@@ -1508,98 +1965,58 @@
         }
         return CustomPipesModule;
     }());
-    CustomPipesModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        IntegerCurrency,
-                        SafeHtmlPipe,
-                        SafeStylePipe,
-                        SafeResourceUrlPipe,
-                        SafeUrlPipe,
-                        EncodeUriPipe,
-                        DecodeUriPipe,
-                        TypeofPipe,
-                        TrimPipe,
-                        ToNumberPipe,
-                    ],
-                    imports: [common.CommonModule],
-                    exports: [
-                        IntegerCurrency,
-                        SafeHtmlPipe,
-                        SafeStylePipe,
-                        SafeResourceUrlPipe,
-                        SafeUrlPipe,
-                        EncodeUriPipe,
-                        DecodeUriPipe,
-                        TypeofPipe,
-                        TrimPipe,
-                        ToNumberPipe,
-                    ],
-                    providers: [common.CurrencyPipe],
-                },] }
-    ];
-
-    /*!
-     * @copyright FLYACTS GmbH 2019
-     */
-    var IconSize;
-    (function (IconSize) {
-        IconSize["FULLSIZE"] = "size-full";
-        IconSize["TINY"] = "size-16";
-        IconSize["SMALLER"] = "size-20";
-        IconSize["SMALL"] = "size-32";
-        IconSize["MEDIUM"] = "size-64";
-        IconSize["LARGE"] = "size-128";
-        IconSize["XL"] = "size-256";
-        IconSize["XXL"] = "size-512";
-        IconSize["XXXL"] = "size-1024";
-        IconSize["NONE"] = "NONE";
-    })(IconSize || (IconSize = {}));
-
-    /**
-     * @copyright KMS GmbH
-     */
-    var IconComponent = /** @class */ (function () {
-        function IconComponent(sanitizer) {
-            this.sanitizer = sanitizer;
-            /**
-             * Optional: Different size via CSS inline style.
-             */
-            this.iconSize = IconSize.FULLSIZE;
-            /**
-             * Dont use icon sprite
-             */
-            this.dontUseSprite = false;
-            this.IconSize = IconSize;
-            this.Version = i0.VERSION.full;
-            this.timestamp = 0;
-            this.iconToShow = this.icon;
-        }
-        IconComponent.prototype.ngOnInit = function () {
-            this.iconToShow = this.icon;
-            var d = new Date();
-            var n = d.getTime();
-            this.timestamp = n;
-        };
-        return IconComponent;
-    }());
-    IconComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-icon',
-                    template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\r\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\r\n    <svg>\r\n      <use\r\n        [attr.xlink:href]=\"\r\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\r\n        \"\r\n      ></use>\r\n    </svg>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\r\n  <object\r\n    [data]=\"\r\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\r\n    \"\r\n    type=\"image/svg+xml\"\r\n    class=\"icon {{ iconSize }}\"\r\n    [ngClass]=\"iconClass\"\r\n    [ngStyle]=\"iconStyle\"\r\n  ></object>\r\n</ng-container>\r\n",
-                    styles: [""]
-                },] }
-    ];
-    IconComponent.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    IconComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
-        iconClass: [{ type: i0.Input }],
-        iconStyle: [{ type: i0.Input }],
-        iconSize: [{ type: i0.Input }],
-        dontUseSprite: [{ type: i0.Input }]
-    };
+    CustomPipesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomPipesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    CustomPipesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomPipesModule, declarations: [IntegerCurrency,
+            SafeHtmlPipe,
+            SafeStylePipe,
+            SafeResourceUrlPipe,
+            SafeUrlPipe,
+            EncodeUriPipe,
+            DecodeUriPipe,
+            TypeofPipe,
+            TrimPipe,
+            ToNumberPipe], imports: [i2.CommonModule], exports: [IntegerCurrency,
+            SafeHtmlPipe,
+            SafeStylePipe,
+            SafeResourceUrlPipe,
+            SafeUrlPipe,
+            EncodeUriPipe,
+            DecodeUriPipe,
+            TypeofPipe,
+            TrimPipe,
+            ToNumberPipe] });
+    CustomPipesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomPipesModule, providers: [i2.CurrencyPipe], imports: [[i2.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomPipesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            IntegerCurrency,
+                            SafeHtmlPipe,
+                            SafeStylePipe,
+                            SafeResourceUrlPipe,
+                            SafeUrlPipe,
+                            EncodeUriPipe,
+                            DecodeUriPipe,
+                            TypeofPipe,
+                            TrimPipe,
+                            ToNumberPipe,
+                        ],
+                        imports: [i2.CommonModule],
+                        exports: [
+                            IntegerCurrency,
+                            SafeHtmlPipe,
+                            SafeStylePipe,
+                            SafeResourceUrlPipe,
+                            SafeUrlPipe,
+                            EncodeUriPipe,
+                            DecodeUriPipe,
+                            TypeofPipe,
+                            TrimPipe,
+                            ToNumberPipe,
+                        ],
+                        providers: [i2.CurrencyPipe],
+                    }]
+            }] });
 
     var EnumRadiogroupComponent = /** @class */ (function (_super) {
         __extends(EnumRadiogroupComponent, _super);
@@ -1625,28 +2042,34 @@
         };
         return EnumRadiogroupComponent;
     }(FormControlParentComponent));
-    EnumRadiogroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-enum-radiogroup',
-                    template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return EnumRadiogroupComponent; }),
-                            multi: true,
-                        },
-                    ]
-                },] }
-    ];
-    EnumRadiogroupComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
-    EnumRadiogroupComponent.propDecorators = {
-        header: [{ type: i0.Input }],
-        optionsEnum: [{ type: i0.Input }],
-        translationPrefix: [{ type: i0.Input }]
-    };
+    EnumRadiogroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EnumRadiogroupComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EnumRadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EnumRadiogroupComponent, selector: "kms-enum-radiogroup", inputs: { header: "header", optionsEnum: "optionsEnum", translationPrefix: "translationPrefix" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return EnumRadiogroupComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EnumRadiogroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-enum-radiogroup',
+                        templateUrl: './enum-radiogroup.component.html',
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return EnumRadiogroupComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { header: [{
+                    type: i0.Input
+                }], optionsEnum: [{
+                    type: i0.Input
+                }], translationPrefix: [{
+                    type: i0.Input
+                }] } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -1660,6 +2083,7 @@
             this.itemTitle = '';
             this.showAsCard = false;
             this.isSmall = false;
+            this.expanded = false;
             this.panelOpenState = false;
         }
         KMSAccordionItemComponent.prototype.ngOnInit = function () {
@@ -1667,21 +2091,24 @@
         };
         return KMSAccordionItemComponent;
     }());
-    KMSAccordionItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-accordion-item',
-                    template: "<mat-expansion-panel\r\n    class=\"accordion-item\" \r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\" \r\n    (closed)=\"panelOpenState = false\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>                   \r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>",
-                    styles: [""]
-                },] }
-    ];
-    KMSAccordionItemComponent.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    KMSAccordionItemComponent.propDecorators = {
-        itemTitle: [{ type: i0.Input }],
-        showAsCard: [{ type: i0.Input }],
-        isSmall: [{ type: i0.Input }]
-    };
+    KMSAccordionItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KMSAccordionItemComponent, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    KMSAccordionItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0__namespace, template: "<mat-expansion-panel\r\n    class=\"accordion-item\"\r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\"\r\n    (closed)=\"panelOpenState = false\"\r\n    [expanded] = \"expanded\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>\r\n", styles: [""], components: [{ type: i2__namespace$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2__namespace$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KMSAccordionItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-accordion-item',
+                        templateUrl: './kms-accordion-item.component.html',
+                        styleUrls: ['./kms-accordion-item.component.scss'],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; }, propDecorators: { itemTitle: [{
+                    type: i0.Input
+                }], showAsCard: [{
+                    type: i0.Input
+                }], isSmall: [{
+                    type: i0.Input
+                }], expanded: [{
+                    type: i0.Input
+                }] } });
 
     /**
      * Service to get viewport
@@ -1728,7 +2155,7 @@
             ];
             this.viewportChangedSubscriber = new rxjs.Subject();
             this.viewportResizedSubscriber = new rxjs.Subject();
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 window.addEventListener('resize', this.documentSizeChanged.bind(this), { passive: true });
             }
         }
@@ -1736,25 +2163,25 @@
          * Get window height
          */
         ViewportService.prototype.getDocumentHeight = function () {
-            return common.isPlatformBrowser(this.platformId) ? document.body.clientHeight : 1200;
+            return i2.isPlatformBrowser(this.platformId) ? document.body.clientHeight : 1200;
         };
         /**
          * Get window width
          */
         ViewportService.prototype.getDocumentWidth = function () {
-            return common.isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
+            return i2.isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
         };
         /**
          * Get window height
          */
         ViewportService.prototype.getWindowHeight = function () {
-            return common.isPlatformBrowser(this.platformId) ? window.innerHeight : 1200;
+            return i2.isPlatformBrowser(this.platformId) ? window.innerHeight : 1200;
         };
         /**
          * Get window width
          */
         ViewportService.prototype.getWindowWidth = function () {
-            return common.isPlatformBrowser(this.platformId) ? window.innerWidth : 1200;
+            return i2.isPlatformBrowser(this.platformId) ? window.innerWidth : 1200;
         };
         /**
          * Returns the current viewport MQ as string
@@ -1762,7 +2189,7 @@
          */
         ViewportService.prototype.getCurrentViewPort = function () {
             if (!this.currentViewport) {
-                var currentWidth = common.isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
+                var currentWidth = i2.isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
                 this.currentViewport = this.convertWidthToMediaQuery(currentWidth);
             }
             return this.currentViewport;
@@ -1781,7 +2208,7 @@
         };
         ViewportService.prototype.scrollToElementId = function (el, alignCenter) {
             if (alignCenter === void 0) { alignCenter = false; }
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 this.scrollToElement(document.querySelector('#' + el), alignCenter);
             }
         };
@@ -1792,7 +2219,7 @@
          */
         ViewportService.prototype.scrollToElement = function (el, alignCenter) {
             if (alignCenter === void 0) { alignCenter = false; }
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 var extraScrollTop = 0;
                 if (alignCenter) {
                     extraScrollTop = (window.innerHeight - el.clientHeight) / 2;
@@ -1817,12 +2244,12 @@
          * @param top - top position value
          */
         ViewportService.prototype.scrollTop = function (top) {
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 window.scrollTo({ left: 0, top: top, behavior: 'smooth' });
             }
         };
         ViewportService.prototype.ngOnDestroy = function () {
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 window.removeEventListener('resize', this.documentSizeChanged);
             }
         };
@@ -1892,13 +2319,13 @@
             return currentViewport;
         };
         ViewportService.prototype.isPortrait = function () {
-            if (common.isPlatformBrowser(this.platformId))
+            if (i2.isPlatformBrowser(this.platformId))
                 return window.innerHeight > window.innerWidth;
             else
                 return;
         };
         ViewportService.prototype.isLandscape = function () {
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 var isLandscape = window.orientation === 90 || window.orientation === -90;
                 return isLandscape;
             }
@@ -1908,12 +2335,16 @@
         };
         return ViewportService;
     }());
-    ViewportService.decorators = [
-        { type: i0.Injectable }
-    ];
-    ViewportService.ctorParameters = function () { return [
-        { type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
-    ]; };
+    ViewportService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService, deps: [{ token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ViewportService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: Object, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.PLATFORM_ID]
+                        }] }];
+        } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -2047,19 +2478,18 @@
         };
         return MapComponent;
     }());
-    MapComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-map',
-                    template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\r\n    <google-map\r\n            height=\"415px\"\r\n            [width]=\"width\"\r\n            [zoom]=\"zoom\"\r\n            [center]=\"center\"\r\n            [options]=\"options\"\r\n    >\r\n        <map-marker\r\n            *ngFor=\"let marker of markers\"\r\n            [position]=\"marker.position\"\r\n            [label]=\"marker.label\"\r\n            [title]=\"marker.title\"\r\n            [options]=\"marker.options\"\r\n        >\r\n        </map-marker>\r\n    </google-map>\r\n</div>",
-                    styles: [""]
-                },] }
-    ];
-    MapComponent.ctorParameters = function () { return [
-        { type: ViewportService }
-    ]; };
-    MapComponent.propDecorators = {
-        data: [{ type: i0.Input }]
-    };
+    MapComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MapComponent, deps: [{ token: ViewportService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MapComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""], components: [{ type: i2__namespace$5.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$5.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MapComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-map',
+                        templateUrl: './map.component.html',
+                        styleUrls: ['./map.component.scss']
+                    }]
+            }], ctorParameters: function () { return [{ type: ViewportService }]; }, propDecorators: { data: [{
+                    type: i0.Input
+                }] } });
 
     // TODO change values after cleaned up database
     exports.SalutationEnum = void 0;
@@ -2097,26 +2527,30 @@
         };
         return SalutationDropdownComponent;
     }(FormControlParentComponent));
-    SalutationDropdownComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-salutation-dropdown',
-                    template: "<form [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"col\">\r\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\r\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return SalutationDropdownComponent; }),
-                            multi: true,
-                        },
-                    ]
-                },] }
-    ];
-    SalutationDropdownComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
-    SalutationDropdownComponent.propDecorators = {
-        placeholder: [{ type: i0.Input }]
-    };
+    SalutationDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SalutationDropdownComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SalutationDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SalutationDropdownComponent, selector: "kms-salutation-dropdown", inputs: { placeholder: "placeholder" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return SalutationDropdownComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SalutationDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-salutation-dropdown',
+                        templateUrl: './salutation-dropdown.component.html',
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return SalutationDropdownComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { placeholder: [{
+                    type: i0.Input
+                }] } });
 
     var TooltipComponent = /** @class */ (function () {
         function TooltipComponent() {
@@ -2124,53 +2558,18 @@
         }
         return TooltipComponent;
     }());
-    TooltipComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-tooltip-element',
-                    template: "<ng-content></ng-content>",
-                    styles: ["[kmsTooltip]{position:relative}\n"]
-                },] }
-    ];
-    TooltipComponent.propDecorators = {
-        tooltipTitle: [{ type: i0.Input }]
-    };
-
-    /**
-     * Attached File DTO
-     */
-    var AttachedFileDTO = /** @class */ (function () {
-        function AttachedFileDTO() {
-        }
-        return AttachedFileDTO;
-    }());
-
-    var TooltipIconComponent = /** @class */ (function () {
-        function TooltipIconComponent() {
-            this.tooltipTitle = "";
-            this.tooltipText = "";
-            this.tooltipLinkText = "";
-            this.tooltipLinkUrl = "";
-            this.placement = "";
-            this.delay = 1000;
-            this.IconSize = exports.IconSize;
-        }
-        return TooltipIconComponent;
-    }());
-    TooltipIconComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-tooltip-icon',
-                    template: "<span\r\n    kmsTooltip\r\n    [tooltipTitle]=\"tooltipTitle\"\r\n    [tooltipText]=\"tooltipText\"\r\n    [tooltipPlacement]=\"placement\"\r\n    [tooltipDelay]=\"delay\"\r\n    [tooltipLinkText]=\"tooltipLinkText\"\r\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\r\n>\r\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\r\n</span>\r\n",
-                    styles: [""]
-                },] }
-    ];
-    TooltipIconComponent.propDecorators = {
-        tooltipTitle: [{ type: i0.Input }],
-        tooltipText: [{ type: i0.Input }],
-        tooltipLinkText: [{ type: i0.Input }],
-        tooltipLinkUrl: [{ type: i0.Input }],
-        placement: [{ type: i0.Input }],
-        delay: [{ type: i0.Input }]
-    };
+    TooltipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TooltipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipComponent, selector: "kms-tooltip-element", inputs: { tooltipTitle: "tooltipTitle" }, ngImport: i0__namespace, template: "<ng-content></ng-content>", styles: ["[kmsTooltip]{position:relative}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-tooltip-element',
+                        templateUrl: './tooltip.component.html',
+                        styleUrls: ['./tooltip.component.scss']
+                    }]
+            }], propDecorators: { tooltipTitle: [{
+                    type: i0.Input
+                }] } });
 
     var SalutationRadiogroupComponent = /** @class */ (function (_super) {
         __extends(SalutationRadiogroupComponent, _super);
@@ -2197,23 +2596,28 @@
         };
         return SalutationRadiogroupComponent;
     }(FormControlParentComponent));
-    SalutationRadiogroupComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-salutation-radiogroup',
-                    template: "<form [formGroup]=\"form\" >\r\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n</form>",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return SalutationRadiogroupComponent; }),
-                            multi: true,
-                        },
-                    ]
-                },] }
-    ];
-    SalutationRadiogroupComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
+    SalutationRadiogroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SalutationRadiogroupComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SalutationRadiogroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SalutationRadiogroupComponent, selector: "kms-salutation-radiogroup", providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return SalutationRadiogroupComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SalutationRadiogroupComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-salutation-radiogroup',
+                        templateUrl: './salutation-radiogroup.component.html',
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return SalutationRadiogroupComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; } });
 
     /**
      * @copyright KMS GmbH
@@ -2223,7 +2627,7 @@
             this.platformId = platformId;
         }
         BackToTopComponent.prototype.onWindowScroll = function () {
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
                     this.windowScrolled = true;
                 }
@@ -2235,7 +2639,7 @@
             }
         };
         BackToTopComponent.prototype.scrollToTop = function () {
-            if (common.isPlatformBrowser(this.platformId)) {
+            if (i2.isPlatformBrowser(this.platformId)) {
                 (function smoothscroll() {
                     var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
                     if (currentScroll > 0) {
@@ -2247,18 +2651,23 @@
         };
         return BackToTopComponent;
     }());
-    BackToTopComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-back-to-top',
-                    template: "<div class=\"scrollToTop\"\r\n    [ngClass]=\"{'show': windowScrolled}\"\r\n    (click)=\"scrollToTop()\">\r\n        <div class=\"scrollToTop-inner\">\r\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\r\n        </div>\r\n</div>"
-                },] }
-    ];
-    BackToTopComponent.ctorParameters = function () { return [
-        { type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
-    ]; };
-    BackToTopComponent.propDecorators = {
-        onWindowScroll: [{ type: i0.HostListener, args: ['window:scroll', [],] }]
-    };
+    BackToTopComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BackToTopComponent, deps: [{ token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BackToTopComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0__namespace, template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BackToTopComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-back-to-top',
+                        templateUrl: './back-to-top.component.html',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: Object, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.PLATFORM_ID]
+                        }] }];
+        }, propDecorators: { onWindowScroll: [{
+                    type: i0.HostListener,
+                    args: ['window:scroll', []]
+                }] } });
 
     var ButtonResponseType;
     (function (ButtonResponseType) {
@@ -2305,18 +2714,21 @@
         };
         return GenericDialogComponent;
     }());
-    GenericDialogComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-generic-dialog',
-                    template: "<div mat-dialog-title class=\"mat-dialog-title\">\r\n    <h3>{{ data.title }}</h3>\r\n</div>\r\n<div mat-dialog-content class=\"mat-dialog-content\">\r\n    {{ data.message }}\r\n</div>\r\n<div mat-dialog-actions class=\"custom-dialog-actions\">\r\n    <button\r\n        mat-flat-button\r\n        class=\"test_secondary_button\"\r\n         color=\"accent\"\r\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\r\n    >\r\n        {{ buttons.secondary }}\r\n    </button>\r\n    <button\r\n        mat-flat-button\r\n        class=\"test_primary_button\"\r\n        color=\"primary\"\r\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\r\n    >\r\n        {{ buttons.primary }}\r\n    </button>\r\n</div>\r\n",
-                    styles: [""]
-                },] }
-    ];
-    GenericDialogComponent.ctorParameters = function () { return [
-        { type: dialog.MatDialogRef },
-        { type: i0.NgZone },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
-    ]; };
+    GenericDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: GenericDialogComponent, deps: [{ token: i1__namespace$4.MatDialogRef }, { token: i0__namespace.NgZone }, { token: i1$4.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GenericDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GenericDialogComponent, selector: "kms-generic-dialog", ngImport: i0__namespace, template: "<div mat-dialog-title class=\"mat-dialog-title\">\n    <h3>{{ data.title }}</h3>\n</div>\n<div mat-dialog-content class=\"mat-dialog-content\">\n    {{ data.message }}\n</div>\n<div mat-dialog-actions class=\"custom-dialog-actions\">\n    <button\n        mat-flat-button\n        class=\"test_secondary_button\"\n         color=\"accent\"\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\n    >\n        {{ buttons.secondary }}\n    </button>\n    <button\n        mat-flat-button\n        class=\"test_primary_button\"\n        color=\"primary\"\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\n    >\n        {{ buttons.primary }}\n    </button>\n</div>\n", styles: [""], components: [{ type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: GenericDialogComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-generic-dialog',
+                        templateUrl: './generic-dialog.component.html',
+                        styleUrls: ['./generic-dialog.component.scss'],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace$4.MatDialogRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$4.MAT_DIALOG_DATA]
+                        }] }];
+        } });
 
     var ButtonWithConfirmDialogComponent = /** @class */ (function () {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -2352,24 +2764,28 @@
         };
         return ButtonWithConfirmDialogComponent;
     }());
-    ButtonWithConfirmDialogComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-button-with-confirm-dialog',
-                    template: "<button\r\n    type=\"button\"\r\n    (click)=\"start()\"\r\n    mat-stroked-button\r\n    [disabled]=\"disabled\"\r\n>\r\n    {{ buttonText }}\r\n</button>\r\n",
-                    styles: [""]
-                },] }
-    ];
-    ButtonWithConfirmDialogComponent.ctorParameters = function () { return [
-        { type: dialog.MatDialog }
-    ]; };
-    ButtonWithConfirmDialogComponent.propDecorators = {
-        disabled: [{ type: i0.Input }],
-        buttonText: [{ type: i0.Input }],
-        confirmTitle: [{ type: i0.Input }],
-        confirmTextYes: [{ type: i0.Input }],
-        confirmTextNo: [{ type: i0.Input }],
-        onConfirmClosed: [{ type: i0.Output }]
-    };
+    ButtonWithConfirmDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ButtonWithConfirmDialogComponent, deps: [{ token: i1__namespace$4.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ButtonWithConfirmDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonWithConfirmDialogComponent, selector: "kms-button-with-confirm-dialog", inputs: { disabled: "disabled", buttonText: "buttonText", confirmTitle: "confirmTitle", confirmTextYes: "confirmTextYes", confirmTextNo: "confirmTextNo" }, outputs: { onConfirmClosed: "onConfirmClosed" }, ngImport: i0__namespace, template: "<button\n    type=\"button\"\n    (click)=\"start()\"\n    mat-stroked-button\n    [disabled]=\"disabled\"\n>\n    {{ buttonText }}\n</button>\n", styles: [""], components: [{ type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ButtonWithConfirmDialogComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-button-with-confirm-dialog',
+                        templateUrl: './button-with-confirm-dialog.component.html',
+                        styleUrls: ['./button-with-confirm-dialog.component.scss'],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$4.MatDialog }]; }, propDecorators: { disabled: [{
+                    type: i0.Input
+                }], buttonText: [{
+                    type: i0.Input
+                }], confirmTitle: [{
+                    type: i0.Input
+                }], confirmTextYes: [{
+                    type: i0.Input
+                }], confirmTextNo: [{
+                    type: i0.Input
+                }], onConfirmClosed: [{
+                    type: i0.Output
+                }] } });
 
     /**
      * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
@@ -2485,95 +2901,295 @@
         };
         return DropdownFromDataComponent;
     }(FormControlParentComponent));
-    DropdownFromDataComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-dropdown-from-data',
-                    template: "<form [formGroup]=\"form\">\r\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\r\n        <mat-label>{{ label }}</mat-label>\r\n        <mat-select\r\n            placeholder=\"{{ placeholder }}\"\r\n            disableOptionCentering\r\n            [(value)]=\"value\"\r\n            (selectionChange)=\"valueChanged($event?.value)\"\r\n            #child\r\n            [disabled]=\"disabled\"\r\n        >\r\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\r\n                <span>{{ setDisplayKey(key) }}</span>\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: i0.forwardRef(function () { return DropdownFromDataComponent; }),
-                            multi: true,
-                        },
-                    ]
-                },] }
-    ];
-    DropdownFromDataComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: i0.Renderer2 }
-    ]; };
-    DropdownFromDataComponent.propDecorators = {
-        optionsEnum: [{ type: i0.Input }],
-        optionsPlainArray: [{ type: i0.Input }],
-        optionsObjArray: [{ type: i0.Input }],
-        mapKey: [{ type: i0.Input }],
-        mapValue: [{ type: i0.Input }],
-        hasNullOption: [{ type: i0.Input }],
-        translation: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        useEnumIndexAsValue: [{ type: i0.Input }]
-    };
+    DropdownFromDataComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DropdownFromDataComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DropdownFromDataComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue" }, providers: [
+            {
+                provide: i1.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return DropdownFromDataComponent; }),
+                multi: true,
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\n        <mat-label>{{ label }}</mat-label>\n        <mat-select\n            placeholder=\"{{ placeholder }}\"\n            disableOptionCentering\n            [(value)]=\"value\"\n            (selectionChange)=\"valueChanged($event?.value)\"\n            #child\n            [disabled]=\"disabled\"\n        >\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n                <span>{{ setDisplayKey(key) }}</span>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>\n", components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.MatLabel, selector: "mat-label" }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DropdownFromDataComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-dropdown-from-data',
+                        templateUrl: './dropdown-from-data.component.html',
+                        providers: [
+                            {
+                                provide: i1.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return DropdownFromDataComponent; }),
+                                multi: true,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { optionsEnum: [{
+                    type: i0.Input
+                }], optionsPlainArray: [{
+                    type: i0.Input
+                }], optionsObjArray: [{
+                    type: i0.Input
+                }], mapKey: [{
+                    type: i0.Input
+                }], mapValue: [{
+                    type: i0.Input
+                }], hasNullOption: [{
+                    type: i0.Input
+                }], translation: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], required: [{
+                    type: i0.Input
+                }], useEnumIndexAsValue: [{
+                    type: i0.Input
+                }] } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
      */
-    var ImageSliderComponent = /** @class */ (function () {
-        function ImageSliderComponent(sanitizer) {
-            this.sanitizer = sanitizer;
-            this.editMode = false;
-            this.orderChanged = new i0.EventEmitter();
-            this.deleteImageEvent = new i0.EventEmitter();
+    var SwipeDirective = /** @class */ (function () {
+        function SwipeDirective() {
             /**
-             * Optional: Define Swipe behaviour configuration.
-             * Default is 10% for the threshold definition until a swipe triggers next/previous slide.
+             * Output Event that is emitted during swipe process (mouse move or touch move event).
+             * Can be used for calculation purposes.
              */
-            this.swipeConfig = {
-                swipeThreshold: 5,
-                swipeThresholdType: '%',
-                swipeLocalPosition: true,
-            };
-            this.selectedSlide = 0;
-            this.isLastClickedInSliderImage = false;
-            this.config = {
-                initialSlide: 0,
-                slidesPerView: 3,
-                navigation: {
-                    nextEl: '.swiper-button-next',
-                    prevEl: '.swiper-button-prev',
-                },
-                watchOverflow: true,
-                autoHeight: true,
-                allowTouchMove: false,
-                spaceBetween: 30,
-                on: {
-                    slideChange: function () {
-                        // do something
-                    },
-                    slideChangeTransitionEnd: function () {
-                        // do something
-                    },
-                },
-            };
+            this.moveEvent = new i0.EventEmitter();
+            /**
+             * Output Event that is emitted when swipe process end (mouse up or touch end event).
+             * Can be used for calculation purposes.
+             */
+            this.releaseEvent = new i0.EventEmitter();
+            this._startPosition = -1;
+            this._lastPosX = 0;
+            this._thresholdWasReached = false;
+            this._timeStart = 0;
         }
-        ImageSliderComponent.prototype.ngOnInit = function () {
-            if (this.slides) {
-                // TODO use Pipe safeStyle
-                this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
-            }
+        Object.defineProperty(SwipeDirective.prototype, "config", {
+            /**
+             * Needed config that defines swipe behaviour.
+             * @param options SwipeOptions
+             */
+            set: function (options) {
+                if (options) {
+                    this._swipeOptions = options;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SwipeDirective.prototype.onMouseDown = function (event) {
+            this.calculateStartPosition(event);
         };
-        // !TODO
-        ImageSliderComponent.prototype.onKeydownHandler = function (event) {
-            if (event.key === 'ArrowRight') {
-                this.nextSlide();
-            }
-            if (event.key === 'ArrowLeft') {
-                this.previousSlide();
-            }
+        SwipeDirective.prototype.onMove = function (event) {
+            this.move(event);
+        };
+        SwipeDirective.prototype.onRelease = function (event) {
+            this.release(event);
+            this.reset();
         };
+        // ** PRIVATE ** //
         /**
-         * Slide follows the finger or mouse according to it´s move delta.
+         * Function checks if the current moving delta is inside the defined threshold.
+         * Sets the flag to true if the threshold was reached once.
+         */
+        SwipeDirective.prototype.checkThreshold = function (moveEvent) {
+            var percentage = this._swipeOptions && this._swipeOptions.swipeThresholdType === '%';
+            if (!percentage && this._swipeOptions && moveEvent.swipeDistanceTotal < this._swipeOptions.swipeThreshold) {
+                return;
+            }
+            else if (percentage &&
+                this._swipeOptions &&
+                moveEvent.swipeDistancePercentage < this._swipeOptions.swipeThreshold / 100) {
+                return;
+            }
+            else {
+                this._thresholdWasReached = true;
+            }
+        };
+        SwipeDirective.prototype.calculateStartPosition = function (event) {
+            // detect if touch or click
+            this._isMobile = event.type === 'touchstart';
+            // save start position
+            if (this._swipeOptions && this._swipeOptions.swipeLocalPosition) {
+                if (this._isMobile) {
+                    var touch = event.touches[0];
+                    this._startPosition = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+                }
+                else {
+                    this._startPosition = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+                }
+            }
+            this._lastPosX = this._startPosition;
+            this._timeStart = event.timeStamp;
+            this._thresholdWasReached = false;
+        };
+        SwipeDirective.prototype.move = function (event) {
+            // failsafe
+            if (typeof event === 'undefined') {
+                return;
+            }
+            var posX = 0;
+            if (this._swipeOptions) {
+                if (this._isMobile && event.type === 'touchmove') {
+                    var touch = event.touches[0];
+                    posX = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+                }
+                else {
+                    posX = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+                }
+            }
+            var offsetPerFrame = posX - this._lastPosX;
+            var swipeDistanceTotal = Math.abs(posX - this._startPosition);
+            var swipeDistancePercentage = Math.abs(swipeDistanceTotal / event.target.clientWidth);
+            var timeDuration = Math.abs(event.timeStamp - this._timeStart);
+            var direction;
+            var speed = 1 - swipeDistanceTotal / timeDuration;
+            speed = Math.max(0.1, speed);
+            if (posX - this._startPosition > 0) {
+                direction = 1; // a.k.a LTR
+            }
+            else {
+                direction = -1; // a.k.a RTL
+            }
+            this._moveEventData = {
+                position: posX,
+                offsetPerFrame: offsetPerFrame,
+                swipeDistanceTotal: swipeDistanceTotal,
+                swipeDistancePercentage: swipeDistancePercentage,
+                direction: direction,
+                speed: speed,
+                thresholdWasReached: this._thresholdWasReached,
+            };
+            this.checkThreshold(this._moveEventData);
+            // update move delta
+            this._lastPosX = posX;
+            // inform
+            this.moveEvent.emit(this._moveEventData);
+        };
+        SwipeDirective.prototype.release = function (event) {
+            // case: just a click/touch
+            if (!this._moveEventData) {
+                return;
+            }
+            var releaseEventData = {
+                thresholdWasReached: this._thresholdWasReached,
+                direction: this._moveEventData.direction,
+                speed: this._moveEventData.speed,
+                easingType: this.getEasingCurve(this._moveEventData.speed),
+                target: event.currentTarget,
+            };
+            // inform
+            this.releaseEvent.emit(releaseEventData);
+        };
+        SwipeDirective.prototype.getEasingCurve = function (speed) {
+            return speed > 0.5 ? 'ease-in' : 'ease-out';
+        };
+        SwipeDirective.prototype.reset = function () {
+            this._startPosition = -1;
+            this._thresholdWasReached = false;
+            if (this._moveEventData) {
+                this._moveEventData = undefined;
+            }
+        };
+        return SwipeDirective;
+    }());
+    SwipeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SwipeDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SwipeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SwipeDirective, selector: "[swipeDirective]", inputs: { config: ["swipeDirective", "config"] }, outputs: { moveEvent: "moveEvent", releaseEvent: "releaseEvent" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onMouseDown($event)", "mousemove": "onMove($event)", "touchmove": "onMove($event)", "mouseup": "onRelease($event)", "mouseleave": "onRelease($event)", "touchend": "onRelease($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SwipeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[swipeDirective]',
+                    }]
+            }], propDecorators: { moveEvent: [{
+                    type: i0.Output
+                }], releaseEvent: [{
+                    type: i0.Output
+                }], config: [{
+                    type: i0.Input,
+                    args: ['swipeDirective']
+                }], onMouseDown: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['touchstart', ['$event']]
+                }], onMove: [{
+                    type: i0.HostListener,
+                    args: ['mousemove', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['touchmove', ['$event']]
+                }], onRelease: [{
+                    type: i0.HostListener,
+                    args: ['mouseup', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['mouseleave', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['touchend', ['$event']]
+                }] } });
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    var ImageSliderComponent = /** @class */ (function () {
+        function ImageSliderComponent(sanitizer) {
+            this.sanitizer = sanitizer;
+            this.editMode = false;
+            this.orderChanged = new i0.EventEmitter();
+            this.deleteImageEvent = new i0.EventEmitter();
+            /**
+             * Optional: Define Swipe behaviour configuration.
+             * Default is 10% for the threshold definition until a swipe triggers next/previous slide.
+             */
+            this.swipeConfig = {
+                swipeThreshold: 5,
+                swipeThresholdType: '%',
+                swipeLocalPosition: true,
+            };
+            this.selectedSlide = 0;
+            this.isLastClickedInSliderImage = false;
+            this.config = {
+                initialSlide: 0,
+                slidesPerView: 3,
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                },
+                watchOverflow: true,
+                autoHeight: true,
+                allowTouchMove: false,
+                spaceBetween: 30,
+                on: {
+                    slideChange: function () {
+                        // do something
+                    },
+                    slideChangeTransitionEnd: function () {
+                        // do something
+                    },
+                },
+            };
+        }
+        ImageSliderComponent.prototype.ngOnInit = function () {
+            if (this.slides) {
+                // TODO use Pipe safeStyle
+                this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+            }
+        };
+        // !TODO
+        ImageSliderComponent.prototype.onKeydownHandler = function (event) {
+            if (event.key === 'ArrowRight') {
+                this.nextSlide();
+            }
+            if (event.key === 'ArrowLeft') {
+                this.previousSlide();
+            }
+        };
+        /**
+         * Slide follows the finger or mouse according to it´s move delta.
          * @param event SwipeMoveEvent
          */
         ImageSliderComponent.prototype.handleMoveEvent = function (event) {
@@ -2657,8 +3273,8 @@
          */
         ImageSliderComponent.prototype.drop = function (event) {
             if (this.slides && this.imagesTOSave) {
-                dragDrop.moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
-                dragDrop.moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
+                i6.moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
+                i6.moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
                 this.orderChanged.emit(this.imagesTOSave);
             }
         };
@@ -2670,26 +3286,34 @@
         };
         return ImageSliderComponent;
     }());
-    ImageSliderComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'kms-image-slider',
-                    template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>",
-                    styles: [""]
-                },] }
-    ];
-    ImageSliderComponent.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    ImageSliderComponent.propDecorators = {
-        slides: [{ type: i0.Input }],
-        editMode: [{ type: i0.Input }],
-        imagesTOSave: [{ type: i0.Input }],
-        orderChanged: [{ type: i0.Output }],
-        deleteImageEvent: [{ type: i0.Output }],
-        swipeConfig: [{ type: i0.Input }],
-        usefulSwiper: [{ type: i0.ViewChild, args: ['usefulSwiper',] }],
-        onKeydownHandler: [{ type: i0.HostListener, args: ['document:keydown', ['$event'],] }]
-    };
+    ImageSliderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageSliderComponent, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImageSliderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], components: [{ type: i2__namespace$6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { type: i6__namespace.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageSliderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'kms-image-slider',
+                        templateUrl: './image-slider.component.html',
+                        styleUrls: ['./image-slider.component.scss'],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; }, propDecorators: { slides: [{
+                    type: i0.Input
+                }], editMode: [{
+                    type: i0.Input
+                }], imagesTOSave: [{
+                    type: i0.Input
+                }], orderChanged: [{
+                    type: i0.Output
+                }], deleteImageEvent: [{
+                    type: i0.Output
+                }], swipeConfig: [{
+                    type: i0.Input
+                }], usefulSwiper: [{
+                    type: i0.ViewChild,
+                    args: ['usefulSwiper']
+                }], onKeydownHandler: [{
+                    type: i0.HostListener,
+                    args: ['document:keydown', ['$event']]
+                }] } });
 
     /*!
      * @copyright FLYACTS GmbH 2019
@@ -2726,373 +3350,25 @@
         };
         return MouseWheelDirective;
     }());
-    MouseWheelDirective.decorators = [
-        { type: i0.Directive, args: [{ selector: '[mouseWheel]' },] }
-    ];
-    MouseWheelDirective.propDecorators = {
-        mouseWheelUp: [{ type: i0.Output }],
-        mouseWheelDown: [{ type: i0.Output }],
-        onMouseWheelChrome: [{ type: i0.HostListener, args: ['mousewheel', ['$event'],] }],
-        onMouseWheelFirefox: [{ type: i0.HostListener, args: ['DOMMouseScroll', ['$event'],] }],
-        onMouseWheelIE: [{ type: i0.HostListener, args: ['onmousewheel', ['$event'],] }]
-    };
-
-    /*!
-     * @copyright FLYACTS GmbH 2019
-     */
-    /**
-     * Directive to calc the height of all inner elements
-     */
-    var GetMaxHeightDirective = /** @class */ (function () {
-        function GetMaxHeightDirective(el) {
-            this.el = el;
-            /**
-             * CSS class name of the child items (markup elements) that should be checked for their height.
-             * This is mandatory.
-             */
-            this.cssClassName = '';
-            /**
-             * Event that will pass the height of the tallest child inside the container.
-             * Useful to calculate the target height of containers with different content (like accordion) for animations.
-             */
-            this.maxHeightChanged = new i0.EventEmitter();
-            /**
-             * Event that will pass the complete sum of all height values from each child.
-             * Useful to calculate the full target height of a container (like dropdown) for animations.
-             */
-            this.sumOfHeight = new i0.EventEmitter();
-        }
-        GetMaxHeightDirective.prototype.ngAfterContentChecked = function () {
-            this.checkHeightOfChildren(this.el.nativeElement, this.cssClassName);
-        };
-        GetMaxHeightDirective.prototype.checkHeightOfChildren = function (parent, cssClassName) {
-            if (!parent) {
-                return;
-            }
-            // find all the child elements with the selected class name
-            var children = parent.getElementsByClassName(cssClassName);
-            // failsafe
-            if (!children) {
-                return;
-            }
-            // get all the child elements heights
-            var itemHeights = Array.from(children).map(function (x) { return x.getBoundingClientRect().height; });
-            // failsafe
-            if (itemHeights.length === 0) {
-                return;
-            }
-            // find out the tallest element
-            var maxHeight = itemHeights.reduce(function (prev, curr) {
-                return curr > prev ? curr : prev;
-            }, 0);
-            // get sum of heights
-            var sumOfHeight = itemHeights.reduce(function (pv, cv) { return pv + cv; }, 0);
-            // inform
-            this.maxHeightChanged.emit(maxHeight);
-            this.sumOfHeight.emit(sumOfHeight);
-        };
-        return GetMaxHeightDirective;
-    }());
-    GetMaxHeightDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[getMaxHeight]',
-                },] }
-    ];
-    GetMaxHeightDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    GetMaxHeightDirective.propDecorators = {
-        cssClassName: [{ type: i0.Input, args: ['getMaxHeight',] }],
-        maxHeightChanged: [{ type: i0.Output }],
-        sumOfHeight: [{ type: i0.Output }]
-    };
-
-    /*!
-     * @copyright FLYACTS GmbH 2019
-     */
-    var SwipeDirective = /** @class */ (function () {
-        function SwipeDirective() {
-            /**
-             * Output Event that is emitted during swipe process (mouse move or touch move event).
-             * Can be used for calculation purposes.
-             */
-            this.moveEvent = new i0.EventEmitter();
-            /**
-             * Output Event that is emitted when swipe process end (mouse up or touch end event).
-             * Can be used for calculation purposes.
-             */
-            this.releaseEvent = new i0.EventEmitter();
-            this._startPosition = -1;
-            this._lastPosX = 0;
-            this._thresholdWasReached = false;
-            this._timeStart = 0;
-        }
-        Object.defineProperty(SwipeDirective.prototype, "config", {
-            /**
-             * Needed config that defines swipe behaviour.
-             * @param options SwipeOptions
-             */
-            set: function (options) {
-                if (options) {
-                    this._swipeOptions = options;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SwipeDirective.prototype.onMouseDown = function (event) {
-            this.calculateStartPosition(event);
-        };
-        SwipeDirective.prototype.onMove = function (event) {
-            this.move(event);
-        };
-        SwipeDirective.prototype.onRelease = function (event) {
-            this.release(event);
-            this.reset();
-        };
-        // ** PRIVATE ** //
-        /**
-         * Function checks if the current moving delta is inside the defined threshold.
-         * Sets the flag to true if the threshold was reached once.
-         */
-        SwipeDirective.prototype.checkThreshold = function (moveEvent) {
-            var percentage = this._swipeOptions && this._swipeOptions.swipeThresholdType === '%';
-            if (!percentage && this._swipeOptions && moveEvent.swipeDistanceTotal < this._swipeOptions.swipeThreshold) {
-                return;
-            }
-            else if (percentage &&
-                this._swipeOptions &&
-                moveEvent.swipeDistancePercentage < this._swipeOptions.swipeThreshold / 100) {
-                return;
-            }
-            else {
-                this._thresholdWasReached = true;
-            }
-        };
-        SwipeDirective.prototype.calculateStartPosition = function (event) {
-            // detect if touch or click
-            this._isMobile = event.type === 'touchstart';
-            // save start position
-            if (this._swipeOptions && this._swipeOptions.swipeLocalPosition) {
-                if (this._isMobile) {
-                    var touch = event.touches[0];
-                    this._startPosition = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
-                }
-                else {
-                    this._startPosition = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
-                }
-            }
-            this._lastPosX = this._startPosition;
-            this._timeStart = event.timeStamp;
-            this._thresholdWasReached = false;
-        };
-        SwipeDirective.prototype.move = function (event) {
-            // failsafe
-            if (typeof event === 'undefined') {
-                return;
-            }
-            var posX = 0;
-            if (this._swipeOptions) {
-                if (this._isMobile && event.type === 'touchmove') {
-                    var touch = event.touches[0];
-                    posX = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
-                }
-                else {
-                    posX = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
-                }
-            }
-            var offsetPerFrame = posX - this._lastPosX;
-            var swipeDistanceTotal = Math.abs(posX - this._startPosition);
-            var swipeDistancePercentage = Math.abs(swipeDistanceTotal / event.target.clientWidth);
-            var timeDuration = Math.abs(event.timeStamp - this._timeStart);
-            var direction;
-            var speed = 1 - swipeDistanceTotal / timeDuration;
-            speed = Math.max(0.1, speed);
-            if (posX - this._startPosition > 0) {
-                direction = 1; // a.k.a LTR
-            }
-            else {
-                direction = -1; // a.k.a RTL
-            }
-            this._moveEventData = {
-                position: posX,
-                offsetPerFrame: offsetPerFrame,
-                swipeDistanceTotal: swipeDistanceTotal,
-                swipeDistancePercentage: swipeDistancePercentage,
-                direction: direction,
-                speed: speed,
-                thresholdWasReached: this._thresholdWasReached,
-            };
-            this.checkThreshold(this._moveEventData);
-            // update move delta
-            this._lastPosX = posX;
-            // inform
-            this.moveEvent.emit(this._moveEventData);
-        };
-        SwipeDirective.prototype.release = function (event) {
-            // case: just a click/touch
-            if (!this._moveEventData) {
-                return;
-            }
-            var releaseEventData = {
-                thresholdWasReached: this._thresholdWasReached,
-                direction: this._moveEventData.direction,
-                speed: this._moveEventData.speed,
-                easingType: this.getEasingCurve(this._moveEventData.speed),
-                target: event.currentTarget,
-            };
-            // inform
-            this.releaseEvent.emit(releaseEventData);
-        };
-        SwipeDirective.prototype.getEasingCurve = function (speed) {
-            return speed > 0.5 ? 'ease-in' : 'ease-out';
-        };
-        SwipeDirective.prototype.reset = function () {
-            this._startPosition = -1;
-            this._thresholdWasReached = false;
-            if (this._moveEventData) {
-                this._moveEventData = undefined;
-            }
-        };
-        return SwipeDirective;
-    }());
-    SwipeDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[swipeDirective]',
-                },] }
-    ];
-    SwipeDirective.propDecorators = {
-        moveEvent: [{ type: i0.Output }],
-        releaseEvent: [{ type: i0.Output }],
-        config: [{ type: i0.Input, args: ['swipeDirective',] }],
-        onMouseDown: [{ type: i0.HostListener, args: ['mousedown', ['$event'],] }, { type: i0.HostListener, args: ['touchstart', ['$event'],] }],
-        onMove: [{ type: i0.HostListener, args: ['mousemove', ['$event'],] }, { type: i0.HostListener, args: ['touchmove', ['$event'],] }],
-        onRelease: [{ type: i0.HostListener, args: ['mouseup', ['$event'],] }, { type: i0.HostListener, args: ['mouseleave', ['$event'],] }, { type: i0.HostListener, args: ['touchend', ['$event'],] }]
-    };
-
-    var TooltipDirective = /** @class */ (function () {
-        function TooltipDirective(el, renderer) {
-            this.el = el;
-            this.renderer = renderer;
-            this.tooltipTitle = "";
-            this.tooltipText = "";
-            this.tooltipLinkText = "";
-            this.tooltipLinkUrl = "";
-            this.tooltipPlacement = "bottom";
-            this.tooltipDelay = 1000;
-            this.tooltipPlaceIntoHost = false;
-            this.tooltipOnlyonclick = false;
-            this.offset = 0;
-        }
-        TooltipDirective.prototype.onMouseEnter = function () {
-            if (!this.tooltipOnlyonclick) {
-                this.show();
-            }
-        };
-        TooltipDirective.prototype.onClick = function () {
-            if (this.tooltipOnlyonclick) {
-                this.show();
-            }
-        };
-        TooltipDirective.prototype.onMouseLeave = function () {
-            if (this.tooltipElem) {
-                this.hide();
-            }
-        };
-        TooltipDirective.prototype.show = function () {
-            if (!this.tooltipElem) {
-                this.create();
-                this.setPosition();
-            }
-            this.renderer.addClass(this.tooltipElem, 'tooltip-show');
-        };
-        TooltipDirective.prototype.hide = function () {
-            this.renderer.removeClass(this.tooltipElem, 'tooltip-show');
-            window.setTimeout(function () {
-            }, this.tooltipDelay);
-        };
-        TooltipDirective.prototype.create = function () {
-            this.tooltipElem = this.renderer.createElement('kms-tooltip-element');
-            this.tooltipTitleElem = this.renderer.createElement('b');
-            this.renderer.appendChild(this.tooltipTitleElem, this.renderer.createText(this.tooltipTitle));
-            this.renderer.appendChild(this.tooltipElem, this.tooltipTitleElem);
-            this.tooltipTextElem = this.renderer.createElement('div');
-            this.renderer.appendChild(this.tooltipTextElem, this.renderer.createText(this.tooltipText));
-            this.renderer.appendChild(this.tooltipElem, this.tooltipTextElem);
-            this.tooltipLinkElem = this.renderer.createElement('a');
-            this.renderer.setAttribute(this.tooltipLinkElem, 'href', this.tooltipLinkUrl);
-            this.renderer.appendChild(this.tooltipLinkElem, this.renderer.createText(this.tooltipLinkText));
-            this.renderer.appendChild(this.tooltipElem, this.tooltipLinkElem);
-            if (this.tooltipPlaceIntoHost) {
-                this.renderer.appendChild(this.el.nativeElement, this.tooltipElem);
-            }
-            else {
-                this.renderer.appendChild(document.body, this.tooltipElem);
-            }
-            this.renderer.addClass(this.tooltipElem, 'tooltip');
-            this.renderer.addClass(this.tooltipElem, "tooltip-" + this.tooltipPlacement);
-            this.renderer.setStyle(this.tooltipElem, '-webkit-transition', "opacity " + this.tooltipDelay + "ms");
-            this.renderer.setStyle(this.tooltipElem, '-moz-transition', "opacity " + this.tooltipDelay + "ms");
-            this.renderer.setStyle(this.tooltipElem, '-o-transition', "opacity " + this.tooltipDelay + "ms");
-            this.renderer.setStyle(this.tooltipElem, 'transition', "opacity " + this.tooltipDelay + "ms");
-        };
-        TooltipDirective.prototype.setPosition = function () {
-            if (this.tooltipElem) {
-                var hostPos = this.el.nativeElement.getBoundingClientRect();
-                var tooltipPos = this.tooltipElem.getBoundingClientRect();
-                var top = void 0, left = void 0;
-                if (this.tooltipPlaceIntoHost) {
-                    left = 0;
-                    top = hostPos.height;
-                }
-                else {
-                    var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-                    if (this.tooltipPlacement === 'top') {
-                        top = hostPos.top - tooltipPos.height - this.offset;
-                        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-                    }
-                    if (!this.tooltipPlacement || this.tooltipPlacement === 'bottom') {
-                        top = hostPos.bottom + this.offset;
-                        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
-                    }
-                    if (this.tooltipPlacement === 'left') {
-                        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
-                        left = hostPos.left - tooltipPos.width - this.offset;
-                    }
-                    if (this.tooltipPlacement === 'right') {
-                        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
-                        left = hostPos.right + this.offset;
-                    }
-                    top += scrollPos;
-                }
-                this.renderer.setStyle(this.tooltipElem, 'top', top + "px");
-                this.renderer.setStyle(this.tooltipElem, 'left', left + "px");
-            }
-        };
-        return TooltipDirective;
-    }());
-    TooltipDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[kmsTooltip]'
-                },] }
-    ];
-    TooltipDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 }
-    ]; };
-    TooltipDirective.propDecorators = {
-        tooltipTitle: [{ type: i0.Input, args: ['tooltipTitle',] }],
-        tooltipText: [{ type: i0.Input, args: ['tooltipText',] }],
-        tooltipLinkText: [{ type: i0.Input, args: ['tooltipLinkText',] }],
-        tooltipLinkUrl: [{ type: i0.Input, args: ['tooltipLinkUrl',] }],
-        tooltipPlacement: [{ type: i0.Input, args: ['tooltipPlacement',] }],
-        tooltipDelay: [{ type: i0.Input, args: ['tooltipDelay',] }],
-        tooltipPlaceIntoHost: [{ type: i0.Input, args: ['tooltipPlaceIntoHost',] }],
-        tooltipOnlyonclick: [{ type: i0.Input, args: ['tooltipOnlyonclick',] }],
-        onMouseEnter: [{ type: i0.HostListener, args: ['mouseenter',] }],
-        onClick: [{ type: i0.HostListener, args: ['click',] }],
-        onMouseLeave: [{ type: i0.HostListener, args: ['mouseleave',] }]
-    };
+    MouseWheelDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MouseWheelDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MouseWheelDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MouseWheelDirective, selector: "[mouseWheel]", outputs: { mouseWheelUp: "mouseWheelUp", mouseWheelDown: "mouseWheelDown" }, host: { listeners: { "mousewheel": "onMouseWheelChrome($event)", "DOMMouseScroll": "onMouseWheelFirefox($event)", "onmousewheel": "onMouseWheelIE($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MouseWheelDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[mouseWheel]' }]
+            }], propDecorators: { mouseWheelUp: [{
+                    type: i0.Output
+                }], mouseWheelDown: [{
+                    type: i0.Output
+                }], onMouseWheelChrome: [{
+                    type: i0.HostListener,
+                    args: ['mousewheel', ['$event']]
+                }], onMouseWheelFirefox: [{
+                    type: i0.HostListener,
+                    args: ['DOMMouseScroll', ['$event']]
+                }], onMouseWheelIE: [{
+                    type: i0.HostListener,
+                    args: ['onmousewheel', ['$event']]
+                }] } });
 
     /**
      * @copyright KMS GmbH
@@ -3102,108 +3378,209 @@
         }
         return DirectivesModule;
     }());
-    DirectivesModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        SwipeDirective,
-                        MouseWheelDirective,
-                        GetMaxHeightDirective,
-                        TooltipDirective,
-                    ],
-                    imports: [common.CommonModule],
-                    exports: [
-                        SwipeDirective,
-                        MouseWheelDirective,
-                        GetMaxHeightDirective,
-                        TooltipDirective,
-                    ],
-                },] }
-    ];
+    DirectivesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    DirectivesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, declarations: [SwipeDirective,
+            MouseWheelDirective,
+            GetMaxHeightDirective,
+            TooltipDirective], imports: [i2.CommonModule], exports: [SwipeDirective,
+            MouseWheelDirective,
+            GetMaxHeightDirective,
+            TooltipDirective] });
+    DirectivesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, imports: [[i2.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            SwipeDirective,
+                            MouseWheelDirective,
+                            GetMaxHeightDirective,
+                            TooltipDirective,
+                        ],
+                        imports: [i2.CommonModule],
+                        exports: [
+                            SwipeDirective,
+                            MouseWheelDirective,
+                            GetMaxHeightDirective,
+                            TooltipDirective,
+                        ],
+                    }]
+            }] });
 
     var KmsUiPresentationalModule = /** @class */ (function () {
         function KmsUiPresentationalModule() {
         }
         return KmsUiPresentationalModule;
     }());
-    KmsUiPresentationalModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        ActionsParentComponent,
-                        BackToTopComponent,
-                        ButtonWithConfirmDialogComponent,
-                        CheckboxComponent,
-                        ColorInputComponent,
-                        DropdownFromDataComponent,
-                        EnumRadiogroupComponent,
-                        EnumRadiogroupComponent,
-                        FileInputComponent,
-                        FlyoutComponent,
-                        GenericDialogComponent,
-                        IconComponent,
-                        ImageSliderComponent,
-                        KMSAccordionItemComponent,
-                        KmsUiPresentationalComponent,
-                        LoaderComponent,
-                        MapComponent,
-                        RadioButtonComponent,
-                        SalutationDropdownComponent,
-                        SalutationRadiogroupComponent,
-                        TimeInputComponent,
-                        TooltipComponent,
-                        TooltipIconComponent,
-                        YesNoRadiogroupComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        checkbox.MatCheckboxModule,
-                        button.MatButtonModule,
-                        radio.MatRadioModule,
-                        dialog.MatDialogModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        menu.MatMenuModule,
-                        CustomPipesModule,
-                        googleMaps.GoogleMapsModule,
-                        expansion.MatExpansionModule,
-                        select.MatSelectModule,
-                        progressSpinner.MatProgressSpinnerModule,
-                        DirectivesModule,
-                        core.TranslateModule,
-                        ngxUsefulSwiper.NgxUsefulSwiperModule,
-                    ],
-                    exports: [
-                        ActionsParentComponent,
-                        BackToTopComponent,
-                        ButtonWithConfirmDialogComponent,
-                        CheckboxComponent,
-                        ColorInputComponent,
-                        DropdownFromDataComponent,
-                        EnumRadiogroupComponent,
-                        EnumRadiogroupComponent,
-                        FileInputComponent,
-                        FlyoutComponent,
-                        GenericDialogComponent,
-                        IconComponent,
-                        ImageSliderComponent,
-                        KMSAccordionItemComponent,
-                        KmsUiPresentationalComponent,
-                        LoaderComponent,
-                        MapComponent,
-                        RadioButtonComponent,
-                        SalutationDropdownComponent,
-                        SalutationRadiogroupComponent,
-                        TimeInputComponent,
-                        TooltipComponent,
-                        TooltipIconComponent,
-                        YesNoRadiogroupComponent,
-                    ],
-                    providers: [
-                        ViewportService
-                    ]
-                },] }
-    ];
+    KmsUiPresentationalModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    KmsUiPresentationalModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalModule, declarations: [ActionsParentComponent,
+            BackToTopComponent,
+            ButtonWithConfirmDialogComponent,
+            CheckboxComponent,
+            ColorInputComponent,
+            DropdownFromDataComponent,
+            EnumRadiogroupComponent,
+            EnumRadiogroupComponent,
+            FileInputComponent,
+            FlyoutComponent,
+            GenericDialogComponent,
+            IconComponent,
+            ImageSliderComponent,
+            KMSAccordionItemComponent,
+            KmsUiPresentationalComponent,
+            LoaderComponent,
+            MapComponent,
+            RadioButtonComponent,
+            SalutationDropdownComponent,
+            SalutationRadiogroupComponent,
+            TimeInputComponent,
+            TooltipComponent,
+            TooltipIconComponent,
+            YesNoRadiogroupComponent], imports: [i2.CommonModule,
+            i6.DragDropModule,
+            i1$1.MatCheckboxModule,
+            i2$3.MatButtonModule,
+            i2$2.MatRadioModule,
+            i1$4.MatDialogModule,
+            i1.FormsModule,
+            i1.ReactiveFormsModule,
+            i2$1.MatFormFieldModule,
+            i5.MatInputModule,
+            i3$1.MatMenuModule,
+            CustomPipesModule,
+            i2$5.GoogleMapsModule,
+            i2$4.MatExpansionModule,
+            i3.MatSelectModule,
+            i1$3.MatProgressSpinnerModule,
+            DirectivesModule,
+            i5$1.TranslateModule,
+            i2$6.NgxUsefulSwiperModule], exports: [ActionsParentComponent,
+            BackToTopComponent,
+            ButtonWithConfirmDialogComponent,
+            CheckboxComponent,
+            ColorInputComponent,
+            DropdownFromDataComponent,
+            EnumRadiogroupComponent,
+            EnumRadiogroupComponent,
+            FileInputComponent,
+            FlyoutComponent,
+            GenericDialogComponent,
+            IconComponent,
+            ImageSliderComponent,
+            KMSAccordionItemComponent,
+            KmsUiPresentationalComponent,
+            LoaderComponent,
+            MapComponent,
+            RadioButtonComponent,
+            SalutationDropdownComponent,
+            SalutationRadiogroupComponent,
+            TimeInputComponent,
+            TooltipComponent,
+            TooltipIconComponent,
+            YesNoRadiogroupComponent] });
+    KmsUiPresentationalModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalModule, providers: [
+            ViewportService
+        ], imports: [[
+                i2.CommonModule,
+                i6.DragDropModule,
+                i1$1.MatCheckboxModule,
+                i2$3.MatButtonModule,
+                i2$2.MatRadioModule,
+                i1$4.MatDialogModule,
+                i1.FormsModule,
+                i1.ReactiveFormsModule,
+                i2$1.MatFormFieldModule,
+                i5.MatInputModule,
+                i3$1.MatMenuModule,
+                CustomPipesModule,
+                i2$5.GoogleMapsModule,
+                i2$4.MatExpansionModule,
+                i3.MatSelectModule,
+                i1$3.MatProgressSpinnerModule,
+                DirectivesModule,
+                i5$1.TranslateModule,
+                i2$6.NgxUsefulSwiperModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            ActionsParentComponent,
+                            BackToTopComponent,
+                            ButtonWithConfirmDialogComponent,
+                            CheckboxComponent,
+                            ColorInputComponent,
+                            DropdownFromDataComponent,
+                            EnumRadiogroupComponent,
+                            EnumRadiogroupComponent,
+                            FileInputComponent,
+                            FlyoutComponent,
+                            GenericDialogComponent,
+                            IconComponent,
+                            ImageSliderComponent,
+                            KMSAccordionItemComponent,
+                            KmsUiPresentationalComponent,
+                            LoaderComponent,
+                            MapComponent,
+                            RadioButtonComponent,
+                            SalutationDropdownComponent,
+                            SalutationRadiogroupComponent,
+                            TimeInputComponent,
+                            TooltipComponent,
+                            TooltipIconComponent,
+                            YesNoRadiogroupComponent,
+                        ],
+                        imports: [
+                            i2.CommonModule,
+                            i6.DragDropModule,
+                            i1$1.MatCheckboxModule,
+                            i2$3.MatButtonModule,
+                            i2$2.MatRadioModule,
+                            i1$4.MatDialogModule,
+                            i1.FormsModule,
+                            i1.ReactiveFormsModule,
+                            i2$1.MatFormFieldModule,
+                            i5.MatInputModule,
+                            i3$1.MatMenuModule,
+                            CustomPipesModule,
+                            i2$5.GoogleMapsModule,
+                            i2$4.MatExpansionModule,
+                            i3.MatSelectModule,
+                            i1$3.MatProgressSpinnerModule,
+                            DirectivesModule,
+                            i5$1.TranslateModule,
+                            i2$6.NgxUsefulSwiperModule,
+                        ],
+                        exports: [
+                            ActionsParentComponent,
+                            BackToTopComponent,
+                            ButtonWithConfirmDialogComponent,
+                            CheckboxComponent,
+                            ColorInputComponent,
+                            DropdownFromDataComponent,
+                            EnumRadiogroupComponent,
+                            EnumRadiogroupComponent,
+                            FileInputComponent,
+                            FlyoutComponent,
+                            GenericDialogComponent,
+                            IconComponent,
+                            ImageSliderComponent,
+                            KMSAccordionItemComponent,
+                            KmsUiPresentationalComponent,
+                            LoaderComponent,
+                            MapComponent,
+                            RadioButtonComponent,
+                            SalutationDropdownComponent,
+                            SalutationRadiogroupComponent,
+                            TimeInputComponent,
+                            TooltipComponent,
+                            TooltipIconComponent,
+                            YesNoRadiogroupComponent,
+                        ],
+                        providers: [
+                            ViewportService
+                        ]
+                    }]
+            }] });
 
     /*
      * Public API Surface of kms-ngx-ui-presentational
@@ -3213,50 +3590,52 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.ActionsParentComponent = ActionsParentComponent;
+    exports.BackToTopComponent = BackToTopComponent;
+    exports.ButtonWithConfirmDialogComponent = ButtonWithConfirmDialogComponent;
+    exports.CheckboxComponent = CheckboxComponent;
+    exports.ColorInputComponent = ColorInputComponent;
     exports.CustomPipesModule = CustomPipesModule;
+    exports.DecodeUriPipe = DecodeUriPipe;
     exports.DirectivesModule = DirectivesModule;
+    exports.DropdownFromDataComponent = DropdownFromDataComponent;
+    exports.EncodeUriPipe = EncodeUriPipe;
+    exports.EnumRadiogroupComponent = EnumRadiogroupComponent;
+    exports.FileInputComponent = FileInputComponent;
+    exports.FlyoutComponent = FlyoutComponent;
     exports.FormParentComponent = FormParentComponent;
     exports.GenericDialogComponent = GenericDialogComponent;
+    exports.GetMaxHeightDirective = GetMaxHeightDirective;
+    exports.IconComponent = IconComponent;
+    exports.ImageSliderComponent = ImageSliderComponent;
+    exports.IntegerCurrency = IntegerCurrency;
+    exports.KMSAccordionItemComponent = KMSAccordionItemComponent;
     exports.KmsUiPresentationalComponent = KmsUiPresentationalComponent;
     exports.KmsUiPresentationalModule = KmsUiPresentationalModule;
     exports.KmsUiPresentationalService = KmsUiPresentationalService;
+    exports.LoaderComponent = LoaderComponent;
+    exports.MapComponent = MapComponent;
+    exports.Marker = Marker;
+    exports.MarkerLabel = MarkerLabel;
+    exports.MarkerOptions = MarkerOptions;
+    exports.MouseWheelDirective = MouseWheelDirective;
+    exports.RadioButtonComponent = RadioButtonComponent;
+    exports.SafeHtmlPipe = SafeHtmlPipe;
+    exports.SafeResourceUrlPipe = SafeResourceUrlPipe;
+    exports.SafeStylePipe = SafeStylePipe;
+    exports.SafeUrlPipe = SafeUrlPipe;
+    exports.SalutationDropdownComponent = SalutationDropdownComponent;
+    exports.SalutationRadiogroupComponent = SalutationRadiogroupComponent;
+    exports.SwipeDirective = SwipeDirective;
+    exports.TimeInputComponent = TimeInputComponent;
+    exports.ToNumberPipe = ToNumberPipe;
+    exports.TooltipComponent = TooltipComponent;
+    exports.TooltipDirective = TooltipDirective;
+    exports.TooltipIconComponent = TooltipIconComponent;
+    exports.TrimPipe = TrimPipe;
+    exports.TypeofPipe = TypeofPipe;
     exports.ViewportService = ViewportService;
-    exports["ɵa"] = ActionsParentComponent;
-    exports["ɵb"] = BackToTopComponent;
-    exports["ɵba"] = SafeResourceUrlPipe;
-    exports["ɵbb"] = SafeUrlPipe;
-    exports["ɵbc"] = EncodeUriPipe;
-    exports["ɵbd"] = DecodeUriPipe;
-    exports["ɵbe"] = TypeofPipe;
-    exports["ɵbf"] = TrimPipe;
-    exports["ɵbg"] = ToNumberPipe;
-    exports["ɵbh"] = SwipeDirective;
-    exports["ɵbi"] = MouseWheelDirective;
-    exports["ɵbj"] = GetMaxHeightDirective;
-    exports["ɵbk"] = TooltipDirective;
-    exports["ɵc"] = ButtonWithConfirmDialogComponent;
-    exports["ɵd"] = CheckboxComponent;
-    exports["ɵe"] = ColorInputComponent;
-    exports["ɵf"] = FormControlParentComponent;
-    exports["ɵg"] = DropdownFromDataComponent;
-    exports["ɵh"] = EnumRadiogroupComponent;
-    exports["ɵi"] = FileInputComponent;
-    exports["ɵj"] = FlyoutComponent;
-    exports["ɵl"] = IconComponent;
-    exports["ɵm"] = ImageSliderComponent;
-    exports["ɵn"] = KMSAccordionItemComponent;
-    exports["ɵo"] = LoaderComponent;
-    exports["ɵp"] = MapComponent;
-    exports["ɵq"] = RadioButtonComponent;
-    exports["ɵr"] = SalutationDropdownComponent;
-    exports["ɵs"] = SalutationRadiogroupComponent;
-    exports["ɵt"] = TimeInputComponent;
-    exports["ɵu"] = TooltipComponent;
-    exports["ɵv"] = TooltipIconComponent;
-    exports["ɵw"] = YesNoRadiogroupComponent;
-    exports["ɵx"] = IntegerCurrency;
-    exports["ɵy"] = SafeHtmlPipe;
-    exports["ɵz"] = SafeStylePipe;
+    exports.YesNoRadiogroupComponent = YesNoRadiogroupComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });