@kms-ngx-ui/presentational 0.0.23 → 0.0.24

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

@@ -1,13 +1,14 @@
 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 { CommonModule, CurrencyPipe, isPlatformBrowser, DOCUMENT } 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 { SubSink } from 'subsink';
 import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1$2 from '@angular/platform-browser';
@@ -15,7 +16,7 @@ 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 * as i6 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';
@@ -28,13 +29,12 @@ 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 * as i6$1 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';
@@ -201,15 +201,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /*!
  * @copyright FLYACTS GmbH 2019
  */
-class FormParentComponent {
+class ColorableParentComponent {
+    setupColors(elementRef) {
+        if (this.color) {
+            let color1;
+            let color2;
+            if (this.color === 'primary' || this.color === 'accent') {
+                color1 = 'var(--' + this.color + 'Color)';
+                color2 = 'var(--' + this.color + 'ColorHover)';
+            }
+            else {
+                color1 = this.color;
+                color2 = this.color;
+            }
+            elementRef.style.setProperty('--componentColor', color1);
+            elementRef.style.setProperty('--componentColorHover', color2);
+        }
+    }
+}
+ColorableParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorableParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorableParentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorableParentComponent, selector: "ng-component", inputs: { color: "color" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorableParentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '',
+                    template: '',
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }] } });
+
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+class FormParentComponent extends ColorableParentComponent {
     constructor(formBuilder) {
+        super();
         this.formBuilder = formBuilder;
+        this.disabled = false;
+        this.showRequired = false;
         this.formInitialized = false;
-        this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map(c => c.charCodeAt(0)));
+        this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map((c) => c.charCodeAt(0)));
+        this.subs = new SubSink();
         this.formDataChanged = new EventEmitter();
-        this.disabled = false;
     }
-    // TODO make a service or make own compoennt etc.
+    // TODO make a service or make own component etc.
     /**
      * Returns if a number was pressed
      * @param e
@@ -222,9 +258,15 @@ class FormParentComponent {
         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.
+        const isTab = 9;
+        return (isNumberRow ||
+            isNumberPad ||
+            isTab ||
+            (allowDelete && isDelete) ||
+            (allowArrows && isArrows) ||
+            (allowCutCopyPaste && isCutCopyOrPaste));
+    }
+    // TODO make a service or make own component etc.
     /**
      * Prevents to input other chars than numbers in input
      * @param event
@@ -235,7 +277,7 @@ class FormParentComponent {
             event.preventDefault();
         }
     }
-    // TODO make a service or make own compoennt etc.
+    // TODO make a service or make own component etc.
     /**
      * Prevents input when pasting which is not number
      * @param event
@@ -253,24 +295,34 @@ class FormParentComponent {
         }
     }
     ngOnInit() {
-        this.formDataChanged.emit(this.form);
-        this.form.valueChanges.subscribe(() => {
+        this.initFormEvent();
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    initFormEvent() {
+        if (this.form) {
             this.formDataChanged.emit(this.form);
-        });
+            this.form.valueChanges.subscribe(() => {
+                this.formDataChanged.emit(this.form);
+            });
+        }
     }
 }
 FormParentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormParentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-FormParentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0, template: '', isInline: true });
+FormParentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled", showRequired: "showRequired" }, outputs: { formDataChanged: "formDataChanged" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormParentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kms-form',
                     template: '',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { formDataChanged: [{
-                type: Output
-            }], disabled: [{
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], showRequired: [{
                 type: Input
+            }], formDataChanged: [{
+                type: Output
             }] } });
 
 class FormControlParentComponent extends FormParentComponent {
@@ -319,7 +371,8 @@ class FormControlParentComponent extends FormParentComponent {
         this.onTouch = fn;
     }
     setDisabledState(isDisabled) {
-        if (this.child) {
+        var _a;
+        if ((_a = this.child) === null || _a === void 0 ? void 0 : _a.nativeElement) {
             this.renderer.setProperty(this.child.nativeElement, 'disabled', isDisabled);
         }
     }
@@ -344,16 +397,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['child']
             }] } });
 
-/*!
- * @copyright FLYACTS GmbH 2019
- */
-
-/**
- * Attached File DTO
- */
-class AttachedFileDTO {
-}
-
 /*!
  * @copyright FLYACTS GmbH 2019
  */
@@ -369,41 +412,18 @@ var IconSize$1;
     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 = {}));
