@kms-ngx-ui/presentational 0.0.23 → 13.0.0

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

@@ -0,0 +1,3019 @@
+import * as i0 from '@angular/core';
+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 * as i2$4 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { Subject } from 'rxjs';
+import * as i2$5 from '@angular/google-maps';
+import { GoogleMapsModule } from '@angular/google-maps';
+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 * as i6 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2$6 from 'ngx-useful-swiper';
+import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
+
+class KmsUiPresentationalService {
+    constructor() { }
+}
+KmsUiPresentationalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmsUiPresentationalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KmsUiPresentationalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmsUiPresentationalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmsUiPresentationalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class KmsUiPresentationalComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+KmsUiPresentationalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmsUiPresentationalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KmsUiPresentationalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: KmsUiPresentationalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-kms-ngx-ui-presentational',
+                    template: `
+    <p>
+      kms-ngx-ui-presentational works!
+    </p>
+  `,
+                    styles: []
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class ActionsParentComponent {
+    constructor() {
+        /**
+         * Defines the disabled property
+         */
+        this.disabled = false;
+        /**
+         * Set button as selected. F.e. in multiselect component
+         */
+        this.checked = false;
+        /**
+         * Displayed label.
+         */
+        this.label = '';
+        /**
+         * Link
+         */
+        this.link = '';
+        /**
+         * Internal value that will be send if a form is submitted.
+         */
+        this.initialValue = '';
+        this.select = new EventEmitter();
+    }
+    selectAction(id) {
+        this.checked = !this.checked;
+        this.select.emit(id);
+    }
+}
+ActionsParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionsParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActionsParentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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
+ */
+class CheckboxComponent extends ActionsParentComponent {
+    constructor() {
+        super();
+        /**
+         * Internal description name. All checkboxes with the same name belong to the same group.
+         * User can select none, one or all checkboxes with the same name.
+         */
+        this.name = '';
+        this.select = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+    }
+    selectAction(id) {
+        this.select.emit(id);
+        this.checked = !this.checked;
+    }
+    get value() {
+        return this.checked;
+    }
+    set value(value) {
+        this.checked = value;
+        this.onChange(value);
+        this.onTouch(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+}
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\"\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\n    <input type=\"checkbox\" \n           [checked]=\"checked\"\n           [value]=\"value\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           (change)=\"selectAction($event)\">\n\n</label> -->\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\n<span *ngIf=\"infoText && infoText.length > 0\" \n      class=\"\"\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\n</span>", styles: [""], components: [{ type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], 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: "13.4.0", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-checkbox', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true,
+                        },
+                    ], template: "<!-- <label class=\"wrapper ui-copy-text\"\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\n    <input type=\"checkbox\" \n           [checked]=\"checked\"\n           [value]=\"value\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           (change)=\"selectAction($event)\">\n\n</label> -->\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\n<span *ngIf=\"infoText && infoText.length > 0\" \n      class=\"\"\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\n</span>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { infoText: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class FormParentComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.formInitialized = false;
+        this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map(c => c.charCodeAt(0)));
+        this.formDataChanged = new EventEmitter();
+        this.disabled = false;
+    }
+    // TODO make a service or make own compoennt etc.
+    /**
+     * Returns if a number was pressed
+     * @param e
+     * @returns
+     */
+    checkIfKeyWasNumber(e, allowDelete = true, allowArrows = true, allowCutCopyPaste = true) {
+        // returns if keycode of numbers-row or numberpad. Or if parameter set, allow delete/backspace key
+        const isNumberRow = e.keyCode >= 48 && e.keyCode <= 57;
+        const isNumberPad = e.keyCode >= 96 && e.keyCode <= 105;
+        const isArrows = e.keyCode >= 37 && e.keyCode <= 40;
+        const isDelete = e.keyCode == 8 || e.keyCode == 46;
+        const isCutCopyOrPaste = (e.ctrlKey || e.metaKey) && (e.keyCode == 86 || e.keyCode == 88 || e.keyCode == 67);
+        return (isNumberRow) || (isNumberPad) || (allowDelete && isDelete) || (allowArrows && isArrows) || (allowCutCopyPaste && isCutCopyOrPaste);
+    }
+    // TODO make a service or make own compoennt etc.
+    /**
+     * Prevents to input other chars than numbers in input
+     * @param event
+     */
+    removeNumbersOnType(event) {
+        // only allow keydown from numbers-row or numberpad of keybard and block other chars than numbers
+        if (!this.checkIfKeyWasNumber(event) && !this.allowedCharsOnlyNumbers.has(event.keyCode)) {
+            event.preventDefault();
+        }
+    }
+    // TODO make a service or make own compoennt etc.
+    /**
+     * Prevents input when pasting which is not number
+     * @param event
+     */
+    removeNumbersOnPaste(event) {
+        const clipboardData = event.clipboardData;
+        if (clipboardData) {
+            const pastedText = clipboardData.getData('text');
+            if (pastedText) {
+                const isnum = /^\d+$/.test(pastedText);
+                if (!isnum) {
+                    event.preventDefault();
+                }
+            }
+        }
+    }
+    ngOnInit() {
+        this.formDataChanged.emit(this.form);
+        this.form.valueChanges.subscribe(() => {
+            this.formDataChanged.emit(this.form);
+        });
+    }
+}
+FormParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormParentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+FormParentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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) {
+        super(formBuilder);
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        this.defaultDataOverride = ''; // when we have NO form around, get default via input to set it manually
+        this.onSelectItemEmitter = new EventEmitter();
+        this.internalValue = '';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    change(value) {
+        this.onChange(value);
+        this.onTouched();
+    }
+    get value() {
+        return this.internalValue;
+    }
+    set value(value) {
+        this.internalValue = value;
+        if (value !== undefined && this.internalValue !== value) {
+            if (!this.internalValue && this.defaultDataOverride) {
+                this.internalValue = this.defaultDataOverride;
+            }
+            this.onChange(value);
+            this.onTouch(value);
+        }
+    }
+    writeValue(value) {
+        this.internalValue = value;
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.child) {
+            this.renderer.setProperty(this.child.nativeElement, 'disabled', isDisabled);
+        }
+    }
+    validate(_) {
+        return this.form.valid ? null : false;
+    }
+}
+FormControlParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: "13.4.0", 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']
+            }] } });
+
+/**
+ * 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: "13.4.0", ngImport: i0, type: IconComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n", styles: [""], directives: [{ type: i2.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: "13.4.0", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n", styles: [""] }]
+        }], 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: "13.4.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: "13.4.0", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0, template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TooltipIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-tooltip-icon', template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n", styles: [""] }]
+        }], 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) {
+        super(formBuilder, renderer);
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        this.label = '';
+        this.tooltipText = '';
+        this.placeholder = '';
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            color: '',
+        });
+        super.ngOnInit();
+        this.formInitialized = true;
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.color;
+            this.onChange(value.color);
+        });
+    }
+    validate(_) {
+        // TODO fix to validate complete form
+        this.valid = this.matchesHex(this.form.value) ? null : false;
+        return this.valid && {
+            invalid: !this.valid
+        };
+    }
+    matchesHex(match) {
+        if (match) {
+            const ret = match.match(/^#[0-9a-f]{6}$/i);
+            this.valid = ret && ret.length > 0;
+            return ret;
+        }
+        return false;
+    }
+    updateSelectedColor(value) {
+        const color = value.target.value;
+        this.value = color;
+        this.internalValue = color;
+        this.change(color);
+    }
+}
+ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>", styles: [""], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], 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: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColorInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-color-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorInputComponent),
+                            multi: true,
+                        },
+                    ], template: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { label: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class RadioButtonComponent extends ActionsParentComponent {
+    constructor() {
+        super();
+        /**
+         * Internal description name. All radio buttons with the same name belong to the same group.
+         * User can select exactly one of the radio buttons from the same group.
+         */
+        this.name = '';
+        /**
+         * Internal description id. Will be send in the output event when the radio button is selected.
+         */
+        this.id = '';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+    }
+    selectAction(id) {
+        this.select.emit(id);
+        this.checked = !this.checked;
+    }
+    get value() {
+        return this.checked;
+    }
+    set value(value) {
+        this.checked = value;
+        this.onChange(value);
+        this.onTouch(value);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+}
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-radiobutton', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true,
+                        },
+                    ], template: "<label class=\"wrapper ui-small-text\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], formControl: [{
+                type: Input
+            }] } });
+
+class TimeInputComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.h = '';
+        this.m = '';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+    }
+    get value() {
+        return this.value;
+    }
+    set value(value) {
+        this.onChange(value);
+        this.onTouch(value);
+    }
+    writeValue(value) {
+        if (value && value.length === 8) {
+            this.h = value.substr(0, 2);
+            this.m = value.substr(3, 2);
+        }
+        else if (value && value.length === 5) {
+            this.h = value.substr(0, 2);
+            this.m = value.substr(-2);
+        }
+        //we need to also update the form value because angular has a problem reading it from first time when valuechanges subscription was fired.
+        this.form.controls['h'].setValue(this.h);
+        this.form.controls['m'].setValue(this.m);
+        this.form.valueChanges.subscribe(value => {
+            this.h = value.h;
+            this.m = value.m;
+            value = this.getNewOrDefault();
+            this.value = value;
+            this.onChange(value);
+        });
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            h: '',
+            m: '',
+        });
+    }
+    getNewOrDefault() {
+        //reset if user deletes everything
+        if (this.h === '' && this.m === '') {
+            return '';
+        }
+        const ret = this.h.padStart(2, '0') + ':' + this.m.padStart(2, '0');
+        return ret;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+}
+TimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TimeInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+TimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TimeInputComponent, selector: "kms-time-input", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TimeInputComponent),
+            multi: true,
+        },
+    ], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"timeInput\">\n    <input type=\"text\" formControlName=\"h\" [value]=\"h\" maxlength=\"2\" pattern=\"(0?[0-9]|1[0-9]|2[0-3])\"/>\n    <span>:</span>\n    <input type=\"text\" formControlName=\"m\" [value]=\"m\" maxlength=\"2\" pattern=\"(0?[0-9]|[1-5][0-9])\"/>\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: ["formControlName", "disabled", "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: "13.4.0", ngImport: i0, type: TimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-time-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TimeInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\" class=\"timeInput\">\n    <input type=\"text\" formControlName=\"h\" [value]=\"h\" maxlength=\"2\" pattern=\"(0?[0-9]|1[0-9]|2[0-3])\"/>\n    <span>:</span>\n    <input type=\"text\" formControlName=\"m\" [value]=\"m\" maxlength=\"2\" pattern=\"(0?[0-9]|[1-5][0-9])\"/>\n</form>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; } });
+
+class YesNoRadiogroupComponent {
+    constructor(formBuilder, renderer) {
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        this.disabled = false;
+        this.textYes = '';
+        this.textNo = '';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+    }
+    get value() {
+        return this.internalValue;
+    }
+    set value(value) {
+        this.internalValue = value;
+        if (value !== undefined && this.internalValue !== value) {
+            this.onChange(value);
+            this.onTouch(value);
+        }
+    }
+    writeValue(value) {
+        this.internalValue = value;
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.child) {
+            this.renderer.setProperty(this.child.nativeElement, 'disabled', isDisabled);
+        }
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            yesno: [],
+        });
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.yesno;
+            this.onChange(value.yesno);
+        });
+    }
+}
+YesNoRadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\n    </mat-radio-group>\n</form>\n", components: [{ type: i2$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: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: YesNoRadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-yesno-radiogroup', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YesNoRadiogroupComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\n    </mat-radio-group>\n</form>\n" }]
+        }], 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;
+class FileInputComponent {
+    /**
+     * Constructor
+     * @param formBuilder
+     * @param appRef
+     * @param cd
+     * @param translateService
+     * @param renderer
+     */
+    constructor(formBuilder, appRef, cd, 
+    //private translateService: TranslateService,
+    renderer) {
+        this.formBuilder = formBuilder;
+        this.appRef = appRef;
+        this.cd = cd;
+        this.renderer = renderer;
+        this.label = '';
+        this.previewImage = true;
+        this.allowRemove = true;
+        this.previewImageText = '';
+        this.maxSizeBytes = MAX_SIZE_BYTES;
+        this.resizePixels = 0;
+        this.acceptedFileMimetypes = 'image/jpeg, image/jpg, image/png';
+        this.form = this.formBuilder.group({
+            ImageIdent: new FormControl(''),
+            ImageLink: new FormControl(''),
+            Filename: new FormControl(''),
+            ImageAsDataURL: new FormControl(''),
+            Text: new FormControl(''),
+        });
+        this.subscriptions = [];
+        this.newImageLoading = false;
+        this.IconSize = IconSize$1;
+        this.formDataChanged = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+    }
+    /**
+     *  Click on button triggers file-input to open OS file dialog
+     */
+    selectImageOverlay() {
+        this.fileInput.nativeElement.click();
+    }
+    /**
+     * Function to manage the input image
+     * Returns an error if the file exceeds maximum wanted filesize (Mb).
+     * @param ev
+     * @returns
+     */
+    selectImage(ev) {
+        if (ev.target.files && ev.target.files[0]) {
+            const file = ev.target.files[0];
+            if (file.size > this.maxSizeBytes) {
+                this.clearInputValue(ev);
+                //alert(this.translateService.instant('errors.fileTooBig'));
+                return;
+            }
+            else {
+                this.newImageLoading = true;
+                if (this.resizePixels > 0) {
+                    const logoUrl = URL.createObjectURL(file);
+                    const imgEl = document.createElement('img');
+                    imgEl.addEventListener('load', () => {
+                        const resizedLogo = this.resizeImage(imgEl, this.resizePixels);
+                        const newFile = this.generateModel(file.name, resizedLogo, this.value.ImageIdent, this.value.ImageLink, this.value.Text);
+                        this.value = newFile;
+                        this.newImageLoading = false;
+                        this.cd.markForCheck();
+                    });
+                    imgEl.src = logoUrl;
+                }
+                else {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(file);
+                    reader.onload = (e) => {
+                        const newFile = this.generateModel(file.name, e.target.result, this.value.ImageIdent, this.value.ImageLink, this.value.Text);
+                        this.value = newFile;
+                        this.newImageLoading = false;
+                        this.cd.markForCheck();
+                    };
+                }
+            }
+        }
+        else {
+            console.warn("No file selected");
+        }
+    }
+    /**
+     * Resize an image
+     * @param imgEl
+     * @param wantedWidth as number
+     * @returns string
+     */
+    resizeImage(imgEl, wantedWidth) {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const aspect = imgEl.width / imgEl.height;
+        canvas.width = wantedWidth;
+        canvas.height = wantedWidth / aspect;
+        if (isValue(ctx))
+            ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
+        return canvas.toDataURL();
+    }
+    /**
+     * Generate default object
+     * @param name as string
+     * @param content as string
+     * @returns AttachedFileDTO
+     */
+    generateModel(name, content, ident, imageLink, text) {
+        return {
+            ImageIdent: ident ? ident : '',
+            Filename: name ? name : '',
+            ImageAsDataURL: content ? content : '',
+            ImageLink: imageLink ? imageLink : '',
+            Text: text ? text : ''
+        };
+    }
+    /**
+     * Remove image
+     */
+    removeFromList() {
+        this.value = this.generateModel('', '', '', '');
+    }
+    /**
+     * get value
+     */
+    get value() {
+        return this.form.value;
+    }
+    /**
+     * set value
+     */
+    set value(value) {
+        this.form.setValue(value);
+        this.onChange(value);
+        this.formDataChanged.emit(this.form);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    writeValue(value) {
+        if (value) {
+            this.value = value;
+        }
+        if (value === null) {
+            this.form.reset();
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
+    validate(_) {
+        return this.form.valid ? null : { styles: { valid: false } };
+    }
+    /**
+     * OnClick event listener of input#fileInput to clear his input value
+     */
+    clearInputValue(ev) {
+        const element = ev.target;
+        element.value = '';
+    }
+}
+FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { type: i2$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: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-file-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => FileInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""] }]
+        }], 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
+    constructor() {
+        this.loading = false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ngOnInit() { }
+}
+LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n", styles: [""], components: [{ type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-loader', template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { loading: [{
+                type: Input
+            }] } });
+
+/*!
+ * @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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GetMaxHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+GetMaxHeightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: { cssClassName: ["getMaxHeight", "cssClassName"] }, outputs: { maxHeightChanged: "maxHeightChanged", sumOfHeight: "sumOfHeight" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeHtmlPipe, name: "kmsSafeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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 = '';
+        this.bodyCssClass = '';
+        this.headerTitle = '';
+        this.headerText = '';
+        this.hasButtonForMore = false;
+        this.moreText = '';
+        this.lessText = '';
+    }
+    /**
+     * Open/close dropdown if click on header.
+     * Except, if mode is set to hasButtonForMore. When there is a extra button to open/close
+     */
+    toggleDropdownHeader() {
+        if (!this.hasButtonForMore) {
+            this.toggleDropdown();
+        }
+    }
+    /**
+     * Open or close the dropdown
+     */
+    toggleDropdown() {
+        this.isDropdownOpened = !this.isDropdownOpened;
+    }
+    /**
+     * Set the height of the dropdown list items dynamic - needed for the animation
+     */
+    setDropdownListHeight(contentHeight) {
+        this.targetHeight = `${contentHeight}px`;
+    }
+}
+FlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\"\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.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: "13.4.0", ngImport: i0, type: FlyoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-flyout', 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,
+                                },
+                            }),
+                        ]),
+                    ], template: "<div class=\"flyout\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\"\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n", styles: [""] }]
+        }], 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']
+            }] } });
+
+class IntegerCurrency {
+    constructor(cp) {
+        this.cp = cp;
+    }
+    transform(value, currencyCode, display, digitsInfo) {
+        const currencyPipeValue = this.cp.transform(value, currencyCode, display, digitsInfo);
+        if (currencyPipeValue) {
+            const convertedValue = currencyPipeValue.split(',')[0] + ' ' + currencyPipeValue.slice(-1);
+            return convertedValue;
+        }
+        else {
+            throw new Error("No value provided");
+        }
+    }
+}
+IntegerCurrency.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IntegerCurrency, deps: [{ token: i2.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe });
+IntegerCurrency.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IntegerCurrency, name: "kmsIntegerCurrency" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IntegerCurrency, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsIntegerCurrency',
+                }]
+        }], ctorParameters: function () { return [{ type: i2.CurrencyPipe }]; } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class DecodeUriPipe {
+    transform(value, _args) {
+        return decodeURI(value);
+    }
+}
+DecodeUriPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DecodeUriPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DecodeUriPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DecodeUriPipe, name: "kmsDecodeUri" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DecodeUriPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsDecodeUri',
+                }]
+        }] });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class EncodeUriPipe {
+    transform(value, _args) {
+        return encodeURI(value);
+    }
+}
+EncodeUriPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EncodeUriPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+EncodeUriPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EncodeUriPipe, name: "kmsEncodeUri" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EncodeUriPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsEncodeUri',
+                }]
+        }] });
+
+/**
+ * @copyright KMS GmbH
+ */
+class SafeStylePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(style) {
+        return this.sanitizer.bypassSecurityTrustStyle(style);
+    }
+}
+SafeStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeStylePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeStylePipe, name: "kmsSafeStyle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeStylePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsSafeStyle',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+
+/**
+ * @copyright KMS GmbH
+ */
+class SafeUrlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustUrl(url);
+    }
+}
+SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeUrlPipe, name: "kmsSafeSUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsSafeSUrl',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+
+/**
+ * @copyright KMS GmbH
+ */
+class SafeResourceUrlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}
+SafeResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SafeResourceUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SafeResourceUrlPipe, name: "kmsSafeResourceSUrl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TypeofPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TypeofPipe, name: "kmsTypeOf" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TypeofPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsTypeOf',
+                }]
+        }] });
+
+/**
+ * @copyright KMS GmbH
+ */
+class TrimPipe {
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        return value.trim();
+    }
+}
+TrimPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TrimPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TrimPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TrimPipe, name: "kmsTrim" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TrimPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'kmsTrim' }]
+        }] });
+
+/**
+ * @copyright KMS GmbH
+ */
+class ToNumberPipe {
+    transform(items) {
+        if (!items) {
+            return 0;
+        }
+        return parseInt(items, 10);
+    }
+}
+ToNumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ToNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ToNumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ToNumberPipe, name: "kmsToNumber", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ToNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kmsToNumber',
+                    pure: false
+                }]
+        }] });
+
+/**
+ * @copyright KMS GmbH
+ */
+class CustomPipesModule {
+}
+CustomPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CustomPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: CustomPipesModule, providers: [CurrencyPipe], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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) {
+        super(formBuilder, renderer);
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        this.translationPrefix = '';
+    }
+    ngOnInit() {
+        this.optionValues = Object.keys(this.optionsEnum).filter(x => !(parseInt(x) >= 0));
+        this.form = this.formBuilder.group({
+            enumData: [],
+        });
+        this.formInitialized = true;
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.enumData;
+            this.onChange(value.enumData);
+        });
+        super.ngOnInit();
+    }
+}
+EnumRadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>", components: [{ type: i2$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: ["formControl", "disabled", "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: "13.4.0", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-enum-radiogroup', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EnumRadiogroupComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>" }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { header: [{
+                type: Input
+            }], optionsEnum: [{
+                type: Input
+            }], translationPrefix: [{
+                type: Input
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+/**
+ * A generic dialog component
+ */
+class KMSAccordionItemComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.itemTitle = '';
+        this.showAsCard = false;
+        this.isSmall = false;
+        this.expanded = false;
+        this.panelOpenState = false;
+    }
+    ngOnInit() {
+        this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(this.itemTitle);
+    }
+}
+KMSAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0, template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\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: "13.4.0", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-accordion-item', template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { itemTitle: [{
+                type: Input
+            }], showAsCard: [{
+                type: Input
+            }], isSmall: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }] } });
+
+/**
+ * @copyright KMS GmbH
+ */
+/**
+ * Service to get viewport
+ */
+class ViewportService {
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.viewports = [
+            {
+                name: 'xs',
+                low: 420,
+                high: 990,
+            },
+            {
+                name: 's',
+                low: 991,
+                high: 1024,
+            },
+            {
+                name: 'm',
+                low: 1025,
+                high: 1200,
+            },
+            {
+                name: 'l',
+                low: 12001,
+                high: 1400,
+            },
+            {
+                name: 'xl',
+                low: 1401,
+                high: 1600,
+            },
+            {
+                name: 'xxl',
+                low: 1601,
+                high: 1920,
+            },
+            {
+                name: 'xxxl',
+                low: 1921,
+                high: 99999,
+            },
+        ];
+        this.viewportChangedSubscriber = new Subject();
+        this.viewportResizedSubscriber = new Subject();
+        if (isPlatformBrowser(this.platformId)) {
+            window.addEventListener('resize', this.documentSizeChanged.bind(this), { passive: true });
+        }
+    }
+    /**
+     * Get window height
+     */
+    getDocumentHeight() {
+        return isPlatformBrowser(this.platformId) ? document.body.clientHeight : 1200;
+    }
+    /**
+     * Get window width
+     */
+    getDocumentWidth() {
+        return isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
+    }
+    /**
+     * Get window height
+     */
+    getWindowHeight() {
+        return isPlatformBrowser(this.platformId) ? window.innerHeight : 1200;
+    }
+    /**
+     * Get window width
+     */
+    getWindowWidth() {
+        return isPlatformBrowser(this.platformId) ? window.innerWidth : 1200;
+    }
+    /**
+     * Returns the current viewport MQ as string
+     * @returns string
+     */
+    getCurrentViewPort() {
+        if (!this.currentViewport) {
+            const currentWidth = isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
+            this.currentViewport = this.convertWidthToMediaQuery(currentWidth);
+        }
+        return this.currentViewport;
+    }
+    /**
+     * Provides mq´s as string
+     */
+    getViewportChangedObserver() {
+        return this.viewportChangedSubscriber.asObservable();
+    }
+    /**
+     * Provides the current window width as number
+     */
+    getViewportResizedObserver() {
+        return this.viewportResizedSubscriber.asObservable();
+    }
+    scrollToElementId(el, alignCenter = false) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.scrollToElement(document.querySelector('#' + el), alignCenter);
+        }
+    }
+    /**
+     * Helper function that scrolls to the given markup element.
+     * @param el - nativeElement from markup
+     * @param alignCenter - defines if the element needs to be centered on window
+     */
+    scrollToElement(el, alignCenter = false) {
+        if (isPlatformBrowser(this.platformId)) {
+            let extraScrollTop = 0;
+            if (alignCenter) {
+                extraScrollTop = (window.innerHeight - el.clientHeight) / 2;
+            }
+            /*
+            const elementPos: DOMRect = el.getBoundingClientRect();
+            const scrollTopPosition = elementPos.x - extraScrollTop;
+            */
+            //let offsetLeft = 0;
+            let offsetTop = 0;
+            let elTemp = el;
+            while (elTemp) {
+                //offsetLeft += elTemp.offsetLeft;
+                offsetTop += elTemp.offsetTop;
+                elTemp = elTemp.parentElement ? elTemp.parentElement : null;
+            }
+            window.scrollTo({ left: 0, top: offsetTop - extraScrollTop, behavior: 'smooth' });
+        }
+    }
+    /**
+     * Scroll to the top position
+     * @param top - top position value
+     */
+    scrollTop(top) {
+        if (isPlatformBrowser(this.platformId)) {
+            window.scrollTo({ left: 0, top: top, behavior: 'smooth' });
+        }
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId)) {
+            window.removeEventListener('resize', this.documentSizeChanged);
+        }
+    }
+    /**
+     * If viewport changed
+     * @event
+     */
+    documentSizeChanged(event) {
+        const currentWindowWidth = event.target.innerWidth;
+        // inform who´s interested
+        this.viewportResizedSubscriber.next(currentWindowWidth);
+        if (currentWindowWidth > 0) {
+            for (const mqs of this.viewports) {
+                if (currentWindowWidth > mqs.high) {
+                    continue;
+                }
+                else if ((currentWindowWidth >= mqs.low || currentWindowWidth <= mqs.high) &&
+                    this.currentViewport !== mqs.name) {
+                    this.currentViewport = mqs.name;
+                    // inform who´s interested
+                    this.viewportChangedSubscriber.next(mqs.name);
+                    break;
+                }
+                else if (this.currentViewport === mqs.name) {
+                    break;
+                }
+                else {
+                    console.error('ERROR');
+                }
+            }
+        }
+    }
+    /**
+     * Get the Media Query for the given width
+     * @param width Width to get the according MQ for
+     */
+    convertWidthToMediaQuery(width) {
+        let currentViewport = '';
+        for (const mqs of this.viewports) {
+            if (width <= mqs.high && width >= mqs.low) {
+                currentViewport = mqs.name;
+                break;
+            }
+        }
+        return currentViewport;
+    }
+    isPortrait() {
+        if (isPlatformBrowser(this.platformId))
+            return window.innerHeight > window.innerWidth;
+        else
+            return;
+    }
+    isLandscape() {
+        if (isPlatformBrowser(this.platformId)) {
+            const isLandscape = window.orientation === 90 || window.orientation === -90;
+            return isLandscape;
+        }
+        else {
+            return;
+        }
+    }
+}
+ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewportService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewportService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: Object, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }];
+    } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+/**
+ * MarkerOptions class for Marker
+ */
+class MarkerOptions {
+}
+/**
+ * MarkerLabel class for Marker
+ */
+class MarkerLabel {
+}
+/**
+ * Marker class
+ */
+class Marker {
+}
+/**
+ * Component to show marker on google map for specific address
+ */
+class MapComponent {
+    //
+    constructor(viewPortService) {
+        this.viewPortService = viewPortService;
+        this.markers = [];
+        this.geoDataFoundForAddress = false;
+        this.widthSet = false;
+        this.width = '100%';
+        this.zoom = 15;
+        this.center = {
+            lat: 52.097449,
+            lng: 12.7436911,
+        };
+        this.options = {
+            mapTypeId: 'roadmap',
+            zoomControl: false,
+            scrollwheel: false,
+            disableDoubleClickZoom: true,
+            maxZoom: 15,
+            minZoom: 8,
+        };
+    }
+    ngOnInit() {
+        this.findLocation(this.data.Street + ' ' + this.data.Zip + ' ' + this.data.City);
+    }
+    /**
+     * Asks google for geocoordinates of a given address string
+     * @input address as string
+     */
+    findLocation(address) {
+        if (!this.geocoder) {
+            this.geocoder = new google.maps.Geocoder();
+        }
+        this.geocoder.geocode({
+            'address': address,
+        }, (results, status) => {
+            if (status === google.maps.GeocoderStatus.OK) {
+                this.center.lat = results[0].geometry.location.lat();
+                this.center.lng = results[0].geometry.location.lng();
+                this.addMarker();
+                this.geoDataFoundForAddress = true;
+            }
+            else {
+                console.error('Sorry, this search of map address produced no results.');
+            }
+        });
+    }
+    /**
+     * Adds a marker to the map
+     */
+    addMarker() {
+        this.markers.push({
+            position: {
+                lat: this.center.lat,
+                lng: this.center.lng,
+            },
+            label: {
+                color: 'blue',
+                text: this.data.Name1 || '',
+            },
+            title: this.data.Name1 + ' ' + this.data.Street + ' ' + this.data.Zip,
+            options: { animation: google.maps.Animation.DROP },
+        });
+    }
+    /**
+     * Zooms in into map
+     */
+    zoomIn() {
+        if (this.options.maxZoom && this.zoom < this.options.maxZoom) {
+            this.zoom++;
+        }
+    }
+    /**
+     * Zooms out from map
+     */
+    zoomOut() {
+        if (this.options.minZoom && this.zoom > this.options.minZoom) {
+            this.zoom--;
+        }
+    }
+}
+MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MapComponent, deps: [{ token: ViewportService }], target: i0.ɵɵFactoryTarget.Component });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""], components: [{ type: i2$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: "13.4.0", ngImport: i0, type: MapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-map', template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ViewportService }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+// TODO change values after cleaned up database
+var SalutationEnum;
+(function (SalutationEnum) {
+    SalutationEnum["NOT_SPECIFIED"] = "Keine Anrede";
+    SalutationEnum["MALE"] = "Herr";
+    SalutationEnum["FEMALE"] = "Frau";
+})(SalutationEnum || (SalutationEnum = {}));
+
+class SalutationDropdownComponent extends FormControlParentComponent {
+    constructor(formBuilder, renderer) {
+        super(formBuilder, renderer);
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        //For view
+        this.SalutationEnum = SalutationEnum;
+        this.Object = Object;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            salut: [],
+        });
+        this.formInitialized = true;
+        //somehow for dropowns we have to set value manually with timeout for default value
+        setTimeout(() => {
+            this.form.controls['salut'].setValue(this.value ? this.value : '');
+        }, 1000);
+        this.form.valueChanges.subscribe((value) => {
+            this.onChange(value.salut);
+        });
+        super.ngOnInit();
+    }
+}
+SalutationDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], 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: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-salutation-dropdown', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SalutationDropdownComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>" }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }] } });
+
+class TooltipComponent {
+    constructor() {
+        this.tooltipTitle = "";
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-tooltip-element', template: "<ng-content></ng-content>", styles: ["[kmsTooltip]{position:relative}\n"] }]
+        }], propDecorators: { tooltipTitle: [{
+                type: Input
+            }] } });
+
+class SalutationRadiogroupComponent extends FormControlParentComponent {
+    constructor(formBuilder, renderer) {
+        super(formBuilder, renderer);
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        //For view
+        this.SalutationEnum = SalutationEnum;
+        this.Object = Object;
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            salut: [isValue(this.value) ? this.value : '', null],
+        });
+        this.formInitialized = true;
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.salut;
+            this.onChange(value.salut);
+        });
+        super.ngOnInit();
+    }
+}
+SalutationRadiogroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", type: SalutationRadiogroupComponent, selector: "kms-salutation-radiogroup", providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SalutationRadiogroupComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>", components: [{ type: i2$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: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-salutation-radiogroup', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SalutationRadiogroupComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>" }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.Renderer2 }]; } });
+
+/**
+ * @copyright KMS GmbH
+ */
+class BackToTopComponent {
+    constructor(platformId) {
+        this.platformId = platformId;
+    }
+    onWindowScroll() {
+        if (isPlatformBrowser(this.platformId)) {
+            if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
+                this.windowScrolled = true;
+            }
+            else if ((this.windowScrolled && window.pageYOffset) ||
+                document.documentElement.scrollTop ||
+                document.body.scrollTop < 10) {
+                this.windowScrolled = false;
+            }
+        }
+    }
+    scrollToTop() {
+        if (isPlatformBrowser(this.platformId)) {
+            (function smoothscroll() {
+                const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
+                if (currentScroll > 0) {
+                    window.requestAnimationFrame(smoothscroll);
+                    window.scrollTo(0, currentScroll - currentScroll / 8);
+                }
+            })();
+        }
+    }
+}
+BackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BackToTopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-back-to-top', template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>" }]
+        }], ctorParameters: function () {
+        return [{ type: Object, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }];
+    }, propDecorators: { onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
+var ButtonResponseType;
+(function (ButtonResponseType) {
+    ButtonResponseType["primary"] = "primary";
+    ButtonResponseType["secondary"] = "secondary";
+})(ButtonResponseType || (ButtonResponseType = {}));
+
+/**
+ * @copyright KMS GmbH
+ */
+/**
+ * A generic dialog component
+ */
+class GenericDialogComponent {
+    constructor(dialogRef, zone, data) {
+        this.dialogRef = dialogRef;
+        this.zone = zone;
+        this.data = data;
+        this.ButtonResponseType = ButtonResponseType;
+        if (isValue(data.buttons)) {
+            this.buttons = data.buttons;
+        }
+        else {
+            this.buttons = { primary: 'Yes', secondary: 'No' };
+        }
+    }
+    /**
+     * Action called when clicked
+     * @param clickedButton Whether the primary or secondary button was clicked
+     */
+    onClickAction(clickedButton) {
+        this.zone.run(() => {
+            this.dialogRef.close(clickedButton);
+            this.dialogRef.afterClosed().subscribe(() => {
+                const buttonList = document.querySelectorAll('.mat-flat-button, .mat-button');
+                let i = 0;
+                for (i; i < buttonList.length; i++) {
+                    buttonList[i].classList.remove('cdk-focused');
+                    buttonList[i].classList.remove('cdk-program-focused');
+                }
+            });
+        });
+    }
+}
+GenericDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", type: GenericDialogComponent, selector: "kms-generic-dialog", ngImport: i0, template: "<div mat-dialog-title class=\"mat-dialog-title\">\n    <h3>{{ data.title }}</h3>\n</div>\n<div mat-dialog-content class=\"mat-dialog-content\">\n    {{ data.message }}\n</div>\n<div mat-dialog-actions class=\"custom-dialog-actions\">\n    <button\n        mat-flat-button\n        class=\"test_secondary_button\"\n         color=\"accent\"\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\n    >\n        {{ buttons.secondary }}\n    </button>\n    <button\n        mat-flat-button\n        class=\"test_primary_button\"\n        color=\"primary\"\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\n    >\n        {{ buttons.primary }}\n    </button>\n</div>\n", styles: [""], components: [{ type: i2$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: "13.4.0", ngImport: i0, type: GenericDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-generic-dialog', template: "<div mat-dialog-title class=\"mat-dialog-title\">\n    <h3>{{ data.title }}</h3>\n</div>\n<div mat-dialog-content class=\"mat-dialog-content\">\n    {{ data.message }}\n</div>\n<div mat-dialog-actions class=\"custom-dialog-actions\">\n    <button\n        mat-flat-button\n        class=\"test_secondary_button\"\n         color=\"accent\"\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\n    >\n        {{ buttons.secondary }}\n    </button>\n    <button\n        mat-flat-button\n        class=\"test_primary_button\"\n        color=\"primary\"\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\n    >\n        {{ buttons.primary }}\n    </button>\n</div>\n", styles: [""] }]
+        }], 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
+    constructor(dialog) {
+        this.dialog = dialog;
+        // Outputs when dialogue was closed. Returns true, if yes was clicked, false otherwise
+        this.onConfirmClosed = new EventEmitter();
+        this.subs = new SubSink();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ngOnInit() { }
+    start() {
+        const data = {
+            title: this.confirmTitle,
+            buttons: {
+                primary: this.confirmTextYes,
+                secondary: this.confirmTextNo,
+            }
+        };
+        const dialogRef = this.dialog.open(GenericDialogComponent, {
+            data: data,
+        });
+        this.subs.sink = dialogRef.afterClosed().subscribe(result => {
+            if (result === ButtonResponseType.primary) {
+                this.onConfirmClosed.emit(true);
+            }
+            else {
+                this.onConfirmClosed.emit(false);
+            }
+            dialogRef.close();
+        });
+    }
+}
+ButtonWithConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonWithConfirmDialogComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ButtonWithConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\n    type=\"button\"\n    (click)=\"start()\"\n    mat-stroked-button\n    [disabled]=\"disabled\"\n>\n    {{ buttonText }}\n</button>\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: "13.4.0", ngImport: i0, type: ButtonWithConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-button-with-confirm-dialog', template: "<button\n    type=\"button\"\n    (click)=\"start()\"\n    mat-stroked-button\n    [disabled]=\"disabled\"\n>\n    {{ buttonText }}\n</button>\n", styles: [""] }]
+        }], 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}
+ */
+class DropdownFromDataComponent extends FormControlParentComponent {
+    constructor(formBuilder, renderer) {
+        super(formBuilder, renderer);
+        this.formBuilder = formBuilder;
+        this.renderer = renderer;
+        // options for the dropdown have a null value at the beginning of the array
+        this.hasNullOption = false;
+        this.placeholder = '';
+        this.label = '';
+        this.required = false;
+        this.useEnumIndexAsValue = false;
+        // multiple selection
+        this.multiple = false;
+        this.keys = [];
+        this.values = [];
+        this.Object = Object;
+    }
+    /**
+     * Hook used to sync changes on set Label and Type
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        if (changes.optionsPlainArray) {
+            this.keys = this.optionsPlainArray;
+            this.values = this.optionsPlainArray;
+        }
+        this.setKeyValues();
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            dropdownData: [],
+        });
+        this.formInitialized = true;
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.dropdownData;
+            this.onChange(value.dropdownData);
+        });
+        super.ngOnInit();
+    }
+    /**
+     * transofrms the data values to the correct format for be used by the template
+     * @param value
+     */
+    setKeyValues() {
+        if (this.optionsObjArray && this.mapKey && this.mapValue) {
+            this.keys = this.optionsObjArray.map((obj) => obj[`${this.mapKey}`]);
+            this.values = this.optionsObjArray.map((obj) => obj[`${this.mapValue}`]);
+        }
+        else if (this.optionsObjArray && this.mapKey) {
+            this.keys = this.optionsObjArray.map((obj) => obj[`${this.mapKey}`]);
+            this.values = this.optionsObjArray.map((obj) => obj[`${this.mapKey}`]);
+        }
+        if (this.optionsEnum) {
+            this.keys = EnumValues.getNames(this.optionsEnum);
+            if (this.optionsPlainArray) {
+                this.values = this.optionsPlainArray;
+            }
+            else {
+                const values = EnumValues.getValues(this.optionsEnum);
+                // var who defines if enum is componed just with keys or keyValues. E.g enum KeyEnum { VALUE1, VALUE2 } or enum KeyValueEnum { VALUE4 = 'V4', VALUE5 = 'V5' }
+                let keyValueEnum = false;
+                for (let i = 0; i < this.keys.length; i++) {
+                    if (i !== values[i]) {
+                        keyValueEnum = true;
+                    }
+                }
+                if (keyValueEnum || this.useEnumIndexAsValue) {
+                    this.values = values;
+                }
+                else {
+                    this.values = EnumValues.getNames(this.optionsEnum);
+                }
+            }
+        }
+        if (this.hasNullOption === true)
+            this.keys.unshift(null);
+        if (this.hasNullOption === true)
+            this.values.unshift(null);
+    }
+    /**
+     * set the value of the dropdown based if translation is set
+     * @param key
+     */
+    setDisplayKey(key) {
+        /*
+            if (this.translation && key !== null) {
+                if (this.translation.isPrefix) {
+                    return this.translationService.instant(this.translation.path + '.' + key);
+                } else if (this.translation.useKey) {
+                    return this.translationService.instant(this.translation.path, { key: key });
+                } else if (!this.translation?.useKey && !this.translation?.isPrefix) {
+                    return this.translationService.instant(this.translation.path);
+                }
+            } else if (key == null) {
+                return '';
+            } else if (!this.translation) {
+                return key;
+            }
+            */
+        return key;
+    }
+    valueChanged(value) {
+        this.form.patchValue({
+            dropdownData: value,
+        });
+        this.onSelectItemEmitter.emit(value);
+    }
+}
+DropdownFromDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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", multiple: "multiple" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DropdownFromDataComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\n        <mat-label>{{ label }}</mat-label>\n        <mat-select\n            placeholder=\"{{ placeholder }}\"\n            disableOptionCentering\n            [(value)]=\"value\"\n            (selectionChange)=\"valueChanged($event?.value)\"\n            #child\n            [disabled]=\"disabled\"\n            [multiple]=\"multiple\"\n            >\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n                <span>{{ setDisplayKey(key) }}</span>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>\n", components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], 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: "13.4.0", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-dropdown-from-data', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DropdownFromDataComponent),
+                            multi: true,
+                        },
+                    ], template: "<form [formGroup]=\"form\">\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\n        <mat-label>{{ label }}</mat-label>\n        <mat-select\n            placeholder=\"{{ placeholder }}\"\n            disableOptionCentering\n            [(value)]=\"value\"\n            (selectionChange)=\"valueChanged($event?.value)\"\n            #child\n            [disabled]=\"disabled\"\n            [multiple]=\"multiple\"\n            >\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n                <span>{{ setDisplayKey(key) }}</span>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>\n" }]
+        }], 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
+            }], multiple: [{
+                type: Input
+            }] } });
+
+/*!
+ * @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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SwipeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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) {
+            this.previousSlide();
+        }
+        else {
+            this.nextSlide();
+        }
+    }
+    lastClicked() {
+        this.isLastClickedInSliderImage = true;
+    }
+    noLastClicked() {
+        this.isLastClickedInSliderImage = false;
+    }
+    scrollLeft() {
+        this.previousSlide();
+    }
+    scrollRight() {
+        this.nextSlide();
+    }
+    nextSlide() {
+        if (this.slides && this.selectedSlide < this.slides.length - 1) {
+            if (this.usefulSwiper) {
+                this.usefulSwiper.swiper.slideNext();
+            }
+            this.openSlide(this.selectedSlide + 1);
+        }
+        this.isLastClickedInSliderImage = false;
+    }
+    previousSlide() {
+        if (this.selectedSlide > 0) {
+            if (this.usefulSwiper) {
+                this.usefulSwiper.swiper.slidePrev();
+            }
+            this.openSlide(this.selectedSlide - 1);
+        }
+        this.isLastClickedInSliderImage = false;
+    }
+    slideTo(index) {
+        if (this.usefulSwiper) {
+            this.usefulSwiper.swiper.slideTo(index);
+        }
+    }
+    openSlide(number) {
+        if (this.slides && number < this.slides.length && number >= 0) {
+            this.selectedSlide = number;
+            // TODO use Pipe safeStyle
+            this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[number] || ')');
+        }
+    }
+    ngOnChanges(_changes) {
+        if (_changes.slides) {
+            if (this.slides) {
+                // TODO use Pipe safeStyle
+                this.selectedSlideImage = this.sanitizer.bypassSecurityTrustStyle('url(' + this.slides[0] + ')');
+            }
+        }
+    }
+    /**
+     * Re-order slides and notify parent component
+     */
+    drop(event) {
+        if (this.slides && this.imagesTOSave) {
+            moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
+            moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
+            this.orderChanged.emit(this.imagesTOSave);
+        }
+    }
+    /**
+     * Send image index to parent to perform delete
+     */
+    deleteImage(index) {
+        this.deleteImageEvent.emit(index);
+    }
+}
+ImageSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\">\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n    <div \n        class=\"swiper-bigImage\"\n        [style.backgroundImage]=\"selectedSlideImage\"\n        [swipeDirective]=\"swipeConfig\"\n        (moveEvent)=\"handleMoveEvent($event)\"\n        (releaseEvent)=\"handleReleaseEvent($event)\"\n        (mouseup)=\"lastClicked()\"\n        (mouseout)=\"noLastClicked()\" >\n    </div>\n\n    <ng-content select=\"[description]\"></ng-content>\n\n    <div class=\"swiper-holder\">\n        <!--\n        (mouseWheelUp)=\"scrollLeft($event)\"\n        (mouseWheelDown)=\"scrollRight($event)\"\n        -->\n\n        <swiper [config]=\"config\" #usefulSwiper>\n            <div class=\"swiper-wrapper\" \n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \n                cdkDropListOrientation=\"horizontal\">                \n                <div class=\"swiper-slide\" \n                    *ngFor=\"let slide of slides; let index = index\" \n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \n                        <kms-icon icon=\"trash\"></kms-icon>\n                    </button>\n                    <div class=\"img\" (click)=\"openSlide(index)\"\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\n                        [ngClass]=\"{'active': index === selectedSlide}\">\n                    </div>\n                    \n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\n                </div>\n            </div>\n        </swiper>\n\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\n\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\n        </div>\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\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: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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: "13.4.0", ngImport: i0, type: ImageSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-image-slider', template: "<div class=\"all-wrapper\">\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n    <div \n        class=\"swiper-bigImage\"\n        [style.backgroundImage]=\"selectedSlideImage\"\n        [swipeDirective]=\"swipeConfig\"\n        (moveEvent)=\"handleMoveEvent($event)\"\n        (releaseEvent)=\"handleReleaseEvent($event)\"\n        (mouseup)=\"lastClicked()\"\n        (mouseout)=\"noLastClicked()\" >\n    </div>\n\n    <ng-content select=\"[description]\"></ng-content>\n\n    <div class=\"swiper-holder\">\n        <!--\n        (mouseWheelUp)=\"scrollLeft($event)\"\n        (mouseWheelDown)=\"scrollRight($event)\"\n        -->\n\n        <swiper [config]=\"config\" #usefulSwiper>\n            <div class=\"swiper-wrapper\" \n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \n                cdkDropListOrientation=\"horizontal\">                \n                <div class=\"swiper-slide\" \n                    *ngFor=\"let slide of slides; let index = index\" \n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \n                        <kms-icon icon=\"trash\"></kms-icon>\n                    </button>\n                    <div class=\"img\" (click)=\"openSlide(index)\"\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\n                        [ngClass]=\"{'active': index === selectedSlide}\">\n                    </div>\n                    \n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\n                </div>\n            </div>\n        </swiper>\n\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\n\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\n        </div>\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\n</div>", styles: [""] }]
+        }], 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
+ */
+class MouseWheelDirective {
+    constructor() {
+        this.mouseWheelUp = new EventEmitter();
+        this.mouseWheelDown = new EventEmitter();
+    }
+    onMouseWheelChrome(event) {
+        this.mouseWheelFunc(event);
+    }
+    onMouseWheelFirefox(event) {
+        this.mouseWheelFunc(event);
+    }
+    onMouseWheelIE(event) {
+        this.mouseWheelFunc(event);
+    }
+    mouseWheelFunc(event) {
+        event = window.event || event; // old IE support
+        const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+        if (delta > 0) {
+            this.mouseWheelUp.emit(event);
+        }
+        else if (delta < 0) {
+            this.mouseWheelDown.emit(event);
+        }
+        // for IE
+        event.returnValue = false;
+        // for Chrome and Firefox
+        if (event.preventDefault) {
+            event.preventDefault();
+        }
+    }
+}
+MouseWheelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MouseWheelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+MouseWheelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: DirectivesModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SwipeDirective,
+                        MouseWheelDirective,
+                        GetMaxHeightDirective,
+                        TooltipDirective,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SwipeDirective,
+                        MouseWheelDirective,
+                        GetMaxHeightDirective,
+                        TooltipDirective,
+                    ],
+                }]
+        }] });
+
+class KmsUiPresentationalModule {
+}
+KmsUiPresentationalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KmsUiPresentationalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+KmsUiPresentationalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", 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,
+        DragDropModule,
+        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: "13.4.0", ngImport: i0, type: KmsUiPresentationalModule, providers: [
+        ViewportService
+    ], imports: [[
+            CommonModule,
+            DragDropModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatRadioModule,
+            MatDialogModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatMenuModule,
+            CustomPipesModule,
+            GoogleMapsModule,
+            MatExpansionModule,
+            MatSelectModule,
+            MatProgressSpinnerModule,
+            DirectivesModule,
+            TranslateModule,
+            NgxUsefulSwiperModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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,
+                        DragDropModule,
+                        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
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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.mjs.map