@kms-ngx-ui/presentational 0.0.1

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

@@ -0,0 +1,1962 @@
+import { ɵɵdefineInjectable, Injectable, Component, EventEmitter, Input, Output, forwardRef, Renderer2, ViewChild, ApplicationRef, ChangeDetectorRef, Pipe, NgModule, VERSION, Inject, PLATFORM_ID, HostListener, NgZone } from '@angular/core';
+import { CurrencyPipe, CommonModule, isPlatformBrowser } from '@angular/common';
+import { NG_VALUE_ACCESSOR, FormBuilder, FormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+import { trigger, state, style } from '@angular/animations';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { SubSink } from 'subsink';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+class KmsUiPresentationalService {
+    constructor() { }
+}
+KmsUiPresentationalService.ɵprov = ɵɵdefineInjectable({ factory: function KmsUiPresentationalService_Factory() { return new KmsUiPresentationalService(); }, token: KmsUiPresentationalService, providedIn: "root" });
+KmsUiPresentationalService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+KmsUiPresentationalService.ctorParameters = () => [];
+
+class KmsUiPresentationalComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+KmsUiPresentationalComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'lib-kms-ngx-ui-presentational',
+                template: `
+    <p>
+      kms-ngx-ui-presentational works!
+    </p>
+  `
+            },] }
+];
+KmsUiPresentationalComponent.ctorParameters = () => [];
+
+/*!
+ * @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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-actions',
+                template: ''
+            },] }
+];
+ActionsParentComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    checked: [{ type: Input }],
+    label: [{ type: Input }],
+    link: [{ type: Input }],
+    initialValue: [{ type: Input }],
+    select: [{ type: Output }]
+};
+
+/*!
+ * @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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-checkbox',
+                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>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => CheckboxComponent),
+                        multi: true,
+                    },
+                ],
+                styles: [".test{color:#0000cd}"]
+            },] }
+];
+CheckboxComponent.ctorParameters = () => [];
+CheckboxComponent.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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-form',
+                template: ''
+            },] }
+];
+FormParentComponent.ctorParameters = () => [
+    { type: FormBuilder }
+];
+FormParentComponent.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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-formControlParent',
+                template: ''
+            },] }
+];
+FormControlParentComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: Renderer2 }
+];
+FormControlParentComponent.propDecorators = {
+    defaultDataOverride: [{ type: Input }],
+    onSelectItemEmitter: [{ type: Output }],
+    child: [{ type: ViewChild, args: ['child',] }]
+};
+
+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: '',
+        });
+        this.formInitialized = true;
+        this.form.valueChanges.subscribe((value) => {
+            this.internalValue = value.color;
+            this.onChange(value.color);
+        });
+        super.ngOnInit();
+    }
+    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;
+    }
+}
+ColorInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-color-input',
+                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\" [value]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" formControlName=\"color\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => ColorInputComponent),
+                        multi: true,
+                    },
+                ],
+                styles: [".colorInput{position:relative}.colorInput input[type=color]{display:block;position:absolute;width:20px;height:20px;left:0;bottom:10px;padding:0;margin:0;border:1px solid transparent}.colorInput input.my-inValid[type=color]{border:1px dotted red}.colorInput input[type=text]{padding-left:30px}.colorInput input.my-inValid[type=text]{color:red}.colorInput kms-tooltip-icon{position:absolute;right:0;top:-10px}.colorInput .mat-form-field-label{padding-left:30px}.colorInput .mat-form-field-can-float.mat-focused .mat-form-label{padding-left:0}"]
+            },] }
+];
+ColorInputComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: Renderer2 }
+];
+ColorInputComponent.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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-radiobutton',
+                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",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => RadioButtonComponent),
+                        multi: true,
+                    },
+                ],
+                styles: [".wrapper{position:relative;display:inline-block;padding-left:35px;cursor:pointer}.wrapper input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.wrapper.disabled{cursor:default}"]
+            },] }
+];
+RadioButtonComponent.ctorParameters = () => [];
+RadioButtonComponent.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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-time-input',
+                template: "<form [formGroup]=\"form\" class=\"timeInput\">\n    <input formControlName=\"h\" [value]=\"h\" maxlength=\"2\" />\n    <span>:</span>\n    <input formControlName=\"m\" [value]=\"m\" maxlength=\"2\" />\n</form>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => TimeInputComponent),
+                        multi: true,
+                    },
+                ],
+                styles: [".timeInput{display:inline}.timeInput input{width:2em;margin-right:4px;margin-left:4px;font-size:16px}"]
+            },] }
+];
+TimeInputComponent.ctorParameters = () => [
+    { type: 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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-yesno-radiogroup',
+                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",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => YesNoRadiogroupComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+YesNoRadiogroupComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: Renderer2 }
+];
+YesNoRadiogroupComponent.propDecorators = {
+    header: [{ type: Input }],
+    disabled: [{ type: Input }],
+    textYes: [{ type: Input }],
+    textNo: [{ type: Input }],
+    child: [{ type: ViewChild, args: ['child',] }]
+};
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+var IconSize;
+(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 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;
+}
+
+// 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;
+        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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-file-input',
+                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>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => FileInputComponent),
+                        multi: true,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => FileInputComponent),
+                        multi: true,
+                    },
+                ],
+                styles: [""]
+            },] }
+];
+FileInputComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: ApplicationRef },
+    { type: ChangeDetectorRef },
+    { type: Renderer2 }
+];
+FileInputComponent.propDecorators = {
+    fileInput: [{ type: ViewChild, args: ['fileInput',] }],
+    label: [{ type: Input }],
+    previewImage: [{ type: Input }],
+    allowRemove: [{ type: Input }],
+    previewImageText: [{ type: Input }],
+    maxSizeBytes: [{ type: Input }],
+    resizePixels: [{ type: Input }],
+    acceptedFileMimetypes: [{ type: Input }],
+    formDataChanged: [{ type: Output }]
+};
+
+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.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: [""]
+            },] }
+];
+LoaderComponent.ctorParameters = () => [];
+LoaderComponent.propDecorators = {
+    loading: [{ type: Input }]
+};
+
+/*!
+ * @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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-flyout',
+                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",
+                animations: [
+                    trigger('dropdownAnimation', [
+                        state('true', style({
+                            height: '{{targetHeight}}',
+                            transition: 'height {{animationTime}}ms ease-in-out',
+                        }), {
+                            params: {
+                                targetHeight: '300px',
+                                animationTime: 3000,
+                            },
+                        }),
+                        state('false', style({
+                            height: 0,
+                            transition: 'height {{animationTime}}ms ease-in-out',
+                        }), {
+                            params: {
+                                targetHeight: '300px',
+                                opacity: 0,
+                                animationTime: 3000,
+                            },
+                        }),
+                    ]),
+                ],
+                styles: [".flyout{position:relative;display:block;padding:20px 45px}.flyout-header-more{font:normal normal normal 16px/25px var(--fontName-text03);letter-spacing:.26px;color:var(--primaryColor);cursor:pointer}.flyout-header-more kms-icon .icon,.flyout-header-more kms-icon .icon svg{width:16px!important;height:20px!important}.flyout-header-more kms-icon .icon svg use{fill:var(--primaryColor)}.flyout-body{padding:0;margin:0;overflow:hidden;outline:none}"]
+            },] }
+];
+FlyoutComponent.propDecorators = {
+    icon: [{ type: Input }],
+    headerCssClass: [{ type: Input }],
+    bodyCssClass: [{ type: Input }],
+    headerTitle: [{ type: Input }],
+    headerText: [{ type: Input }],
+    hasButtonForMore: [{ type: Input }],
+    moreText: [{ type: Input }],
+    lessText: [{ type: Input }],
+    content: [{ type: ViewChild, args: ['content',] }],
+    flyoutHeader: [{ type: ViewChild, args: ['flyoutHeader',] }]
+};
+
+/**
+ * @copyright KMS GmbH
+ */
+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.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsIntegerCurrency',
+            },] }
+];
+IntegerCurrency.ctorParameters = () => [
+    { type: CurrencyPipe }
+];
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class DecodeUriPipe {
+    transform(value, _args) {
+        return decodeURI(value);
+    }
+}
+DecodeUriPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsDecodeUri',
+            },] }
+];
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class EncodeUriPipe {
+    transform(value, _args) {
+        return encodeURI(value);
+    }
+}
+EncodeUriPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsEncodeUri',
+            },] }
+];
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class SafeHtmlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+}
+SafeHtmlPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsSafeHtml',
+            },] }
+];
+SafeHtmlPipe.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+/**
+ * @copyright KMS GmbH
+ */
+class SafeStylePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(style) {
+        return this.sanitizer.bypassSecurityTrustStyle(style);
+    }
+}
+SafeStylePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsSafeStyle',
+            },] }
+];
+SafeStylePipe.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+/**
+ * @copyright KMS GmbH
+ */
+class SafeUrlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(style) {
+        return this.sanitizer.bypassSecurityTrustUrl(style);
+    }
+}
+SafeUrlPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsSafeSUrl',
+            },] }
+];
+SafeUrlPipe.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+class TypeofPipe {
+    transform(value) {
+        return typeof value;
+    }
+}
+TypeofPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsTypeOf',
+            },] }
+];
+
+/**
+ * @copyright KMS GmbH
+ */
+class TrimPipe {
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        return value.trim();
+    }
+}
+TrimPipe.decorators = [
+    { type: Pipe, args: [{ name: 'kmsTrim' },] }
+];
+
+/**
+ * @copyright KMS GmbH
+ */
+class ToNumberPipe {
+    transform(items) {
+        if (!items) {
+            return 0;
+        }
+        return parseInt(items, 10);
+    }
+}
+ToNumberPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'kmsToNumber',
+                pure: false
+            },] }
+];
+
+/**
+ * @copyright KMS GmbH
+ */
+class CustomPipesModule {
+}
+CustomPipesModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    IntegerCurrency,
+                    SafeHtmlPipe,
+                    SafeStylePipe,
+                    SafeUrlPipe,
+                    EncodeUriPipe,
+                    DecodeUriPipe,
+                    TypeofPipe,
+                    TrimPipe,
+                    ToNumberPipe,
+                ],
+                imports: [CommonModule],
+                exports: [
+                    IntegerCurrency,
+                    SafeHtmlPipe,
+                    SafeStylePipe,
+                    SafeUrlPipe,
+                    EncodeUriPipe,
+                    DecodeUriPipe,
+                    TypeofPipe,
+                    TrimPipe,
+                    ToNumberPipe,
+                ],
+                providers: [CurrencyPipe],
+            },] }
+];
+
+/*!
+ * @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 KMS GmbH
+ */
+class IconComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        /**
+         * Optional: Different size via CSS inline style.
+         */
+        this.iconSize = IconSize$1.FULLSIZE;
+        /**
+         * Dont use icon sprite
+         */
+        this.dontUseSprite = false;
+        this.IconSize = IconSize$1;
+        this.Version = VERSION.full;
+        this.timestamp = 0;
+        this.iconToShow = this.icon;
+    }
+    ngOnInit() {
+        this.iconToShow = this.icon;
+        const d = new Date();
+        const n = d.getTime();
+        this.timestamp = n;
+    }
+}
+IconComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-icon',
+                template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\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: [""]
+            },] }
+];
+IconComponent.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+IconComponent.propDecorators = {
+    icon: [{ type: Input }],
+    iconClass: [{ type: Input }],
+    iconStyle: [{ type: Input }],
+    iconSize: [{ type: Input }],
+    dontUseSprite: [{ type: Input }]
+};
+
+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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-enum-radiogroup',
+                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>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => EnumRadiogroupComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+EnumRadiogroupComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: Renderer2 }
+];
+EnumRadiogroupComponent.propDecorators = {
+    header: [{ type: Input }],
+    optionsEnum: [{ type: Input }],
+    translationPrefix: [{ type: Input }]
+};
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+/**
+ * A generic dialog component
+ */
+class KMSAccordionItemComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.itemTitle = '';
+        this.showAsCard = false;
+        this.isSmall = false;
+        this.panelOpenState = false;
+    }
+    ngOnInit() {
+        this.itemTitleTrustHtml = this.sanitizer.bypassSecurityTrustHtml(this.itemTitle);
+    }
+}
+KMSAccordionItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-accordion-item',
+                template: "<mat-expansion-panel\n    class=\"accordion-item\" \n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\" \n    (closed)=\"panelOpenState = false\"\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>",
+                styles: [""]
+            },] }
+];
+KMSAccordionItemComponent.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+KMSAccordionItemComponent.propDecorators = {
+    itemTitle: [{ type: Input }],
+    showAsCard: [{ type: Input }],
+    isSmall: [{ 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.decorators = [
+    { type: Injectable }
+];
+ViewportService.ctorParameters = () => [
+    { 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;
+                // react to browser resize
+                this.setMapWidth(this.viewPortService.getDocumentWidth());
+                this.viewportSubscription = this.viewPortService.getViewportResizedObserver().subscribe((val) => {
+                    this.setMapWidth(val);
+                }, (error) => {
+                    console.error('Get updated ViewPort failed', error);
+                });
+            }
+            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 },
+        });
+    }
+    /**
+     * sets the width of map accodring to viewport
+     */
+    setMapWidth(val) {
+        if (val < 991) {
+            this.width = (val - 84) + 'px';
+        }
+        else {
+            this.width = '100%';
+        }
+        this.widthSet = true;
+    }
+    /**
+     * 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.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: [""]
+            },] }
+];
+MapComponent.ctorParameters = () => [
+    { type: ViewportService }
+];
+MapComponent.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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-salutation-dropdown',
+                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>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => SalutationDropdownComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+SalutationDropdownComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: Renderer2 }
+];
+SalutationDropdownComponent.propDecorators = {
+    placeholder: [{ type: Input }]
+};
+
+class TooltipComponent {
+    constructor() {
+        this.tooltipTitle = "";
+    }
+}
+TooltipComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-tooltip-element',
+                template: "<ng-content></ng-content>",
+                styles: ["[kmsTooltip]{position:relative}"]
+            },] }
+];
+TooltipComponent.propDecorators = {
+    tooltipTitle: [{ type: Input }]
+};
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+/**
+ * Attached File DTO
+ */
+class AttachedFileDTO {
+}
+
+class TooltipIconComponent {
+    constructor() {
+        this.tooltipTitle = "";
+        this.tooltipText = "";
+        this.tooltipLinkText = "";
+        this.tooltipLinkUrl = "";
+        this.placement = "";
+        this.delay = 1000;
+        this.IconSize = IconSize;
+    }
+}
+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: [""]
+            },] }
+];
+TooltipIconComponent.propDecorators = {
+    tooltipTitle: [{ type: Input }],
+    tooltipText: [{ type: Input }],
+    tooltipLinkText: [{ type: Input }],
+    tooltipLinkUrl: [{ type: Input }],
+    placement: [{ type: Input }],
+    delay: [{ 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.decorators = [
+    { type: Component, args: [{
+                selector: 'kms-salutation-radiogroup',
+                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>",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => SalutationRadiogroupComponent),
+                        multi: true,
+                    },
+                ]
+            },] }
+];
+SalutationRadiogroupComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: 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.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>"
+            },] }
+];
+BackToTopComponent.ctorParameters = () => [
+    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
+];
+BackToTopComponent.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.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: [""]
+            },] }
+];
+GenericDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: 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.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: [""]
+            },] }
+];
+ButtonWithConfirmDialogComponent.ctorParameters = () => [
+    { type: MatDialog }
+];
+ButtonWithConfirmDialogComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    buttonText: [{ type: Input }],
+    confirmTitle: [{ type: Input }],
+    confirmTextYes: [{ type: Input }],
+    confirmTextNo: [{ type: Input }],
+    onConfirmClosed: [{ type: Output }]
+};
+
+class KmsUiPresentationalModule {
+}
+KmsUiPresentationalModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    KmsUiPresentationalComponent,
+                    ActionsParentComponent,
+                    CheckboxComponent,
+                    ColorInputComponent,
+                    RadioButtonComponent,
+                    TimeInputComponent,
+                    YesNoRadiogroupComponent,
+                    FileInputComponent,
+                    LoaderComponent,
+                    FlyoutComponent,
+                    IconComponent,
+                    EnumRadiogroupComponent,
+                    KMSAccordionItemComponent,
+                    EnumRadiogroupComponent,
+                    MapComponent,
+                    SalutationDropdownComponent,
+                    SalutationRadiogroupComponent,
+                    TooltipComponent,
+                    TooltipIconComponent,
+                    BackToTopComponent,
+                    GenericDialogComponent,
+                    ButtonWithConfirmDialogComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    MatCheckboxModule,
+                    MatButtonModule,
+                    MatRadioModule,
+                    MatDialogModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    CustomPipesModule,
+                    GoogleMapsModule,
+                    MatExpansionModule,
+                ],
+                exports: [
+                    KmsUiPresentationalComponent,
+                    ActionsParentComponent,
+                    CheckboxComponent,
+                    ColorInputComponent,
+                    RadioButtonComponent,
+                    TimeInputComponent,
+                    YesNoRadiogroupComponent,
+                    FileInputComponent,
+                    LoaderComponent,
+                    FlyoutComponent,
+                    IconComponent,
+                    EnumRadiogroupComponent,
+                    KMSAccordionItemComponent,
+                    EnumRadiogroupComponent,
+                    MapComponent,
+                    SalutationDropdownComponent,
+                    SalutationRadiogroupComponent,
+                    TooltipComponent,
+                    TooltipIconComponent,
+                    BackToTopComponent,
+                    GenericDialogComponent,
+                    ButtonWithConfirmDialogComponent
+                ]
+            },] }
+];
+
+/*
+ * Public API Surface of kms-ngx-ui-presentational
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericDialogComponent, IconSize, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, SalutationEnum, ActionsParentComponent as ɵa, CheckboxComponent as ɵb, SafeStylePipe as ɵba, SafeUrlPipe as ɵbb, EncodeUriPipe as ɵbc, DecodeUriPipe as ɵbd, TypeofPipe as ɵbe, TrimPipe as ɵbf, ToNumberPipe as ɵbg, ColorInputComponent as ɵc, FormControlParentComponent as ɵd, FormParentComponent as ɵe, RadioButtonComponent as ɵf, TimeInputComponent as ɵg, YesNoRadiogroupComponent as ɵh, FileInputComponent as ɵi, LoaderComponent as ɵj, FlyoutComponent as ɵk, IconComponent as ɵl, EnumRadiogroupComponent as ɵm, KMSAccordionItemComponent as ɵn, MapComponent as ɵo, ViewportService as ɵp, SalutationDropdownComponent as ɵq, SalutationRadiogroupComponent as ɵr, TooltipComponent as ɵs, TooltipIconComponent as ɵt, BackToTopComponent as ɵu, ButtonWithConfirmDialogComponent as ɵw, CustomPipesModule as ɵx, IntegerCurrency as ɵy, SafeHtmlPipe as ɵz };
+//# sourceMappingURL=kms-ngx-ui-presentational.js.map