+})(IconSize$1 || (IconSize$1 = {}));
+var IconSizePx;
+(function (IconSizePx) {
+    IconSizePx[IconSizePx["TINY"] = 16] = "TINY";
+    IconSizePx[IconSizePx["SMALLER"] = 20] = "SMALLER";
+    IconSizePx[IconSizePx["SMALL"] = 32] = "SMALL";
+    IconSizePx[IconSizePx["MEDIUM"] = 64] = "MEDIUM";
+    IconSizePx[IconSizePx["LARGE"] = 128] = "LARGE";
+    IconSizePx[IconSizePx["XL"] = 256] = "XL";
+    IconSizePx[IconSizePx["XXL"] = 512] = "XXL";
+    IconSizePx[IconSizePx["XXXL"] = 1024] = "XXXL";
+})(IconSizePx || (IconSizePx = {}));
 
 /**
  * @copyright KMS GmbH
@@ -413,13 +433,14 @@ class IconComponent {
         this.sanitizer = sanitizer;
         /**
          * Optional: Different size via CSS inline style.
+         * @deprecated. Please use size instead
          */
-        this.iconSize = IconSize.FULLSIZE;
+        this.iconSize = IconSize$1.FULLSIZE;
         /**
          * Dont use icon sprite
          */
         this.dontUseSprite = false;
-        this.IconSize = IconSize;
+        this.IconSize = IconSize$1;
         this.Version = VERSION.full;
         this.timestamp = 0;
         this.iconToShow = this.icon;
@@ -432,7 +453,7 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IconComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", dontUseSprite: "dontUseSprite" }, ngImport: i0, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\r\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\r\n    <svg>\r\n      <use\r\n        [attr.xlink:href]=\"\r\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\r\n        \"\r\n      ></use>\r\n    </svg>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\r\n  <object\r\n    [data]=\"\r\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\r\n    \"\r\n    type=\"image/svg+xml\"\r\n    class=\"icon {{ iconSize }}\"\r\n    [ngClass]=\"iconClass\"\r\n    [ngStyle]=\"iconStyle\"\r\n  ></object>\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", size: "size", dontUseSprite: "dontUseSprite" }, ngImport: i0, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\r\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\" [style.width.px]=\"size ? size : undefined\" [style.height.px]=\"size ? size : undefined\">\r\n    <svg>\r\n      <use\r\n        [attr.xlink:href]=\"\r\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\r\n        \"\r\n      ></use>\r\n    </svg>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\r\n  <object\r\n    [data]=\"\r\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\r\n    \"\r\n    type=\"image/svg+xml\"\r\n    class=\"icon {{ iconSize }}\"\r\n    [ngClass]=\"iconClass\"\r\n    [ngStyle]=\"iconStyle\"\r\n  ></object>\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
@@ -448,6 +469,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], iconSize: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], dontUseSprite: [{
                 type: Input
             }] } });
@@ -594,6 +617,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['mouseleave']
             }] } });
 
