@kms-ngx-ui/presentational 0.0.19 → 0.0.21

package/fesm2015/kms-ngx-ui-presentational.js

@@ -1,54 +1,78 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, Renderer2, ViewChild, ApplicationRef, ChangeDetectorRef, Pipe, NgModule, VERSION, Inject, PLATFORM_ID, HostListener, NgZone, Directive, ElementRef } from '@angular/core';
-import { CurrencyPipe, CommonModule, isPlatformBrowser } from '@angular/common';
-import { NG_VALUE_ACCESSOR, FormBuilder, FormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, VERSION, Directive, HostListener, Pipe, NgModule, PLATFORM_ID, Inject } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule, CurrencyPipe, isPlatformBrowser } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i1$2 from '@angular/platform-browser';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2$3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1$3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { trigger, state, style } from '@angular/animations';
-import { DomSanitizer } from '@angular/platform-browser';
+import * as i2$4 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { Subject } from 'rxjs';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { SubSink } from 'subsink';
+import * as i2$5 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import { MatButtonModule } from '@angular/material/button';
-import { MatExpansionModule } from '@angular/material/expansion';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i4 from '@angular/material/core';
+import { SubSink } from 'subsink';
+import * as i1$4 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { EnumValues } from 'enum-values/src/enumValues';
 import { moveItemInArray } from '@angular/cdk/drag-drop';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i2$6 from 'ngx-useful-swiper';
 import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
 
 class KmsUiPresentationalService {
     constructor() { }
 }
-KmsUiPresentationalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function KmsUiPresentationalService_Factory() { return new KmsUiPresentationalService(); }, token: KmsUiPresentationalService, providedIn: "root" });
-KmsUiPresentationalService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-KmsUiPresentationalService.ctorParameters = () => [];
+KmsUiPresentationalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KmsUiPresentationalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
 
 class KmsUiPresentationalComponent {
     constructor() { }
     ngOnInit() {
     }
 }
-KmsUiPresentationalComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'lib-kms-ngx-ui-presentational',
-                template: `
+KmsUiPresentationalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KmsUiPresentationalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KmsUiPresentationalComponent, selector: "lib-kms-ngx-ui-presentational", ngImport: i0, template: `
+    <p>
+      kms-ngx-ui-presentational works!
+    </p>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-kms-ngx-ui-presentational',
+                    template: `
     <p>
       kms-ngx-ui-presentational works!
     </p>
-  `
-            },] }
-];
-KmsUiPresentationalComponent.ctorParameters = () => [];
+  `,
+                    styles: []
+                }]
+        }], ctorParameters: function () { return []; } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -82,20 +106,27 @@ class ActionsParentComponent {
         this.select.emit(id);
     }
 }
-ActionsParentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'kms-actions',
-                template: ''
-            },] }
-];
-ActionsParentComponent.propDecorators = {
-    disabled: [{ type: Input }],
-    checked: [{ type: Input }],
-    label: [{ type: Input }],
-    link: [{ type: Input }],
-    initialValue: [{ type: Input }],
-    select: [{ type: Output }]
-};
+ActionsParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionsParentComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsParentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-actions',
+                    template: '',
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], initialValue: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -136,26 +167,35 @@ class CheckboxComponent extends ActionsParentComponent {
         this.onTouch = fn;
     }
 }
-CheckboxComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => CheckboxComponent),
-                        multi: true,
-                    },
-                ],
-                styles: [""]
-            },] }
-];
-CheckboxComponent.ctorParameters = () => [];
-CheckboxComponent.propDecorators = {
-    infoText: [{ type: Input }],
-    name: [{ type: Input }],
-    select: [{ type: Output }]
-};
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "kms-checkbox", inputs: { infoText: "infoText", name: "name" }, outputs: { select: "select" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => CheckboxComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [""], components: [{ type: i1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-checkbox',
+                    templateUrl: './checkbox.component.html',
+                    styleUrls: ['./checkbox.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { infoText: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -218,19 +258,19 @@ class FormParentComponent {
         });
     }
 }
-FormParentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'kms-form',
-                template: ''
-            },] }
-];
-FormParentComponent.ctorParameters = () => [
-    { type: FormBuilder }
-];
-FormParentComponent.propDecorators = {
-    formDataChanged: [{ type: Output }],
-    disabled: [{ type: Input }]
-};
+FormParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormParentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+FormParentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormParentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-form',
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { formDataChanged: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
 
 class FormControlParentComponent extends FormParentComponent {
     constructor(formBuilder, renderer) {
@@ -286,21 +326,306 @@ class FormControlParentComponent extends FormParentComponent {
         return this.form.valid ? null : false;
     }
 }
-FormControlParentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'kms-formControlParent',
-                template: ''
-            },] }
-];
-FormControlParentComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
-FormControlParentComponent.propDecorators = {
-    defaultDataOverride: [{ type: Input }],
-    onSelectItemEmitter: [{ type: Output }],
-    child: [{ type: ViewChild, args: ['child',] }]
-};
+FormControlParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlParentComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FormControlParentComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlParentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-formControlParent',
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { defaultDataOverride: [{
+                type: Input
+            }], onSelectItemEmitter: [{
+                type: Output
+            }], child: [{
+                type: ViewChild,
+                args: ['child']
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+/**
+ * Attached File DTO
+ */
+class AttachedFileDTO {
+}
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+var IconSize$1;
+(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$1 || (IconSize$1 = {}));
+
+/**
+ * @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
+ */
+class IconComponent {
+    constructor(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 = VERSION.full;
+        this.timestamp = 0;
+        this.iconToShow = this.icon;
+    }
+    ngOnInit() {
+        this.iconToShow = this.icon;
+        const d = new Date();
+        const n = d.getTime();
+        this.timestamp = n;
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IconComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵ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, 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: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-icon',
+                    templateUrl: './icon.component.html',
+                    styleUrls: ['./icon.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], iconStyle: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], dontUseSprite: [{
+                type: Input
+            }] } });
+
+class TooltipDirective {
+    constructor(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;
+    }
+    onMouseEnter() {
+        if (!this.tooltipOnlyonclick) {
+            this.show();
+        }
+    }
+    onClick() {
+        if (this.tooltipOnlyonclick) {
+            this.show();
+        }
+    }
+    onMouseLeave() {
+        if (this.tooltipElem) {
+            this.hide();
+        }
+    }
+    show() {
+        if (!this.tooltipElem) {
+            this.create();
+            this.setPosition();
+        }
+        this.renderer.addClass(this.tooltipElem, 'tooltip-show');
+    }
+    hide() {
+        this.renderer.removeClass(this.tooltipElem, 'tooltip-show');
+        window.setTimeout(() => {
+        }, this.tooltipDelay);
+    }
+    create() {
+        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`);
+    }
+    setPosition() {
+        if (this.tooltipElem) {
+            const hostPos = this.el.nativeElement.getBoundingClientRect();
+            const tooltipPos = this.tooltipElem.getBoundingClientRect();
+            let top, left;
+            if (this.tooltipPlaceIntoHost) {
+                left = 0;
+                top = hostPos.height;
+            }
+            else {
+                const 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`);
+        }
+    }
+}
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kmsTooltip]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipTitle: [{
+                type: Input,
+                args: ['tooltipTitle']
+            }], tooltipText: [{
+                type: Input,
+                args: ['tooltipText']
+            }], tooltipLinkText: [{
+                type: Input,
+                args: ['tooltipLinkText']
+            }], tooltipLinkUrl: [{
+                type: Input,
+                args: ['tooltipLinkUrl']
+            }], tooltipPlacement: [{
+                type: Input,
+                args: ['tooltipPlacement']
+            }], tooltipDelay: [{
+                type: Input,
+                args: ['tooltipDelay']
+            }], tooltipPlaceIntoHost: [{
+                type: Input,
+                args: ['tooltipPlaceIntoHost']
+            }], tooltipOnlyonclick: [{
+                type: Input,
+                args: ['tooltipOnlyonclick']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class TooltipIconComponent {
+    constructor() {
+        this.tooltipTitle = "";
+        this.tooltipText = "";
+        this.tooltipLinkText = "";
+        this.tooltipLinkUrl = "";
+        this.placement = "";
+        this.delay = 1000;
+        this.IconSize = IconSize$1;
+    }
+}
+TooltipIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipIconComponent.ɵcmp = i0.ɵɵ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, 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: [""], 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-tooltip-icon',
+                    templateUrl: './tooltip-icon.component.html',
+                    styleUrls: ['./tooltip-icon.component.scss']
+                }]
+        }], propDecorators: { tooltipTitle: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], tooltipLinkText: [{
+                type: Input
+            }], tooltipLinkUrl: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }] } });
 
 class ColorInputComponent extends FormControlParentComponent {
     constructor(formBuilder, renderer) {
@@ -344,29 +669,35 @@ class ColorInputComponent extends FormControlParentComponent {
         this.change(color);
     }
 }
-ColorInputComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => ColorInputComponent),
-                        multi: true,
-                    },
-                ],
-                styles: [""]
-            },] }
-];
-ColorInputComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
-ColorInputComponent.propDecorators = {
-    label: [{ type: Input }],
-    tooltipText: [{ type: Input }],
-    placeholder: [{ type: Input }]
-};
+ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorInputComponent, selector: "kms-color-input", inputs: { label: "label", tooltipText: "tooltipText", placeholder: "placeholder" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorInputComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, 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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i5.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$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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-color-input',
+                    templateUrl: './color-input.component.html',
+                    styleUrls: ['./color-input.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorInputComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { label: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -410,26 +741,35 @@ class RadioButtonComponent extends ActionsParentComponent {
         this.onTouch = fn;
     }
 }
-RadioButtonComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => RadioButtonComponent),
-                        multi: true,
-                    },
-                ],
-                styles: [""]
-            },] }
-];
-RadioButtonComponent.ctorParameters = () => [];
-RadioButtonComponent.propDecorators = {
-    name: [{ type: Input }],
-    id: [{ type: Input }],
-    formControl: [{ type: Input }]
-};
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", formControl: "formControl" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RadioButtonComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, 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", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-radiobutton',
+                    templateUrl: './radiobutton.component.html',
+                    styleUrls: ['./radiobutton.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], formControl: [{
+                type: Input
+            }] } });
 
 class TimeInputComponent {
     constructor(formBuilder) {
@@ -491,23 +831,29 @@ class TimeInputComponent {
         this.onTouch = fn;
     }
 }
-TimeInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'kms-time-input',
-                template: "<form [formGroup]=\"form\" class=\"timeInput\">\r\n    <input type=\"number\" formControlName=\"h\" [value]=\"h\" maxlength=\"2\" min=\"0\" max=\"23\" />\r\n    <span>:</span>\r\n    <input type=\"number\" formControlName=\"m\" [value]=\"m\" maxlength=\"2\" min=\"0\" max=\"59\"/>\r\n</form>",
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => TimeInputComponent),
-                        multi: true,
-                    },
-                ],
-                styles: [""]
-            },] }
-];
-TimeInputComponent.ctorParameters = () => [
-    { type: FormBuilder }
-];
+TimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+TimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimeInputComponent, selector: "kms-time-input", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TimeInputComponent),
+            multi: true,
+        },
+    ], ngImport: i0, 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-time-input',
+                    templateUrl: './time-input.component.html',
+                    styleUrls: ['./time-input.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TimeInputComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; } });
 
 class YesNoRadiogroupComponent {
     constructor(formBuilder, renderer) {
@@ -556,64 +902,39 @@ class YesNoRadiogroupComponent {
         });
     }
 }
-YesNoRadiogroupComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => YesNoRadiogroupComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-YesNoRadiogroupComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
-YesNoRadiogroupComponent.propDecorators = {
-    header: [{ type: Input }],
-    disabled: [{ type: Input }],
-    textYes: [{ type: Input }],
-    textNo: [{ type: Input }],
-    child: [{ type: ViewChild, args: ['child',] }]
-};
-
-/*!
- * @copyright FLYACTS GmbH 2019
- */
-var IconSize$1;
-(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$1 || (IconSize$1 = {}));
-
-/**
- * @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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YesNoRadiogroupComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+YesNoRadiogroupComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => YesNoRadiogroupComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0, 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", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: YesNoRadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-yesno-radiogroup',
+                    templateUrl: './yes-no-radiogroup.component.html',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YesNoRadiogroupComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { header: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], textYes: [{
+                type: Input
+            }], textNo: [{
+                type: Input
+            }], child: [{
+                type: ViewChild,
+                args: ['child']
+            }] } });
 
 // Max size in bytes of uploaded image
 const MAX_SIZE_BYTES = 2097152;
@@ -788,42 +1109,58 @@ class FileInputComponent {
         element.value = '';
     }
 }
-FileInputComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => FileInputComponent),
-                        multi: true,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        useExisting: forwardRef(() => FileInputComponent),
-                        multi: true,
-                    },
-                ],
-                styles: [""]
-            },] }
-];
-FileInputComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: ApplicationRef },
-    { type: ChangeDetectorRef },
-    { type: Renderer2 }
-];
-FileInputComponent.propDecorators = {
-    fileInput: [{ type: ViewChild, args: ['fileInput',] }],
-    label: [{ type: Input }],
-    previewImage: [{ type: Input }],
-    allowRemove: [{ type: Input }],
-    previewImageText: [{ type: Input }],
-    maxSizeBytes: [{ type: Input }],
-    resizePixels: [{ type: Input }],
-    acceptedFileMimetypes: [{ type: Input }],
-    formDataChanged: [{ type: Output }]
-};
+FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileInputComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FileInputComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FileInputComponent),
+            multi: true,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => FileInputComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, 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>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { type: i2$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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-file-input',
+                    templateUrl: './file-input.component.html',
+                    styleUrls: ['./file-input.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => FileInputComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], label: [{
+                type: Input
+            }], previewImage: [{
+                type: Input
+            }], allowRemove: [{
+                type: Input
+            }], previewImageText: [{
+                type: Input
+            }], maxSizeBytes: [{
+                type: Input
+            }], resizePixels: [{
+                type: Input
+            }], acceptedFileMimetypes: [{
+                type: Input
+            }], formDataChanged: [{
+                type: Output
+            }] } });
 
 class LoaderComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -833,25 +1170,117 @@ class LoaderComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ngOnInit() { }
 }
-LoaderComponent.decorators = [
-    { type: 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 = () => [];
-LoaderComponent.propDecorators = {
-    loading: [{ type: Input }]
-};
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, 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: [""], components: [{ type: i1$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-loader',
+                    templateUrl: './loader.component.html',
+                    styleUrls: ['./loader.component.scss'],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { loading: [{
+                type: Input
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
  */
-class FlyoutComponent {
-    constructor() {
-        this.icon = 'filter';
-        this.isDropdownOpened = false;
+/**
+ * Directive to calc the height of all inner elements
+ */
+class GetMaxHeightDirective {
+    constructor(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 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 EventEmitter();
+    }
+    ngAfterContentChecked() {
+        this.checkHeightOfChildren(this.el.nativeElement, this.cssClassName);
+    }
+    checkHeightOfChildren(parent, cssClassName) {
+        if (!parent) {
+            return;
+        }
+        // find all the child elements with the selected class name
+        const children = parent.getElementsByClassName(cssClassName);
+        // failsafe
+        if (!children) {
+            return;
+        }
+        // get all the child elements heights
+        const itemHeights = Array.from(children).map((x) => x.getBoundingClientRect().height);
+        // failsafe
+        if (itemHeights.length === 0) {
+            return;
+        }
+        // find out the tallest element
+        const maxHeight = itemHeights.reduce((prev, curr) => {
+            return curr > prev ? curr : prev;
+        }, 0);
+        // get sum of heights
+        const sumOfHeight = itemHeights.reduce((pv, cv) => pv + cv, 0);
+        // inform
+        this.maxHeightChanged.emit(maxHeight);
+        this.sumOfHeight.emit(sumOfHeight);
+    }
+}
+GetMaxHeightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GetMaxHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+GetMaxHeightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: { cssClassName: ["getMaxHeight", "cssClassName"] }, outputs: { maxHeightChanged: "maxHeightChanged", sumOfHeight: "sumOfHeight" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GetMaxHeightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[getMaxHeight]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cssClassName: [{
+                type: Input,
+                args: ['getMaxHeight']
+            }], maxHeightChanged: [{
+                type: Output
+            }], sumOfHeight: [{
+                type: Output
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class SafeHtmlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+}
+SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeHtmlPipe, name: "kmsSafeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsSafeHtml',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class FlyoutComponent {
+    constructor() {
+        this.icon = 'filter';
+        this.isDropdownOpened = false;
         this.targetHeight = '0';
         this.animationTime = 5000;
         this.headerCssClass = '';
@@ -884,52 +1313,84 @@ class FlyoutComponent {
         this.targetHeight = `${contentHeight}px`;
     }
 }
-FlyoutComponent.decorators = [
-    { type: 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: [
-                    trigger('dropdownAnimation', [
-                        state('true', style({
-                            height: '{{targetHeight}}',
-                            transition: 'height {{animationTime}}ms ease-in-out',
-                        }), {
-                            params: {
-                                targetHeight: '300px',
-                                animationTime: 3000,
-                            },
-                        }),
-                        state('false', style({
-                            height: 0,
-                            transition: 'height {{animationTime}}ms ease-in-out',
-                        }), {
-                            params: {
-                                targetHeight: '300px',
-                                opacity: 0,
-                                animationTime: 3000,
-                            },
-                        }),
-                    ]),
-                ],
-                styles: [""]
-            },] }
-];
-FlyoutComponent.propDecorators = {
-    icon: [{ type: Input }],
-    headerCssClass: [{ type: Input }],
-    bodyCssClass: [{ type: Input }],
-    headerTitle: [{ type: Input }],
-    headerText: [{ type: Input }],
-    hasButtonForMore: [{ type: Input }],
-    moreText: [{ type: Input }],
-    lessText: [{ type: Input }],
-    content: [{ type: ViewChild, args: ['content',] }],
-    flyoutHeader: [{ type: ViewChild, args: ['flyoutHeader',] }]
-};
+FlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlyoutComponent.ɵcmp = i0.ɵɵ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, 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", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }], pipes: { "kmsSafeHtml": SafeHtmlPipe }, animations: [
+        trigger('dropdownAnimation', [
+            state('true', style({
+                height: '{{targetHeight}}',
+                transition: 'height {{animationTime}}ms ease-in-out',
+            }), {
+                params: {
+                    targetHeight: '300px',
+                    animationTime: 3000,
+                },
+            }),
+            state('false', style({
+                height: 0,
+                transition: 'height {{animationTime}}ms ease-in-out',
+            }), {
+                params: {
+                    targetHeight: '300px',
+                    opacity: 0,
+                    animationTime: 3000,
+                },
+            }),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlyoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-flyout',
+                    templateUrl: './flyout.component.html',
+                    styleUrls: ['./flyout.component.scss'],
+                    animations: [
+                        trigger('dropdownAnimation', [
+                            state('true', style({
+                                height: '{{targetHeight}}',
+                                transition: 'height {{animationTime}}ms ease-in-out',
+                            }), {
+                                params: {
+                                    targetHeight: '300px',
+                                    animationTime: 3000,
+                                },
+                            }),
+                            state('false', style({
+                                height: 0,
+                                transition: 'height {{animationTime}}ms ease-in-out',
+                            }), {
+                                params: {
+                                    targetHeight: '300px',
+                                    opacity: 0,
+                                    animationTime: 3000,
+                                },
+                            }),
+                        ]),
+                    ],
+                }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], headerCssClass: [{
+                type: Input
+            }], bodyCssClass: [{
+                type: Input
+            }], headerTitle: [{
+                type: Input
+            }], headerText: [{
+                type: Input
+            }], hasButtonForMore: [{
+                type: Input
+            }], moreText: [{
+                type: Input
+            }], lessText: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: ['content']
+            }], flyoutHeader: [{
+                type: ViewChild,
+                args: ['flyoutHeader']
+            }] } });
 
-/**
- * @copyright KMS GmbH
- */
 class IntegerCurrency {
     constructor(cp) {
         this.cp = cp;
@@ -945,14 +1406,14 @@ class IntegerCurrency {
         }
     }
 }
-IntegerCurrency.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsIntegerCurrency',
-            },] }
-];
-IntegerCurrency.ctorParameters = () => [
-    { type: CurrencyPipe }
-];
+IntegerCurrency.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IntegerCurrency, deps: [{ token: i2.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe });
+IntegerCurrency.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IntegerCurrency, name: "kmsIntegerCurrency" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IntegerCurrency, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsIntegerCurrency',
+                }]
+        }], ctorParameters: function () { return [{ type: i2.CurrencyPipe }]; } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -962,11 +1423,14 @@ class DecodeUriPipe {
         return decodeURI(value);
     }
 }
-DecodeUriPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsDecodeUri',
-            },] }
-];
+DecodeUriPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecodeUriPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DecodeUriPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecodeUriPipe, name: "kmsDecodeUri" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DecodeUriPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsDecodeUri',
+                }]
+        }] });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -976,31 +1440,14 @@ class EncodeUriPipe {
         return encodeURI(value);
     }
 }
-EncodeUriPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsEncodeUri',
-            },] }
-];
-
-/*!
- * @copyright FLYACTS GmbH 2019
- */
-class SafeHtmlPipe {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    transform(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
-    }
-}
-SafeHtmlPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsSafeHtml',
-            },] }
-];
-SafeHtmlPipe.ctorParameters = () => [
-    { type: DomSanitizer }
-];
+EncodeUriPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EncodeUriPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+EncodeUriPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EncodeUriPipe, name: "kmsEncodeUri" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EncodeUriPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsEncodeUri',
+                }]
+        }] });
 
 /**
  * @copyright KMS GmbH
@@ -1013,14 +1460,14 @@ class SafeStylePipe {
         return this.sanitizer.bypassSecurityTrustStyle(style);
     }
 }
-SafeStylePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsSafeStyle',
-            },] }
-];
-SafeStylePipe.ctorParameters = () => [
-    { type: DomSanitizer }
-];
+SafeStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeStylePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeStylePipe, name: "kmsSafeStyle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeStylePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsSafeStyle',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
 
 /**
  * @copyright KMS GmbH
@@ -1033,14 +1480,14 @@ class SafeUrlPipe {
         return this.sanitizer.bypassSecurityTrustUrl(url);
     }
 }
-SafeUrlPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsSafeSUrl',
-            },] }
-];
-SafeUrlPipe.ctorParameters = () => [
-    { type: DomSanitizer }
-];
+SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeUrlPipe, name: "kmsSafeSUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsSafeSUrl',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
 
 /**
  * @copyright KMS GmbH
@@ -1053,25 +1500,28 @@ class SafeResourceUrlPipe {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
 }
-SafeResourceUrlPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsSafeResourceSUrl',
-            },] }
-];
-SafeResourceUrlPipe.ctorParameters = () => [
-    { type: DomSanitizer }
-];
+SafeResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeResourceUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeResourceUrlPipe, name: "kmsSafeResourceSUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SafeResourceUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsSafeResourceSUrl',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
 
 class TypeofPipe {
     transform(value) {
         return typeof value;
     }
 }
-TypeofPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsTypeOf',
-            },] }
-];
+TypeofPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TypeofPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TypeofPipe, name: "kmsTypeOf" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TypeofPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsTypeOf',
+                }]
+        }] });
 
 /**
  * @copyright KMS GmbH
@@ -1084,9 +1534,12 @@ class TrimPipe {
         return value.trim();
     }
 }
-TrimPipe.decorators = [
-    { type: Pipe, args: [{ name: 'kmsTrim' },] }
-];
+TrimPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TrimPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TrimPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TrimPipe, name: "kmsTrim" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TrimPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'kmsTrim' }]
+        }] });
 
 /**
  * @copyright KMS GmbH
@@ -1099,109 +1552,73 @@ class ToNumberPipe {
         return parseInt(items, 10);
     }
 }
-ToNumberPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'kmsToNumber',
-                pure: false
-            },] }
-];
+ToNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ToNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToNumberPipe, name: "kmsToNumber", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsToNumber',
+                    pure: false
+                }]
+        }] });
 
 /**
  * @copyright KMS GmbH
  */
 class CustomPipesModule {
 }
-CustomPipesModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    IntegerCurrency,
-                    SafeHtmlPipe,
-                    SafeStylePipe,
-                    SafeResourceUrlPipe,
-                    SafeUrlPipe,
-                    EncodeUriPipe,
-                    DecodeUriPipe,
-                    TypeofPipe,
-                    TrimPipe,
-                    ToNumberPipe,
-                ],
-                imports: [CommonModule],
-                exports: [
-                    IntegerCurrency,
-                    SafeHtmlPipe,
-                    SafeStylePipe,
-                    SafeResourceUrlPipe,
-                    SafeUrlPipe,
-                    EncodeUriPipe,
-                    DecodeUriPipe,
-                    TypeofPipe,
-                    TrimPipe,
-                    ToNumberPipe,
-                ],
-                providers: [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
- */
-class IconComponent {
-    constructor(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 = VERSION.full;
-        this.timestamp = 0;
-        this.iconToShow = this.icon;
-    }
-    ngOnInit() {
-        this.iconToShow = this.icon;
-        const d = new Date();
-        const n = d.getTime();
-        this.timestamp = n;
-    }
-}
-IconComponent.decorators = [
-    { type: 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 = () => [
-    { type: DomSanitizer }
-];
-IconComponent.propDecorators = {
-    icon: [{ type: Input }],
-    iconClass: [{ type: Input }],
-    iconStyle: [{ type: Input }],
-    iconSize: [{ type: Input }],
-    dontUseSprite: [{ type: Input }]
-};
+CustomPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CustomPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomPipesModule, declarations: [IntegerCurrency,
+        SafeHtmlPipe,
+        SafeStylePipe,
+        SafeResourceUrlPipe,
+        SafeUrlPipe,
+        EncodeUriPipe,
+        DecodeUriPipe,
+        TypeofPipe,
+        TrimPipe,
+        ToNumberPipe], imports: [CommonModule], exports: [IntegerCurrency,
+        SafeHtmlPipe,
+        SafeStylePipe,
+        SafeResourceUrlPipe,
+        SafeUrlPipe,
+        EncodeUriPipe,
+        DecodeUriPipe,
+        TypeofPipe,
+        TrimPipe,
+        ToNumberPipe] });
+CustomPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomPipesModule, providers: [CurrencyPipe], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        IntegerCurrency,
+                        SafeHtmlPipe,
+                        SafeStylePipe,
+                        SafeResourceUrlPipe,
+                        SafeUrlPipe,
+                        EncodeUriPipe,
+                        DecodeUriPipe,
+                        TypeofPipe,
+                        TrimPipe,
+                        ToNumberPipe,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        IntegerCurrency,
+                        SafeHtmlPipe,
+                        SafeStylePipe,
+                        SafeResourceUrlPipe,
+                        SafeUrlPipe,
+                        EncodeUriPipe,
+                        DecodeUriPipe,
+                        TypeofPipe,
+                        TrimPipe,
+                        ToNumberPipe,
+                    ],
+                    providers: [CurrencyPipe],
+                }]
+        }] });
 
 class EnumRadiogroupComponent extends FormControlParentComponent {
     constructor(formBuilder, renderer) {
@@ -1223,28 +1640,34 @@ class EnumRadiogroupComponent extends FormControlParentComponent {
         super.ngOnInit();
     }
 }
-EnumRadiogroupComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => EnumRadiogroupComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-EnumRadiogroupComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
-EnumRadiogroupComponent.propDecorators = {
-    header: [{ type: Input }],
-    optionsEnum: [{ type: Input }],
-    translationPrefix: [{ type: Input }]
-};
+EnumRadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EnumRadiogroupComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+EnumRadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EnumRadiogroupComponent, selector: "kms-enum-radiogroup", inputs: { header: "header", optionsEnum: "optionsEnum", translationPrefix: "translationPrefix" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => EnumRadiogroupComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, 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>", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-enum-radiogroup',
+                    templateUrl: './enum-radiogroup.component.html',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EnumRadiogroupComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { header: [{
+                type: Input
+            }], optionsEnum: [{
+                type: Input
+            }], translationPrefix: [{
+                type: Input
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -1258,27 +1681,31 @@ class KMSAccordionItemComponent {
         this.itemTitle = '';
         this.showAsCard = false;
         this.isSmall = false;
+        this.expanded = false;
         this.panelOpenState = false;
     }
     ngOnInit() {
         this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(this.itemTitle);
     }
 }
-KMSAccordionItemComponent.decorators = [
-    { type: 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 = () => [
-    { type: DomSanitizer }
-];
-KMSAccordionItemComponent.propDecorators = {
-    itemTitle: [{ type: Input }],
-    showAsCard: [{ type: Input }],
-    isSmall: [{ type: Input }]
-};
+KMSAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+KMSAccordionItemComponent.ɵcmp = i0.ɵɵ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, 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$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-accordion-item',
+                    templateUrl: './kms-accordion-item.component.html',
+                    styleUrls: ['./kms-accordion-item.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { itemTitle: [{
+                type: Input
+            }], showAsCard: [{
+                type: Input
+            }], isSmall: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }] } });
 
 /**
  * @copyright KMS GmbH
@@ -1483,12 +1910,14 @@ class ViewportService {
         }
     }
 }
-ViewportService.decorators = [
-    { type: Injectable }
-];
-ViewportService.ctorParameters = () => [
-    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
-];
+ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -1611,19 +2040,18 @@ class MapComponent {
         }
     }
 }
-MapComponent.decorators = [
-    { type: 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 = () => [
-    { type: ViewportService }
-];
-MapComponent.propDecorators = {
-    data: [{ type: Input }]
-};
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapComponent, deps: [{ token: ViewportService }], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, 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: [""], components: [{ type: i2$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-map',
+                    templateUrl: './map.component.html',
+                    styleUrls: ['./map.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: ViewportService }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
 
 // TODO change values after cleaned up database
 var SalutationEnum;
@@ -1657,79 +2085,48 @@ class SalutationDropdownComponent extends FormControlParentComponent {
         super.ngOnInit();
     }
 }
-SalutationDropdownComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => SalutationDropdownComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-SalutationDropdownComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
-SalutationDropdownComponent.propDecorators = {
-    placeholder: [{ type: Input }]
-};
+SalutationDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SalutationDropdownComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SalutationDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SalutationDropdownComponent, selector: "kms-salutation-dropdown", inputs: { placeholder: "placeholder" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SalutationDropdownComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, 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>", components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-salutation-dropdown',
+                    templateUrl: './salutation-dropdown.component.html',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SalutationDropdownComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }] } });
 
 class TooltipComponent {
     constructor() {
         this.tooltipTitle = "";
     }
 }
-TooltipComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'kms-tooltip-element',
-                template: "<ng-content></ng-content>",
-                styles: ["[kmsTooltip]{position:relative}\n"]
-            },] }
-];
-TooltipComponent.propDecorators = {
-    tooltipTitle: [{ type: Input }]
-};
-
-/*!
- * @copyright FLYACTS GmbH 2019
- */
-
-/**
- * Attached File DTO
- */
-class AttachedFileDTO {
-}
-
-class TooltipIconComponent {
-    constructor() {
-        this.tooltipTitle = "";
-        this.tooltipText = "";
-        this.tooltipLinkText = "";
-        this.tooltipLinkUrl = "";
-        this.placement = "";
-        this.delay = 1000;
-        this.IconSize = IconSize$1;
-    }
-}
-TooltipIconComponent.decorators = [
-    { type: 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: Input }],
-    tooltipText: [{ type: Input }],
-    tooltipLinkText: [{ type: Input }],
-    tooltipLinkUrl: [{ type: Input }],
-    placement: [{ type: Input }],
-    delay: [{ type: Input }]
-};
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipComponent, selector: "kms-tooltip-element", inputs: { tooltipTitle: "tooltipTitle" }, ngImport: i0, template: "<ng-content></ng-content>", styles: ["[kmsTooltip]{position:relative}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-tooltip-element',
+                    templateUrl: './tooltip.component.html',
+                    styleUrls: ['./tooltip.component.scss']
+                }]
+        }], propDecorators: { tooltipTitle: [{
+                type: Input
+            }] } });
 
 class SalutationRadiogroupComponent extends FormControlParentComponent {
     constructor(formBuilder, renderer) {
@@ -1752,23 +2149,28 @@ class SalutationRadiogroupComponent extends FormControlParentComponent {
         super.ngOnInit();
     }
 }
-SalutationRadiogroupComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => SalutationRadiogroupComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-SalutationRadiogroupComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
+SalutationRadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SalutationRadiogroupComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SalutationRadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SalutationRadiogroupComponent, selector: "kms-salutation-radiogroup", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SalutationRadiogroupComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, 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>", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-salutation-radiogroup',
+                    templateUrl: './salutation-radiogroup.component.html',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SalutationRadiogroupComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; } });
 
 /**
  * @copyright KMS GmbH
@@ -1801,18 +2203,21 @@ class BackToTopComponent {
         }
     }
 }
-BackToTopComponent.decorators = [
-    { type: 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 = () => [
-    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
-];
-BackToTopComponent.propDecorators = {
-    onWindowScroll: [{ type: HostListener, args: ['window:scroll', [],] }]
-};
+BackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, 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>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BackToTopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-back-to-top',
+                    templateUrl: './back-to-top.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; }, propDecorators: { onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
 
 var ButtonResponseType;
 (function (ButtonResponseType) {
@@ -1857,18 +2262,19 @@ class GenericDialogComponent {
         });
     }
 }
-GenericDialogComponent.decorators = [
-    { type: 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 = () => [
-    { type: MatDialogRef },
-    { type: NgZone },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
+GenericDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GenericDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: i0.NgZone }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+GenericDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GenericDialogComponent, selector: "kms-generic-dialog", ngImport: i0, 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: [""], components: [{ type: i2$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$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GenericDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-generic-dialog',
+                    templateUrl: './generic-dialog.component.html',
+                    styleUrls: ['./generic-dialog.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.MatDialogRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
 
 class ButtonWithConfirmDialogComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1902,24 +2308,28 @@ class ButtonWithConfirmDialogComponent {
         });
     }
 }
-ButtonWithConfirmDialogComponent.decorators = [
-    { type: 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 = () => [
-    { type: MatDialog }
-];
-ButtonWithConfirmDialogComponent.propDecorators = {
-    disabled: [{ type: Input }],
-    buttonText: [{ type: Input }],
-    confirmTitle: [{ type: Input }],
-    confirmTextYes: [{ type: Input }],
-    confirmTextNo: [{ type: Input }],
-    onConfirmClosed: [{ type: Output }]
-};
+ButtonWithConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonWithConfirmDialogComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ButtonWithConfirmDialogComponent.ɵcmp = i0.ɵɵ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, 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: [""], components: [{ type: i2$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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonWithConfirmDialogComponent, decorators: [{
+            type: 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$4.MatDialog }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], confirmTitle: [{
+                type: Input
+            }], confirmTextYes: [{
+                type: Input
+            }], confirmTextNo: [{
+                type: Input
+            }], onConfirmClosed: [{
+                type: Output
+            }] } });
 
 /**
  * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
@@ -2030,114 +2440,309 @@ class DropdownFromDataComponent extends FormControlParentComponent {
         this.onSelectItemEmitter.emit(value);
     }
 }
-DropdownFromDataComponent.decorators = [
-    { type: 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: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => DropdownFromDataComponent),
-                        multi: true,
-                    },
-                ]
-            },] }
-];
-DropdownFromDataComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: Renderer2 }
-];
-DropdownFromDataComponent.propDecorators = {
-    optionsEnum: [{ type: Input }],
-    optionsPlainArray: [{ type: Input }],
-    optionsObjArray: [{ type: Input }],
-    mapKey: [{ type: Input }],
-    mapValue: [{ type: Input }],
-    hasNullOption: [{ type: Input }],
-    translation: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    label: [{ type: Input }],
-    required: [{ type: Input }],
-    useEnumIndexAsValue: [{ type: Input }]
-};
+DropdownFromDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+DropdownFromDataComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DropdownFromDataComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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", components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-dropdown-from-data',
+                    templateUrl: './dropdown-from-data.component.html',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DropdownFromDataComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { optionsEnum: [{
+                type: Input
+            }], optionsPlainArray: [{
+                type: Input
+            }], optionsObjArray: [{
+                type: Input
+            }], mapKey: [{
+                type: Input
+            }], mapValue: [{
+                type: Input
+            }], hasNullOption: [{
+                type: Input
+            }], translation: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], useEnumIndexAsValue: [{
+                type: Input
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
  */
-class ImageSliderComponent {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.editMode = false;
-        this.orderChanged = new EventEmitter();
-        this.deleteImageEvent = new EventEmitter();
+class SwipeDirective {
+    constructor() {
         /**
-         * 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: () => {
-                    // do something
-                },
-                slideChangeTransitionEnd: () => {
-                    // do something
-                },
-            },
-        };
-    }
-    ngOnInit() {
-        if (this.slides) {
-            // TODO use Pipe safeStyle
-            this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
-        }
-    }
-    // !TODO
-    onKeydownHandler(event) {
-        if (event.key === 'ArrowRight') {
-            this.nextSlide();
-        }
-        if (event.key === 'ArrowLeft') {
-            this.previousSlide();
-        }
+        this.moveEvent = new 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 EventEmitter();
+        this._startPosition = -1;
+        this._lastPosX = 0;
+        this._thresholdWasReached = false;
+        this._timeStart = 0;
     }
     /**
-     * Slide follows the finger or mouse according to it´s move delta.
-     * @param event SwipeMoveEvent
+     * Needed config that defines swipe behaviour.
+     * @param options SwipeOptions
      */
-    handleMoveEvent(event) {
-        // certain move threshold needs to be reached
-        if (!event.thresholdWasReached) {
-            return;
+    set config(options) {
+        if (options) {
+            this._swipeOptions = options;
         }
-        this.config.direction = event.direction === 1 ? 'horizontal' : 'vertical';
     }
+    onMouseDown(event) {
+        this.calculateStartPosition(event);
+    }
+    onMove(event) {
+        this.move(event);
+    }
+    onRelease(event) {
+        this.release(event);
+        this.reset();
+    }
+    // ** PRIVATE ** //
     /**
-     * Mouse up or slide container was left.
-     * @param event SwipeReleaseEvent
+     * Function checks if the current moving delta is inside the defined threshold.
+     * Sets the flag to true if the threshold was reached once.
      */
-    handleReleaseEvent(event) {
-        if (!event.thresholdWasReached) {
+    checkThreshold(moveEvent) {
+        const percentage = this._swipeOptions && this._swipeOptions.swipeThresholdType === '%';
+        if (!percentage && this._swipeOptions && moveEvent.swipeDistanceTotal < this._swipeOptions.swipeThreshold) {
             return;
         }
-        // Just do if user clicked to slide on image and not on arrow or other element
-        if (!this.isLastClickedInSliderImage) {
+        else if (percentage &&
+            this._swipeOptions &&
+            moveEvent.swipeDistancePercentage < this._swipeOptions.swipeThreshold / 100) {
+            return;
+        }
+        else {
+            this._thresholdWasReached = true;
+        }
+    }
+    calculateStartPosition(event) {
+        // detect if touch or click
+        this._isMobile = event.type === 'touchstart';
+        // save start position
+        if (this._swipeOptions && this._swipeOptions.swipeLocalPosition) {
+            if (this._isMobile) {
+                const 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;
+    }
+    move(event) {
+        // failsafe
+        if (typeof event === 'undefined') {
+            return;
+        }
+        let posX = 0;
+        if (this._swipeOptions) {
+            if (this._isMobile && event.type === 'touchmove') {
+                const touch = event.touches[0];
+                posX = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
+            }
+            else {
+                posX = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
+            }
+        }
+        const offsetPerFrame = posX - this._lastPosX;
+        const swipeDistanceTotal = Math.abs(posX - this._startPosition);
+        const swipeDistancePercentage = Math.abs(swipeDistanceTotal / event.target.clientWidth);
+        const timeDuration = Math.abs(event.timeStamp - this._timeStart);
+        let direction;
+        let 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);
+    }
+    release(event) {
+        // case: just a click/touch
+        if (!this._moveEventData) {
+            return;
+        }
+        const 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);
+    }
+    getEasingCurve(speed) {
+        return speed > 0.5 ? 'ease-in' : 'ease-out';
+    }
+    reset() {
+        this._startPosition = -1;
+        this._thresholdWasReached = false;
+        if (this._moveEventData) {
+            this._moveEventData = undefined;
+        }
+    }
+}
+SwipeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SwipeDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwipeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[swipeDirective]',
+                }]
+        }], propDecorators: { moveEvent: [{
+                type: Output
+            }], releaseEvent: [{
+                type: Output
+            }], config: [{
+                type: Input,
+                args: ['swipeDirective']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onMove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchmove', ['$event']]
+            }], onRelease: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchend', ['$event']]
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class ImageSliderComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.editMode = false;
+        this.orderChanged = new EventEmitter();
+        this.deleteImageEvent = new 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: () => {
+                    // do something
+                },
+                slideChangeTransitionEnd: () => {
+                    // do something
+                },
+            },
+        };
+    }
+    ngOnInit() {
+        if (this.slides) {
+            // TODO use Pipe safeStyle
+            this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+        }
+    }
+    // !TODO
+    onKeydownHandler(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
+     */
+    handleMoveEvent(event) {
+        // certain move threshold needs to be reached
+        if (!event.thresholdWasReached) {
+            return;
+        }
+        this.config.direction = event.direction === 1 ? 'horizontal' : 'vertical';
+    }
+    /**
+     * Mouse up or slide container was left.
+     * @param event SwipeReleaseEvent
+     */
+    handleReleaseEvent(event) {
+        if (!event.thresholdWasReached) {
+            return;
+        }
+        // Just do if user clicked to slide on image and not on arrow or other element
+        if (!this.isLastClickedInSliderImage) {
             return;
         }
         if (event.direction === 1) {
@@ -2214,26 +2819,34 @@ class ImageSliderComponent {
         this.deleteImageEvent.emit(index);
     }
 }
-ImageSliderComponent.decorators = [
-    { type: 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 = () => [
-    { type: DomSanitizer }
-];
-ImageSliderComponent.propDecorators = {
-    slides: [{ type: Input }],
-    editMode: [{ type: Input }],
-    imagesTOSave: [{ type: Input }],
-    orderChanged: [{ type: Output }],
-    deleteImageEvent: [{ type: Output }],
-    swipeConfig: [{ type: Input }],
-    usefulSwiper: [{ type: ViewChild, args: ['usefulSwiper',] }],
-    onKeydownHandler: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
-};
+ImageSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+ImageSliderComponent.ɵcmp = i0.ɵɵ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, 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$6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { type: i3$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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ImageSliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kms-image-slider',
+                    templateUrl: './image-slider.component.html',
+                    styleUrls: ['./image-slider.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { slides: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], imagesTOSave: [{
+                type: Input
+            }], orderChanged: [{
+                type: Output
+            }], deleteImageEvent: [{
+                type: Output
+            }], swipeConfig: [{
+                type: Input
+            }], usefulSwiper: [{
+                type: ViewChild,
+                args: ['usefulSwiper']
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
 
 /*!
  * @copyright FLYACTS GmbH 2019
@@ -2269,471 +2882,228 @@ class MouseWheelDirective {
         }
     }
 }
-MouseWheelDirective.decorators = [
-    { type: Directive, args: [{ selector: '[mouseWheel]' },] }
-];
-MouseWheelDirective.propDecorators = {
-    mouseWheelUp: [{ type: Output }],
-    mouseWheelDown: [{ type: Output }],
-    onMouseWheelChrome: [{ type: HostListener, args: ['mousewheel', ['$event'],] }],
-    onMouseWheelFirefox: [{ type: HostListener, args: ['DOMMouseScroll', ['$event'],] }],
-    onMouseWheelIE: [{ type: HostListener, args: ['onmousewheel', ['$event'],] }]
-};
-
-/*!
- * @copyright FLYACTS GmbH 2019
- */
-/**
- * Directive to calc the height of all inner elements
- */
-class GetMaxHeightDirective {
-    constructor(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 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 EventEmitter();
-    }
-    ngAfterContentChecked() {
-        this.checkHeightOfChildren(this.el.nativeElement, this.cssClassName);
-    }
-    checkHeightOfChildren(parent, cssClassName) {
-        if (!parent) {
-            return;
-        }
-        // find all the child elements with the selected class name
-        const children = parent.getElementsByClassName(cssClassName);
-        // failsafe
-        if (!children) {
-            return;
-        }
-        // get all the child elements heights
-        const itemHeights = Array.from(children).map((x) => x.getBoundingClientRect().height);
-        // failsafe
-        if (itemHeights.length === 0) {
-            return;
-        }
-        // find out the tallest element
-        const maxHeight = itemHeights.reduce((prev, curr) => {
-            return curr > prev ? curr : prev;
-        }, 0);
-        // get sum of heights
-        const sumOfHeight = itemHeights.reduce((pv, cv) => pv + cv, 0);
-        // inform
-        this.maxHeightChanged.emit(maxHeight);
-        this.sumOfHeight.emit(sumOfHeight);
-    }
-}
-GetMaxHeightDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[getMaxHeight]',
-            },] }
-];
-GetMaxHeightDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-GetMaxHeightDirective.propDecorators = {
-    cssClassName: [{ type: Input, args: ['getMaxHeight',] }],
-    maxHeightChanged: [{ type: Output }],
-    sumOfHeight: [{ type: Output }]
-};
-
-/*!
- * @copyright FLYACTS GmbH 2019
- */
-class SwipeDirective {
-    constructor() {
-        /**
-         * Output Event that is emitted during swipe process (mouse move or touch move event).
-         * Can be used for calculation purposes.
-         */
-        this.moveEvent = new 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 EventEmitter();
-        this._startPosition = -1;
-        this._lastPosX = 0;
-        this._thresholdWasReached = false;
-        this._timeStart = 0;
-    }
-    /**
-     * Needed config that defines swipe behaviour.
-     * @param options SwipeOptions
-     */
-    set config(options) {
-        if (options) {
-            this._swipeOptions = options;
-        }
-    }
-    onMouseDown(event) {
-        this.calculateStartPosition(event);
-    }
-    onMove(event) {
-        this.move(event);
-    }
-    onRelease(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.
-     */
-    checkThreshold(moveEvent) {
-        const 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;
-        }
-    }
-    calculateStartPosition(event) {
-        // detect if touch or click
-        this._isMobile = event.type === 'touchstart';
-        // save start position
-        if (this._swipeOptions && this._swipeOptions.swipeLocalPosition) {
-            if (this._isMobile) {
-                const 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;
-    }
-    move(event) {
-        // failsafe
-        if (typeof event === 'undefined') {
-            return;
-        }
-        let posX = 0;
-        if (this._swipeOptions) {
-            if (this._isMobile && event.type === 'touchmove') {
-                const touch = event.touches[0];
-                posX = this._swipeOptions.swipeLocalPosition ? touch.clientX : touch.pageX;
-            }
-            else {
-                posX = this._swipeOptions.swipeLocalPosition ? event.offsetX : event.pageX;
-            }
-        }
-        const offsetPerFrame = posX - this._lastPosX;
-        const swipeDistanceTotal = Math.abs(posX - this._startPosition);
-        const swipeDistancePercentage = Math.abs(swipeDistanceTotal / event.target.clientWidth);
-        const timeDuration = Math.abs(event.timeStamp - this._timeStart);
-        let direction;
-        let 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);
-    }
-    release(event) {
-        // case: just a click/touch
-        if (!this._moveEventData) {
-            return;
-        }
-        const 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);
-    }
-    getEasingCurve(speed) {
-        return speed > 0.5 ? 'ease-in' : 'ease-out';
-    }
-    reset() {
-        this._startPosition = -1;
-        this._thresholdWasReached = false;
-        if (this._moveEventData) {
-            this._moveEventData = undefined;
-        }
-    }
-}
-SwipeDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[swipeDirective]',
-            },] }
-];
-SwipeDirective.propDecorators = {
-    moveEvent: [{ type: Output }],
-    releaseEvent: [{ type: Output }],
-    config: [{ type: Input, args: ['swipeDirective',] }],
-    onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }, { type: HostListener, args: ['touchstart', ['$event'],] }],
-    onMove: [{ type: HostListener, args: ['mousemove', ['$event'],] }, { type: HostListener, args: ['touchmove', ['$event'],] }],
-    onRelease: [{ type: HostListener, args: ['mouseup', ['$event'],] }, { type: HostListener, args: ['mouseleave', ['$event'],] }, { type: HostListener, args: ['touchend', ['$event'],] }]
-};
-
-class TooltipDirective {
-    constructor(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;
-    }
-    onMouseEnter() {
-        if (!this.tooltipOnlyonclick) {
-            this.show();
-        }
-    }
-    onClick() {
-        if (this.tooltipOnlyonclick) {
-            this.show();
-        }
-    }
-    onMouseLeave() {
-        if (this.tooltipElem) {
-            this.hide();
-        }
-    }
-    show() {
-        if (!this.tooltipElem) {
-            this.create();
-            this.setPosition();
-        }
-        this.renderer.addClass(this.tooltipElem, 'tooltip-show');
-    }
-    hide() {
-        this.renderer.removeClass(this.tooltipElem, 'tooltip-show');
-        window.setTimeout(() => {
-        }, this.tooltipDelay);
-    }
-    create() {
-        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`);
-    }
-    setPosition() {
-        if (this.tooltipElem) {
-            const hostPos = this.el.nativeElement.getBoundingClientRect();
-            const tooltipPos = this.tooltipElem.getBoundingClientRect();
-            let top, left;
-            if (this.tooltipPlaceIntoHost) {
-                left = 0;
-                top = hostPos.height;
-            }
-            else {
-                const 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`);
-        }
-    }
-}
-TooltipDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[kmsTooltip]'
-            },] }
-];
-TooltipDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-TooltipDirective.propDecorators = {
-    tooltipTitle: [{ type: Input, args: ['tooltipTitle',] }],
-    tooltipText: [{ type: Input, args: ['tooltipText',] }],
-    tooltipLinkText: [{ type: Input, args: ['tooltipLinkText',] }],
-    tooltipLinkUrl: [{ type: Input, args: ['tooltipLinkUrl',] }],
-    tooltipPlacement: [{ type: Input, args: ['tooltipPlacement',] }],
-    tooltipDelay: [{ type: Input, args: ['tooltipDelay',] }],
-    tooltipPlaceIntoHost: [{ type: Input, args: ['tooltipPlaceIntoHost',] }],
-    tooltipOnlyonclick: [{ type: Input, args: ['tooltipOnlyonclick',] }],
-    onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
-    onClick: [{ type: HostListener, args: ['click',] }],
-    onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
-};
+MouseWheelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MouseWheelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MouseWheelDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MouseWheelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mouseWheel]' }]
+        }], propDecorators: { mouseWheelUp: [{
+                type: Output
+            }], mouseWheelDown: [{
+                type: Output
+            }], onMouseWheelChrome: [{
+                type: HostListener,
+                args: ['mousewheel', ['$event']]
+            }], onMouseWheelFirefox: [{
+                type: HostListener,
+                args: ['DOMMouseScroll', ['$event']]
+            }], onMouseWheelIE: [{
+                type: HostListener,
+                args: ['onmousewheel', ['$event']]
+            }] } });
 
 /**
  * @copyright KMS GmbH
  */
 class DirectivesModule {
 }
-DirectivesModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SwipeDirective,
-                    MouseWheelDirective,
-                    GetMaxHeightDirective,
-                    TooltipDirective,
-                ],
-                imports: [CommonModule],
-                exports: [
-                    SwipeDirective,
-                    MouseWheelDirective,
-                    GetMaxHeightDirective,
-                    TooltipDirective,
-                ],
-            },] }
-];
+DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, declarations: [SwipeDirective,
+        MouseWheelDirective,
+        GetMaxHeightDirective,
+        TooltipDirective], imports: [CommonModule], exports: [SwipeDirective,
+        MouseWheelDirective,
+        GetMaxHeightDirective,
+        TooltipDirective] });
+DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SwipeDirective,
+                        MouseWheelDirective,
+                        GetMaxHeightDirective,
+                        TooltipDirective,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SwipeDirective,
+                        MouseWheelDirective,
+                        GetMaxHeightDirective,
+                        TooltipDirective,
+                    ],
+                }]
+        }] });
 
 class KmsUiPresentationalModule {
 }
-KmsUiPresentationalModule.decorators = [
-    { type: 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: [
-                    CommonModule,
-                    MatCheckboxModule,
-                    MatButtonModule,
-                    MatRadioModule,
-                    MatDialogModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    MatFormFieldModule,
-                    MatInputModule,
-                    MatMenuModule,
-                    CustomPipesModule,
-                    GoogleMapsModule,
-                    MatExpansionModule,
-                    MatSelectModule,
-                    MatProgressSpinnerModule,
-                    DirectivesModule,
-                    TranslateModule,
-                    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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KmsUiPresentationalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, 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: [CommonModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatRadioModule,
+        MatDialogModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatMenuModule,
+        CustomPipesModule,
+        GoogleMapsModule,
+        MatExpansionModule,
+        MatSelectModule,
+        MatProgressSpinnerModule,
+        DirectivesModule,
+        TranslateModule,
+        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.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalModule, providers: [
+        ViewportService
+    ], imports: [[
+            CommonModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatRadioModule,
+            MatDialogModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatMenuModule,
+            CustomPipesModule,
+            GoogleMapsModule,
+            MatExpansionModule,
+            MatSelectModule,
+            MatProgressSpinnerModule,
+            DirectivesModule,
+            TranslateModule,
+            NgxUsefulSwiperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KmsUiPresentationalModule, decorators: [{
+            type: 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: [
+                        CommonModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatRadioModule,
+                        MatDialogModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatMenuModule,
+                        CustomPipesModule,
+                        GoogleMapsModule,
+                        MatExpansionModule,
+                        MatSelectModule,
+                        MatProgressSpinnerModule,
+                        DirectivesModule,
+                        TranslateModule,
+                        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
@@ -2743,5 +3113,5 @@ KmsUiPresentationalModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CustomPipesModule, DirectivesModule, FormParentComponent, GenericDialogComponent, IconSize$1 as IconSize, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, SalutationEnum, ViewportService, ActionsParentComponent as ɵa, BackToTopComponent as ɵb, SafeResourceUrlPipe as ɵba, SafeUrlPipe as ɵbb, EncodeUriPipe as ɵbc, DecodeUriPipe as ɵbd, TypeofPipe as ɵbe, TrimPipe as ɵbf, ToNumberPipe as ɵbg, SwipeDirective as ɵbh, MouseWheelDirective as ɵbi, GetMaxHeightDirective as ɵbj, TooltipDirective as ɵbk, ButtonWithConfirmDialogComponent as ɵc, CheckboxComponent as ɵd, ColorInputComponent as ɵe, FormControlParentComponent as ɵf, DropdownFromDataComponent as ɵg, EnumRadiogroupComponent as ɵh, FileInputComponent as ɵi, FlyoutComponent as ɵj, IconComponent as ɵl, ImageSliderComponent as ɵm, KMSAccordionItemComponent as ɵn, LoaderComponent as ɵo, MapComponent as ɵp, RadioButtonComponent as ɵq, SalutationDropdownComponent as ɵr, SalutationRadiogroupComponent as ɵs, TimeInputComponent as ɵt, TooltipComponent as ɵu, TooltipIconComponent as ɵv, YesNoRadiogroupComponent as ɵw, IntegerCurrency as ɵx, SafeHtmlPipe as ɵy, SafeStylePipe as ɵz };
+export { ActionsParentComponent, BackToTopComponent, ButtonWithConfirmDialogComponent, CheckboxComponent, ColorInputComponent, CustomPipesModule, DecodeUriPipe, DirectivesModule, DropdownFromDataComponent, EncodeUriPipe, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GenericDialogComponent, GetMaxHeightDirective, IconComponent, IconSize$1 as IconSize, ImageSliderComponent, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, MouseWheelDirective, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeStylePipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, YesNoRadiogroupComponent };
 //# sourceMappingURL=kms-ngx-ui-presentational.js.map