@kms-ngx-ui/presentational 14.1.0 → 14.1.2

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Directive, HostListener, VERSION, 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 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, UntypedFormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/material/checkbox';
@@ -15,7 +15,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/platform-browser';
 import * as i2$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@ngx-translate/core';
+import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i2$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -36,7 +36,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { EnumValues } from 'enum-values/src/enumValues';
 import * as i3$4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i6 from 'ngx-useful-swiper';
+import * as i6$1 from 'ngx-useful-swiper';
 import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
 
 class KmsUiPresentationalService {
@@ -196,7 +196,7 @@ class FormParentComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         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.formDataChanged = new EventEmitter();
         this.disabled = false;
     }
@@ -212,8 +212,13 @@ class FormParentComponent {
         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);
+        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.
     /**
@@ -222,7 +227,8 @@ class FormParentComponent {
      */
     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)) {
+        if (!this.checkIfKeyWasNumber(event) &&
+            !this.allowedCharsOnlyNumbers.has(event.keyCode)) {
             event.preventDefault();
         }
     }
@@ -310,7 +316,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);
         }
     }
@@ -335,12 +342,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['child']
             }] } });
 
-/**
- * Attached File DTO
- */
-class AttachedFileDTO {
-}
-
 /*!
  * @copyright FLYACTS GmbH 2019
  */
@@ -357,23 +358,17 @@ var IconSize$1;
     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;
-}
+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 = {}));
 
 class TooltipDirective {
     constructor(el, renderer) {
@@ -517,22 +512,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['mouseleave']
             }] } });
 
-/*!
- * @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 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: "14.3.0", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: SizeDirective, selector: "[size]", inputs: { size: "size" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[size]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
+                type: Input
+            }] } });
 
 /**
  * @copyright KMS GmbH
@@ -542,13 +539,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;
@@ -561,10 +559,10 @@ class IconComponent {
     }
 }
 IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", dontUseSprite: "dontUseSprite" }, ngImport: i0, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\" [style.width.px]=\"size ? size : undefined\" [style.height.px]=\"size ? size : undefined\">\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: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n" }]
+            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\" [style.width.px]=\"size ? size : undefined\" [style.height.px]=\"size ? size : undefined\">\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" }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { icon: [{
                 type: Input
             }], iconClass: [{
@@ -573,6 +571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], iconSize: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], dontUseSprite: [{
                 type: Input
             }] } });
@@ -585,14 +585,14 @@ 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: "14.3.0", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0, template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }] });
+TooltipIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0, template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [size]=\"IconSizePx.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-tooltip-icon', template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n" }]
+            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\" [size]=\"IconSizePx.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n" }]
         }], propDecorators: { tooltipTitle: [{
                 type: Input
             }], tooltipText: [{
@@ -689,6 +689,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
@@ -717,13 +718,13 @@ class RadioButtonComponent extends ActionsParentComponent {
     }
 }
 RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", formControl: "formControl" }, providers: [
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<label class=\"wrapper ui-small-text\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n            [size]=\"radioButtonSize\"\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            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n            [size]=\"radioButtonSize\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-radiobutton', providers: [
@@ -732,11 +733,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => RadioButtonComponent),
                             multi: true,
                         },
-                    ], template: "<label class=\"wrapper ui-small-text\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n" }]
+                    ], 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            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n            [size]=\"radioButtonSize\"\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            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n            [size]=\"radioButtonSize\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { name: [{
                 type: Input
             }], id: [{
                 type: Input
+            }], radioButtonSize: [{
+                type: Input
             }], formControl: [{
                 type: Input
             }] } });
@@ -897,6 +900,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 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 {
@@ -931,7 +951,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 = () => { };
@@ -1082,7 +1102,7 @@ FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-file-input', providers: [
@@ -1096,7 +1116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                             useExisting: forwardRef(() => FileInputComponent),
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>" }]
+                    ], 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\" [size]=\"IconSizePx.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>" }]
         }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -1266,7 +1286,7 @@ class FlyoutComponent {
     }
 }
 FlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\"\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
+FlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\" [ngClass]=\"{'is-rotating180':isDropdownOpened}\" [size]=\"16\">\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
         trigger('dropdownAnimation', [
             state('true', style({
                 height: '{{targetHeight}}',
@@ -1313,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                                 },
                             }),
                         ]),
-                    ], 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" }]
+                    ], 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'\" [ngClass]=\"{'is-rotating180':isDropdownOpened}\" [size]=\"16\">\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" }]
         }], propDecorators: { icon: [{
                 type: Input
             }], headerCssClass: [{
@@ -1594,7 +1614,7 @@ EnumRadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: forwardRef(() => EnumRadiogroupComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-enum-radiogroup', providers: [
@@ -1632,7 +1652,7 @@ class KMSAccordionItemComponent {
     }
 }
 KMSAccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0, template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }] });
+KMSAccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0, template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-accordion-item', template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n" }]
@@ -1649,90 +1669,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 /**
  * @copyright KMS GmbH
  */