+class SizeDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.size = '';
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.style.width(this.size + 'px');
+        this.elementRef.nativeElement.style.height(this.size + 'px');
+    }
+}
+SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SizeDirective, selector: "[size]", inputs: { size: "size" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SizeDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[size]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
+
 class TooltipIconComponent {
     constructor() {
         this.tooltipTitle = "";
@@ -602,11 +644,11 @@ class TooltipIconComponent {
         this.tooltipLinkUrl = "";
         this.placement = "";
         this.delay = 1000;
-        this.IconSize = IconSize$1;
+        this.IconSizePx = IconSizePx;
     }
 }
 TooltipIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0, template: "<span\r\n    kmsTooltip\r\n    [tooltipTitle]=\"tooltipTitle\"\r\n    [tooltipText]=\"tooltipText\"\r\n    [tooltipPlacement]=\"placement\"\r\n    [tooltipDelay]=\"delay\"\r\n    [tooltipLinkText]=\"tooltipLinkText\"\r\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\r\n>\r\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\r\n</span>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }] });
+TooltipIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0, template: "<span\r\n    kmsTooltip\r\n    [tooltipTitle]=\"tooltipTitle\"\r\n    [tooltipText]=\"tooltipText\"\r\n    [tooltipPlacement]=\"placement\"\r\n    [tooltipDelay]=\"delay\"\r\n    [tooltipLinkText]=\"tooltipLinkText\"\r\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\r\n>\r\n    <kms-icon icon=\"ic_info\" [size]=\"IconSizePx.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\r\n</span>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipIconComponent, decorators: [{
             type: Component,
             args: [{
@@ -715,6 +757,7 @@ class RadioButtonComponent extends ActionsParentComponent {
          * Internal description id. Will be send in the output event when the radio button is selected.
          */
         this.id = '';
+        this.radioButtonSize = 16;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -743,13 +786,13 @@ class RadioButtonComponent extends ActionsParentComponent {
     }
 }
 RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", formControl: "formControl" }, providers: [
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", radioButtonSize: "radioButtonSize", formControl: "formControl" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioButtonComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<label class=\"wrapper ui-small-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">\r\n    <input type=\"radio\"\r\n           [name]=\"name\"\r\n           [value]=\"value\"\r\n           [checked]=\"checked\"\r\n           [disabled]=\"disabled\"\r\n           [id]=\"id\"\r\n           (change)=\"selectAction($event)\">{{label}}\r\n\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true,\r\n                'size-16': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_active'\"\r\n        >\r\n    </kms-icon>\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"!checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true,\r\n                'size-16': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_inactive'\"\r\n        >\r\n    </kms-icon>\r\n    <ng-content></ng-content>\r\n</label>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<label class=\"wrapper ui-small-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">\r\n    <input type=\"radio\"\r\n           [name]=\"name\"\r\n           [value]=\"value\"\r\n           [checked]=\"checked\"\r\n           [disabled]=\"disabled\"\r\n           [id]=\"id\"\r\n           (change)=\"selectAction($event)\">{{label}}\r\n\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_active'\"\r\n            [size]=\"radioButtonSize\"\r\n        >\r\n    </kms-icon>\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"!checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_inactive'\"\r\n            [size]=\"radioButtonSize\"\r\n        >\r\n    </kms-icon>\r\n    <ng-content></ng-content>\r\n</label>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -768,6 +811,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], id: [{
                 type: Input
+            }], radioButtonSize: [{
+                type: Input
             }], formControl: [{
                 type: Input
             }] } });
@@ -937,6 +982,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['child']
             }] } });
 