+class SimpleBreakpoint {
+    constructor(data) {
+        Object.assign(this, data);
+    }
+}
+class Breakpoint {
+    constructor(data) {
+        Object.assign(this, data);
+    }
+}
 /**
  * Service to get viewport
  */
 class ViewportService {
-    constructor(platformId) {
+    constructor(platformId, document) {
         this.platformId = platformId;
-        this.viewports = [
+        this.document = document;
+        this.simpleBreakpoints = [
+            { Number: 0, Name: 'mobile', MaximumPixels: 768 },
+            { Number: 1, Name: 'tablet', MaximumPixels: 1024 },
+            { Number: 2, Name: 'desktop', MaximumPixels: 1600 },
+            { Number: 3, Name: 'high', MaximumPixels: 2500 },
+        ];
+        this.breakpoints = [
             {
-                name: 'xs',
-                low: 420,
-                high: 990,
+                Number: 0,
+                Name: 'xs',
+                Low: 360,
+                High: 990,
             },
             {
-                name: 's',
-                low: 991,
-                high: 1024,
+                Number: 1,
+                Name: 's',
+                Low: 991,
+                High: 1024,
             },
             {
-                name: 'm',
-                low: 1025,
-                high: 1200,
+                Number: 2,
+                Name: 'm',
+                Low: 1025,
+                High: 1200,
             },
             {
-                name: 'l',
-                low: 12001,
-                high: 1400,
+                Number: 3,
+                Name: 'l',
+                Low: 1201,
+                High: 1400,
             },
             {
-                name: 'xl',
-                low: 1401,
-                high: 1600,
+                Number: 4,
+                Name: 'xl',
+                Low: 1401,
+                High: 1600,
             },
             {
-                name: 'xxl',
-                low: 1601,
-                high: 1920,
+                Number: 5,
+                Name: 'xxl',
+                Low: 1601,
+                High: 1920,
             },
             {
-                name: 'xxxl',
-                low: 1921,
-                high: 99999,
+                Number: 6,
+                Name: 'xxxl',
+                Low: 1921,
+                High: 99999,
             },
         ];
         this.viewportChangedSubscriber = new Subject();
         this.viewportResizedSubscriber = new Subject();
+        this.isBrowser = false;
         if (isPlatformBrowser(this.platformId)) {
-            window.addEventListener('resize', this.documentSizeChanged.bind(this), { passive: true });
+            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).Name;
         return this.currentViewport;
     }
+    /**
+     * Returns the current viewport MQ as object with all informations
+     * @returns string
+     */
+    getCurrentViewPortObject() {
+        const currentWidth = this.isBrowser
+            ? document.body.clientWidth
+            : 1200;
+        this.currentViewportObject = this.convertWidthToMediaQuery(currentWidth);
+        return this.currentViewportObject;
+    }
+    /**
+     * Returns the current viewport as number
+     * @returns string
+     */
+    getCurrentViewPortNumber() {
+        return this.isBrowser ? document.body.clientWidth : 1200;
+    }
     /**
      * Provides mq´s as string
      */
@@ -1745,8 +1811,11 @@ class ViewportService {
     getViewportResizedObserver() {
         return this.viewportResizedSubscriber.asObservable();
     }
+    /**
+     * Scroll to element
+     */
     scrollToElementId(el, alignCenter = false) {
-        if (isPlatformBrowser(this.platformId)) {
+        if (this.isBrowser) {
             this.scrollToElement(document.querySelector('#' + el), alignCenter);
         }
     }
@@ -1756,24 +1825,24 @@ 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',
+            });
         }
     }
     /**
@@ -1781,15 +1850,63 @@ 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);
+    /**
+     * If orientation is portrait
+     */
+    isPortrait() {
+        if (this.isBrowser)
+            return window.innerHeight > window.innerWidth;
+        else
+            return;
+    }
+    /**
+     * If orientation is landscape
+     */
+    isLandscape() {
+        if (this.isBrowser) {
+            const isLandscape = window.orientation === 90 || window.orientation === -90;
+            return isLandscape;
+        }
+        else {
+            return;
         }
     }
+    /**
+     * If mobile breakpoint (below tablet)
+     */
+    isMobile() {
+        return this.getCurrentViewPortNumber() < this.breakpoints[2].Low;
+    }
+    /**
+     * Get height of an element
+     * @deprecated
+     */
+    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;
+            }
+        }
+    }
+    /**
+     * Get height of an element
+     */
+    calculateFullscreenElementsHeight(id, defaultheight, extra) {
+        return this.calculateFullscreenElementsheight(id, defaultheight, extra);
+    }
     /**
      * If viewport changed
      * @event
@@ -1799,18 +1916,18 @@ class ViewportService {
         // inform who´s interested
         this.viewportResizedSubscriber.next(currentWindowWidth);
         if (currentWindowWidth > 0) {
-            for (const mqs of this.viewports) {
-                if (currentWindowWidth > mqs.high) {
+            for (const mqs of this.breakpoints) {
+                if (currentWindowWidth > mqs.High) {
                     continue;
                 }
-                else if ((currentWindowWidth >= mqs.low || currentWindowWidth <= mqs.high) &&
-                    this.currentViewport !== mqs.name) {
-                    this.currentViewport = mqs.name;
+                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);
+                    this.viewportChangedSubscriber.next(mqs.Name);
                     break;
                 }
-                else if (this.currentViewport === mqs.name) {
+                else if (this.currentViewport === mqs.Name) {
                     break;
                 }
                 else {
@@ -1824,32 +1941,38 @@ class ViewportService {
      * @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;
+        let currentViewport = this.breakpoints[0];
+        for (const mqs of this.breakpoints) {
+            if (width <= mqs.High && width >= mqs.Low) {
+                currentViewport = mqs;
                 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;
+    /**
+     * Get the breakpoint/device name like mobile,tablet,desktop, high
+     */
+    getSimpleBreakpoint(screenSize) {
+        let actualBreakpoint;
+        const sizes = this.simpleBreakpoints.slice().reverse(); // we need to reverse it to check step by step from biggest, which breakpoints still fits. Slice is a trick to not mutate the original array and make a copy
+        for (const key in sizes) {
+            if (screenSize < sizes[key].MaximumPixels) {
+                actualBreakpoint = sizes[key];
+            }
         }
-        else {
-            return;
+        if (!actualBreakpoint) {
+            actualBreakpoint = sizes[0]; // default screensize is biggest. Will be used if viewport is bigger as maximum. Remember, array is reversed
+        }
+        return actualBreakpoint;
+    }
+    ngOnDestroy() {
+        if (this.isBrowser) {
+            window.removeEventListener('resize', this.documentSizeChanged);
         }
     }
 }
-ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
 ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewportService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewportService, decorators: [{
             type: Injectable
@@ -1857,6 +1980,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         return [{ type: Object, decorators: [{
                         type: Inject,
                         args: [PLATFORM_ID]
+                    }] }, { type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
                     }] }];
     } });
 
@@ -1963,10 +2089,10 @@ class MapComponent {
     }
 }
 MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MapComponent, deps: [{ token: ViewportService }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i3$2.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: "14.0.0", version: "14.3.0", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress\">\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: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i3$2.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: "14.3.0", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-map', template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>" }]
+            args: [{ selector: 'kms-map', template: "<div *ngIf=\"geoDataFoundForAddress\">\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>" }]
         }], ctorParameters: function () { return [{ type: ViewportService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
@@ -2010,7 +2136,7 @@ SalutationDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             useExisting: forwardRef(() => SalutationDropdownComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-salutation-dropdown', providers: [
@@ -2038,6 +2164,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * 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);
@@ -2066,7 +2215,7 @@ SalutationRadiogroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             useExisting: forwardRef(() => SalutationRadiogroupComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>", dependencies: [{ kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>", dependencies: [{ kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-salutation-radiogroup', providers: [
@@ -2110,7 +2259,7 @@ class BackToTopComponent {
     }
 }
 BackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }] });
+BackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BackToTopComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-back-to-top', template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>" }]
@@ -2317,12 +2466,16 @@ class DropdownFromDataComponent extends FormControlParentComponent {
      * @param key
      */
     setDisplayKey(key) {
+        var _a, _b, _c, _d, _e, _f;
         if (this.translation) {
             if (this.translation.isPrefix) {
-                return this.translation.service.instant(this.translation.path + '.' + key);
+                return (_b = (_a = this.translation.service) === null || _a === void 0 ? void 0 : _a.instant) === null || _b === void 0 ? void 0 : _b.call(_a, this.translation.path + '.' + key);
+            }
+            else if (this.translation.useKeyAsValue) {
+                return (_d = (_c = this.translation.service) === null || _c === void 0 ? void 0 : _c.instant) === null || _d === void 0 ? void 0 : _d.call(_c, this.translation.path, { key: key });
             }
             else {
-                return this.translation.service.instant(this.translation.path);
+                return (_f = (_e = this.translation.service) === null || _e === void 0 ? void 0 : _e.instant) === null || _f === void 0 ? void 0 : _f.call(_e, this.translation.path);
             }
         }
         return key;
@@ -2712,7 +2865,7 @@ class ImageSliderComponent {
     }
 }
 ImageSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"all-wrapper\">\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n    <div \n        class=\"swiper-bigImage\"\n        [style.backgroundImage]=\"selectedSlideImage\"\n        [swipeDirective]=\"swipeConfig\"\n        (moveEvent)=\"handleMoveEvent($event)\"\n        (releaseEvent)=\"handleReleaseEvent($event)\"\n        (mouseup)=\"lastClicked()\"\n        (mouseout)=\"noLastClicked()\" >\n    </div>\n\n    <ng-content select=\"[description]\"></ng-content>\n\n    <div class=\"swiper-holder\">\n        <!--\n        (mouseWheelUp)=\"scrollLeft($event)\"\n        (mouseWheelDown)=\"scrollRight($event)\"\n        -->\n\n        <swiper [config]=\"config\" #usefulSwiper>\n            <div class=\"swiper-wrapper\" \n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \n                cdkDropListOrientation=\"horizontal\">                \n                <div class=\"swiper-slide\" \n                    *ngFor=\"let slide of slides; let index = index\" \n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \n                        <kms-icon icon=\"trash\"></kms-icon>\n                    </button>\n                    <div class=\"img\" (click)=\"openSlide(index)\"\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\n                        [ngClass]=\"{'active': index === selectedSlide}\">\n                    </div>\n                    \n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\n                </div>\n            </div>\n        </swiper>\n\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\n\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\n        </div>\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { kind: "component", type: i6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+ImageSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"all-wrapper\">\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n    <div \n        class=\"swiper-bigImage\"\n        [style.backgroundImage]=\"selectedSlideImage\"\n        [swipeDirective]=\"swipeConfig\"\n        (moveEvent)=\"handleMoveEvent($event)\"\n        (releaseEvent)=\"handleReleaseEvent($event)\"\n        (mouseup)=\"lastClicked()\"\n        (mouseout)=\"noLastClicked()\" >\n    </div>\n\n    <ng-content select=\"[description]\"></ng-content>\n\n    <div class=\"swiper-holder\">\n        <!--\n        (mouseWheelUp)=\"scrollLeft($event)\"\n        (mouseWheelDown)=\"scrollRight($event)\"\n        -->\n\n        <swiper [config]=\"config\" #usefulSwiper>\n            <div class=\"swiper-wrapper\" \n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \n                cdkDropListOrientation=\"horizontal\">                \n                <div class=\"swiper-slide\" \n                    *ngFor=\"let slide of slides; let index = index\" \n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \n                        <kms-icon icon=\"trash\"></kms-icon>\n                    </button>\n                    <div class=\"img\" (click)=\"openSlide(index)\"\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\n                        [ngClass]=\"{'active': index === selectedSlide}\">\n                    </div>\n                    \n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\n                </div>\n            </div>\n        </swiper>\n\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\n\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\n        </div>\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { kind: "component", type: i6$1.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-image-slider', template: "<div class=\"all-wrapper\">\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\n    <div \n        class=\"swiper-bigImage\"\n        [style.backgroundImage]=\"selectedSlideImage\"\n        [swipeDirective]=\"swipeConfig\"\n        (moveEvent)=\"handleMoveEvent($event)\"\n        (releaseEvent)=\"handleReleaseEvent($event)\"\n        (mouseup)=\"lastClicked()\"\n        (mouseout)=\"noLastClicked()\" >\n    </div>\n\n    <ng-content select=\"[description]\"></ng-content>\n\n    <div class=\"swiper-holder\">\n        <!--\n        (mouseWheelUp)=\"scrollLeft($event)\"\n        (mouseWheelDown)=\"scrollRight($event)\"\n        -->\n\n        <swiper [config]=\"config\" #usefulSwiper>\n            <div class=\"swiper-wrapper\" \n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \n                cdkDropListOrientation=\"horizontal\">                \n                <div class=\"swiper-slide\" \n                    *ngFor=\"let slide of slides; let index = index\" \n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \n                        <kms-icon icon=\"trash\"></kms-icon>\n                    </button>\n                    <div class=\"img\" (click)=\"openSlide(index)\"\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\n                        [ngClass]=\"{'active': index === selectedSlide}\">\n                    </div>\n                    \n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\n                </div>\n            </div>\n        </swiper>\n\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\n\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\n        </div>\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\n</div>" }]
@@ -2799,10 +2952,12 @@ DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", ngImport: i0, type: DirectivesModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DirectivesModule, decorators: [{
             type: NgModule,
@@ -2812,6 +2967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MouseWheelDirective,
                         GetMaxHeightDirective,
                         TooltipDirective,
+                        SizeDirective,
                     ],
                     imports: [CommonModule],
                     exports: [
@@ -2819,6 +2975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MouseWheelDirective,
                         GetMaxHeightDirective,
                         TooltipDirective,
+                        SizeDirective,
                     ],
                 }]
         }] });
@@ -3002,5 +3159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * 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, Breakpoint, 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, SimpleBreakpoint, SizeDirective, SwipeDirective, TimeInputComponent, ToNumberPipe, TooltipComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, YesNoRadiogroupComponent };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map