+/**
+ * @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 {
@@ -971,7 +1033,7 @@ class FileInputComponent {
         });
         this.subscriptions = [];
         this.newImageLoading = false;
-        this.IconSize = IconSize$1;
+        this.IconSizePx = IconSizePx;
         this.formDataChanged = new EventEmitter();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
@@ -1122,7 +1184,7 @@ FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => FileInputComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \r\n\r\n    <div *ngIf=\"form.value.Filename && previewImage\">\r\n        <div *ngIf=\"newImageLoading\">\r\n            {{ 'file-input.loading' | translate }}\r\n        </div>\r\n        <div *ngIf=\"!newImageLoading\">\r\n            <div class=\"\">\r\n                <div class=\"\">\r\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\r\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\r\n                </div>\r\n                <div class=\"\">{{form.value.Filename}}</div>\r\n                <div class=\"\">\r\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\r\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \r\n                        {{ 'file-input.remove' }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!previewImage\">\r\n        <div class=\"\">{{form.value.Filename}}</div>\r\n    </div>\r\n\r\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\r\n        <span>{{ label }}</span>\r\n    </button>\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"acceptedFileMimetypes\"\r\n        style=\"display: none\"\r\n        #fileInput\r\n        (click)=\"clearInputValue($event)\"\r\n        (change)=\"selectImage($event)\"\r\n    />\r\n\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\r\n\r\n</form>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { type: i2$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \r\n\r\n    <div *ngIf=\"form.value.Filename && previewImage\">\r\n        <div *ngIf=\"newImageLoading\">\r\n            {{ 'file-input.loading' | translate }}\r\n        </div>\r\n        <div *ngIf=\"!newImageLoading\">\r\n            <div class=\"\">\r\n                <div class=\"\">\r\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\r\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\r\n                </div>\r\n                <div class=\"\">{{form.value.Filename}}</div>\r\n                <div class=\"\">\r\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\r\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \r\n                        {{ 'file-input.remove' }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!previewImage\">\r\n        <div class=\"\">{{form.value.Filename}}</div>\r\n    </div>\r\n\r\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\r\n        <span>{{ label }}</span>\r\n    </button>\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"acceptedFileMimetypes\"\r\n        style=\"display: none\"\r\n        #fileInput\r\n        (click)=\"clearInputValue($event)\"\r\n        (change)=\"selectImage($event)\"\r\n    />\r\n\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\r\n\r\n</form>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "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: SizeDirective, selector: "[size]", inputs: ["size"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -1315,7 +1377,7 @@ class FlyoutComponent {
     }
 }
 FlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\"\r\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\r\n>\r\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\r\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\r\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\r\n\r\n        <ng-content select=\"[header]\"></ng-content>\r\n\r\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\r\n            <span *ngIf=\"!isDropdownOpened\">\r\n                {{ moreText }}\r\n            </span>\r\n            <span *ngIf=\"isDropdownOpened\">\r\n                {{ lessText }}\r\n            </span>\r\n            <kms-icon [icon]=\"'chevron-down'\"\r\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\r\n            </kms-icon>\r\n        </div>\r\n    </div>\r\n    <div \r\n        class=\"flyout-body\"\r\n        [ngClass]=\"bodyCssClass\"\r\n        tabindex=\"0\"\r\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\r\n        getMaxHeight=\"inner\"\r\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\r\n        #flyoutHeader>\r\n        <div class=\"inner\" #content>\r\n            <ng-content ></ng-content>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }], pipes: { "kmsSafeHtml": SafeHtmlPipe }, animations: [
+FlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\"\r\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\r\n>\r\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\r\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\r\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\r\n\r\n        <ng-content select=\"[header]\"></ng-content>\r\n\r\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\r\n            <span *ngIf=\"!isDropdownOpened\">\r\n                {{ moreText }}\r\n            </span>\r\n            <span *ngIf=\"isDropdownOpened\">\r\n                {{ lessText }}\r\n            </span>\r\n            <kms-icon [icon]=\"'chevron-down'\" [ngClass]=\"{'is-rotating180':isDropdownOpened}\" [size]=\"16\">\r\n            </kms-icon>\r\n        </div>\r\n    </div>\r\n    <div \r\n        class=\"flyout-body\"\r\n        [ngClass]=\"bodyCssClass\"\r\n        tabindex=\"0\"\r\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\r\n        getMaxHeight=\"inner\"\r\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\r\n        #flyoutHeader>\r\n        <div class=\"inner\" #content>\r\n            <ng-content ></ng-content>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }, { type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }], pipes: { "kmsSafeHtml": SafeHtmlPipe }, animations: [
         trigger('dropdownAnimation', [
             state('true', style({
                 height: '{{targetHeight}}',
@@ -1648,7 +1710,7 @@ EnumRadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => EnumRadiogroupComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i5$1.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1690,7 +1752,7 @@ class KMSAccordionItemComponent {
     }
 }
 KMSAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0, template: "<mat-expansion-panel\r\n    class=\"accordion-item\"\r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\"\r\n    (closed)=\"panelOpenState = false\"\r\n    [expanded] = \"expanded\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>\r\n", styles: [""], components: [{ type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0, template: "<mat-expansion-panel\r\n    class=\"accordion-item\"\r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\"\r\n    (closed)=\"panelOpenState = false\"\r\n    [expanded] = \"expanded\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>\r\n", styles: [""], components: [{ type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1715,12 +1777,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Service to get viewport
  */
 class ViewportService {
-    constructor(platformId) {
+    constructor(platformId, document) {
         this.platformId = platformId;
+        this.document = document;
         this.viewports = [
             {
                 name: 'xs',
-                low: 420,
+                low: 360,
                 high: 990,
             },
             {
@@ -1735,7 +1798,7 @@ class ViewportService {
             },
             {
                 name: 'l',
-                low: 12001,
+                low: 1201,
                 high: 1400,
             },
             {
@@ -1756,45 +1819,52 @@ class ViewportService {
         ];
         this.viewportChangedSubscriber = new Subject();
         this.viewportResizedSubscriber = new Subject();
+        this.isBrowser = false;
         if (isPlatformBrowser(this.platformId)) {
             window.addEventListener('resize', this.documentSizeChanged.bind(this), { passive: true });
+            this.isBrowser = true;
         }
     }
     /**
      * Get window height
      */
     getDocumentHeight() {
-        return isPlatformBrowser(this.platformId) ? document.body.clientHeight : 1200;
+        return this.isBrowser ? document.body.clientHeight : 1200;
     }
     /**
      * Get window width
      */
     getDocumentWidth() {
-        return isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
+        return this.isBrowser ? document.body.clientWidth : 1200;
     }
     /**
      * Get window height
      */
     getWindowHeight() {
-        return isPlatformBrowser(this.platformId) ? window.innerHeight : 1200;
+        return this.isBrowser ? window.innerHeight : 1200;
     }
     /**
      * Get window width
      */
     getWindowWidth() {
-        return isPlatformBrowser(this.platformId) ? window.innerWidth : 1200;
+        return this.isBrowser ? 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);
-        }
+        const currentWidth = this.isBrowser ? document.body.clientWidth : 1200;
+        this.currentViewport = this.convertWidthToMediaQuery(currentWidth);
         return this.currentViewport;
     }
+    /**
+     * Returns the current viewport MQ as string
+     * @returns string
+     */
+    getCurrentViewPortNumber() {
+        return this.isBrowser ? document.body.clientWidth : 1200;
+    }
     /**
      * Provides mq´s as string
      */
@@ -1808,7 +1878,7 @@ class ViewportService {
         return this.viewportResizedSubscriber.asObservable();
     }
     scrollToElementId(el, alignCenter = false) {
-        if (isPlatformBrowser(this.platformId)) {
+        if (this.isBrowser) {
             this.scrollToElement(document.querySelector('#' + el), alignCenter);
         }
     }
@@ -1818,24 +1888,20 @@ class ViewportService {
      * @param alignCenter - defines if the element needs to be centered on window
      */
     scrollToElement(el, alignCenter = false) {
-        if (isPlatformBrowser(this.platformId)) {
+        if (this.isBrowser) {
             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 offsetLeft = 0;
             let offsetTop = 0;
             let elTemp = el;
             while (elTemp) {
-                //offsetLeft += elTemp.offsetLeft;
+                offsetLeft += elTemp.offsetLeft;
                 offsetTop += elTemp.offsetTop;
                 elTemp = elTemp.parentElement ? elTemp.parentElement : null;
             }
-            window.scrollTo({ left: 0, top: offsetTop - extraScrollTop, behavior: 'smooth' });
+            window.scrollTo({ left: offsetLeft, top: offsetTop - extraScrollTop, behavior: 'smooth' });
         }
     }
     /**
@@ -1843,13 +1909,42 @@ class ViewportService {
      * @param top - top position value
      */
     scrollTop(top) {
-        if (isPlatformBrowser(this.platformId)) {
+        if (this.isBrowser) {
             window.scrollTo({ left: 0, top: top, behavior: 'smooth' });
         }
     }
-    ngOnDestroy() {
-        if (isPlatformBrowser(this.platformId)) {
-            window.removeEventListener('resize', this.documentSizeChanged);
+    isPortrait() {
+        if (this.isBrowser)
+            return window.innerHeight > window.innerWidth;
+        else
+            return;
+    }
+    isLandscape() {
+        if (this.isBrowser) {
+            const isLandscape = window.orientation === 90 || window.orientation === -90;
+            return isLandscape;
+        }
+        else {
+            return;
+        }
+    }
+    isMobile() {
+        return this.getCurrentViewPortNumber() < this.viewports[2].low;
+    }
+    calculateFullscreenElementsheight(id, defaultheight, extra) {
+        if (!this.isBrowser || this.isMobile()) {
+            return defaultheight;
+        }
+        else {
+            const map = this.document.getElementById(id);
+            const footer = this.document.getElementsByTagName('footer')[0];
+            if (map && footer) {
+                return `${window.innerHeight - map.offsetTop - footer.offsetHeight - extra}px`;
+            }
+            else {
+                console.warn('could not calculate map height');
+                return defaultheight;
+            }
         }
     }
     /**
@@ -1895,29 +1990,22 @@ class ViewportService {
         }
         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;
+    ngOnDestroy() {
+        if (this.isBrowser) {
+            window.removeEventListener('resize', this.documentSizeChanged);
         }
     }
 }
-ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
 ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewportService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }]; } });
 
 /*!
@@ -2023,7 +2111,7 @@ class MapComponent {
     }
 }
 MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapComponent, deps: [{ token: ViewportService }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\r\n    <google-map\r\n            height=\"415px\"\r\n            [width]=\"width\"\r\n            [zoom]=\"zoom\"\r\n            [center]=\"center\"\r\n            [options]=\"options\"\r\n    >\r\n        <map-marker\r\n            *ngFor=\"let marker of markers\"\r\n            [position]=\"marker.position\"\r\n            [label]=\"marker.label\"\r\n            [title]=\"marker.title\"\r\n            [options]=\"marker.options\"\r\n        >\r\n        </map-marker>\r\n    </google-map>\r\n</div>", styles: [""], components: [{ type: i2$5.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }] });
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress\">\r\n    <google-map\r\n            height=\"415px\"\r\n            [width]=\"width\"\r\n            [zoom]=\"zoom\"\r\n            [center]=\"center\"\r\n            [options]=\"options\"\r\n    >\r\n        <map-marker\r\n            *ngFor=\"let marker of markers\"\r\n            [position]=\"marker.position\"\r\n            [label]=\"marker.label\"\r\n            [title]=\"marker.title\"\r\n            [options]=\"marker.options\"\r\n        >\r\n        </map-marker>\r\n    </google-map>\r\n</div>", styles: [""], components: [{ type: i2$5.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
             args: [{
@@ -2074,7 +2162,7 @@ SalutationDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => SalutationDropdownComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"col\">\r\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\r\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>", components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"col\">\r\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\r\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>", components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -2110,6 +2198,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/*!
+ * @copyright FLYACTS GmbH 2019
+ */
+
+/**
+ * Attached File DTO
+ */
+class AttachedFileDTO {
+}
+
+/*!
+ * @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 = {}));
+
 class SalutationRadiogroupComponent extends FormControlParentComponent {
     constructor(formBuilder, renderer) {
         super(formBuilder, renderer);
@@ -2138,7 +2253,7 @@ SalutationRadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             useExisting: forwardRef(() => SalutationRadiogroupComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" >\r\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n</form>", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5$1.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" >\r\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n</form>", components: [{ type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -2186,7 +2301,7 @@ class BackToTopComponent {
     }
 }
 BackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div class=\"scrollToTop\"\r\n    [ngClass]=\"{'show': windowScrolled}\"\r\n    (click)=\"scrollToTop()\">\r\n        <div class=\"scrollToTop-inner\">\r\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\r\n        </div>\r\n</div>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div class=\"scrollToTop\"\r\n    [ngClass]=\"{'show': windowScrolled}\"\r\n    (click)=\"scrollToTop()\">\r\n        <div class=\"scrollToTop-inner\">\r\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\r\n        </div>\r\n</div>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BackToTopComponent, decorators: [{
             type: Component,
             args: [{
@@ -2806,7 +2921,7 @@ class ImageSliderComponent {
     }
 }
 ImageSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], components: [{ type: i2$6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i5$1.TranslatePipe } });
+ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], components: [{ type: i2$6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i6.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ImageSliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2897,10 +3012,12 @@ DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, declarations: [SwipeDirective,
         MouseWheelDirective,
         GetMaxHeightDirective,
-        TooltipDirective], imports: [CommonModule], exports: [SwipeDirective,
+        TooltipDirective,
+        SizeDirective], imports: [CommonModule], exports: [SwipeDirective,
         MouseWheelDirective,
         GetMaxHeightDirective,
-        TooltipDirective] });
+        TooltipDirective,
+        SizeDirective] });
 DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DirectivesModule, decorators: [{
             type: NgModule,
@@ -2910,6 +3027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         MouseWheelDirective,
                         GetMaxHeightDirective,
                         TooltipDirective,
+                        SizeDirective,
                     ],
                     imports: [CommonModule],
                     exports: [
@@ -2917,6 +3035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         MouseWheelDirective,
                         GetMaxHeightDirective,
                         TooltipDirective,
+                        SizeDirective,
                     ],
                 }]
         }] });
@@ -3102,5 +3221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * 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 };
+export { ActionsParentComponent, BackToTopComponent, ButtonWithConfirmDialogComponent, CheckboxComponent, ColorInputComponent, CustomPipesModule, DecodeUriPipe, DirectivesModule, DropdownFromDataComponent, EncodeUriPipe, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GenericDialogComponent, GetMaxHeightDirective, IconComponent, IconSize, ImageSliderComponent, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, MouseWheelDirective, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeStylePipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SizeDirective, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, YesNoRadiogroupComponent };
 //# sourceMappingURL=kms-ngx-ui-presentational.js.map