@kms-ngx-ui/presentational 0.0.22 → 0.0.24

package/bundles/kms-ngx-ui-presentational.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('@angular/material/form-field'), require('@angular/platform-browser'), require('@angular/material/input'), require('@angular/material/button'), require('@ngx-translate/core'), require('@angular/material/progress-spinner'), require('@angular/animations'), require('@angular/material/expansion'), require('rxjs'), require('@angular/google-maps'), require('@angular/material/select'), require('@angular/material/core'), require('subsink'), require('@angular/material/dialog'), require('@angular/material/menu'), require('enum-values/src/enumValues'), require('@angular/cdk/drag-drop'), require('ngx-useful-swiper')) :
-    typeof define === 'function' && define.amd ? define('@kms-ngx-ui/presentational', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@angular/material/radio', '@angular/material/form-field', '@angular/platform-browser', '@angular/material/input', '@angular/material/button', '@ngx-translate/core', '@angular/material/progress-spinner', '@angular/animations', '@angular/material/expansion', 'rxjs', '@angular/google-maps', '@angular/material/select', '@angular/material/core', 'subsink', '@angular/material/dialog', '@angular/material/menu', 'enum-values/src/enumValues', '@angular/cdk/drag-drop', 'ngx-useful-swiper'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["kms-ngx-ui"] = global["kms-ngx-ui"] || {}, global["kms-ngx-ui"].presentational = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global.ng.material.radio, global.ng.material.formField, global.ng.platformBrowser, global.ng.material.input, global.ng.material.button, global.i5$1, global.ng.material.progressSpinner, global.ng.animations, global.ng.material.expansion, global.rxjs, global.ng.googleMaps, global.ng.material.select, global.ng.material.core, global.subsink, global.ng.material.dialog, global.ng.material.menu, global.enumValues, global.ng.cdk.dragDrop, global.i2$6));
-})(this, (function (exports, i0, i2, i1, i1$1, i2$2, i2$1, i1$2, i5, i2$3, i5$1, i1$3, animations, i2$4, rxjs, i2$5, i3, i4, subsink, i1$4, i3$1, enumValues, i6, i2$6) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/radio'), require('subsink'), require('@angular/material/form-field'), require('@angular/platform-browser'), require('@angular/material/input'), require('@angular/material/button'), require('@ngx-translate/core'), require('@angular/material/progress-spinner'), require('@angular/animations'), require('@angular/material/expansion'), require('rxjs'), require('@angular/google-maps'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/material/menu'), require('enum-values/src/enumValues'), require('@angular/cdk/drag-drop'), require('ngx-useful-swiper')) :
+    typeof define === 'function' && define.amd ? define('@kms-ngx-ui/presentational', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/checkbox', '@angular/material/radio', 'subsink', '@angular/material/form-field', '@angular/platform-browser', '@angular/material/input', '@angular/material/button', '@ngx-translate/core', '@angular/material/progress-spinner', '@angular/animations', '@angular/material/expansion', 'rxjs', '@angular/google-maps', '@angular/material/select', '@angular/material/core', '@angular/material/dialog', '@angular/material/menu', 'enum-values/src/enumValues', '@angular/cdk/drag-drop', 'ngx-useful-swiper'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["kms-ngx-ui"] = global["kms-ngx-ui"] || {}, global["kms-ngx-ui"].presentational = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.checkbox, global.ng.material.radio, global.subsink, global.ng.material.formField, global.ng.platformBrowser, global.ng.material.input, global.ng.material.button, global.i6, global.ng.material.progressSpinner, global.ng.animations, global.ng.material.expansion, global.rxjs, global.ng.googleMaps, global.ng.material.select, global.ng.material.core, global.ng.material.dialog, global.ng.material.menu, global.enumValues, global.ng.cdk.dragDrop, global.i2$6));
+})(this, (function (exports, i0, i2, i1, i1$1, i2$2, subsink, i2$1, i1$2, i5, i2$3, i6, i1$3, animations, i2$4, rxjs, i2$5, i3, i4, i1$4, i3$1, enumValues, i6$1, i2$6) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -31,7 +31,7 @@
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
     var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2$4);
     var i2__namespace$5 = /*#__PURE__*/_interopNamespace(i2$5);
@@ -39,7 +39,7 @@
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i2__namespace$6 = /*#__PURE__*/_interopNamespace(i2$6);
 
     var KmsUiPresentationalService = /** @class */ (function () {
@@ -506,7 +506,7 @@
                 useExisting: i0.forwardRef(function () { return CheckboxComponent; }),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<!-- <label class=\"wrapper ui-copy-text\"\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\n    <input type=\"checkbox\" \n           [checked]=\"checked\"\n           [value]=\"value\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           (change)=\"selectAction($event)\">\n\n</label> -->\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\n<span *ngIf=\"infoText && infoText.length > 0\" \n      class=\"\"\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\n</span>", styles: [""], components: [{ type: i1__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<!-- <label class=\"wrapper ui-copy-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">{{label}}\r\n    <input type=\"checkbox\" \r\n           [checked]=\"checked\"\r\n           [value]=\"value\"\r\n           [name]=\"name\"\r\n           [disabled]=\"disabled\"\r\n           (change)=\"selectAction($event)\">\r\n\r\n</label> -->\r\n<mat-checkbox class=\"example-margin\" [disabled]=\"disabled\" [name]=\"name\" [(ngModel)]=\"checked\"></mat-checkbox>\r\n<span *ngIf=\"infoText && infoText.length > 0\" \r\n      class=\"\"\r\n      [ngClass]=\"{'disabled' : disabled}\">{{infoText}}\r\n</span>", styles: [""], components: [{ type: i1__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -532,15 +532,53 @@
     /*!
      * @copyright FLYACTS GmbH 2019
      */
-    var FormParentComponent = /** @class */ (function () {
+    var ColorableParentComponent = /** @class */ (function () {
+        function ColorableParentComponent() {
+        }
+        ColorableParentComponent.prototype.setupColors = function (elementRef) {
+            if (this.color) {
+                var color1 = void 0;
+                var color2 = void 0;
+                if (this.color === 'primary' || this.color === 'accent') {
+                    color1 = 'var(--' + this.color + 'Color)';
+                    color2 = 'var(--' + this.color + 'ColorHover)';
+                }
+                else {
+                    color1 = this.color;
+                    color2 = this.color;
+                }
+                elementRef.style.setProperty('--componentColor', color1);
+                elementRef.style.setProperty('--componentColorHover', color2);
+            }
+        };
+        return ColorableParentComponent;
+    }());
+    ColorableParentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColorableParentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ColorableParentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorableParentComponent, selector: "ng-component", inputs: { color: "color" }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ColorableParentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: '',
+                        template: '',
+                    }]
+            }], propDecorators: { color: [{
+                    type: i0.Input
+                }] } });
+
+    var FormParentComponent = /** @class */ (function (_super) {
+        __extends(FormParentComponent, _super);
         function FormParentComponent(formBuilder) {
-            this.formBuilder = formBuilder;
-            this.formInitialized = false;
-            this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map(function (c) { return c.charCodeAt(0); }));
-            this.formDataChanged = new i0.EventEmitter();
-            this.disabled = false;
+            var _this = _super.call(this) || this;
+            _this.formBuilder = formBuilder;
+            _this.disabled = false;
+            _this.showRequired = false;
+            _this.formInitialized = false;
+            _this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map(function (c) { return c.charCodeAt(0); }));
+            _this.subs = new subsink.SubSink();
+            _this.formDataChanged = new i0.EventEmitter();
+            return _this;
         }
-        // TODO make a service or make own compoennt etc.
+        // TODO make a service or make own component etc.
         /**
          * Returns if a number was pressed
          * @param e
@@ -556,9 +594,15 @@
             var isArrows = e.keyCode >= 37 && e.keyCode <= 40;
             var isDelete = e.keyCode == 8 || e.keyCode == 46;
             var 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.
+            var isTab = 9;
+            return (isNumberRow ||
+                isNumberPad ||
+                isTab ||
+                (allowDelete && isDelete) ||
+                (allowArrows && isArrows) ||
+                (allowCutCopyPaste && isCutCopyOrPaste));
+        };
+        // TODO make a service or make own component etc.
         /**
          * Prevents to input other chars than numbers in input
          * @param event
@@ -569,7 +613,7 @@
                 event.preventDefault();
             }
         };
-        // TODO make a service or make own compoennt etc.
+        // TODO make a service or make own component etc.
         /**
          * Prevents input when pasting which is not number
          * @param event
@@ -587,26 +631,36 @@
             }
         };
         FormParentComponent.prototype.ngOnInit = function () {
+            this.initFormEvent();
+        };
+        FormParentComponent.prototype.ngOnDestroy = function () {
+            this.subs.unsubscribe();
+        };
+        FormParentComponent.prototype.initFormEvent = function () {
             var _this = this;
-            this.formDataChanged.emit(this.form);
-            this.form.valueChanges.subscribe(function () {
-                _this.formDataChanged.emit(_this.form);
-            });
+            if (this.form) {
+                this.formDataChanged.emit(this.form);
+                this.form.valueChanges.subscribe(function () {
+                    _this.formDataChanged.emit(_this.form);
+                });
+            }
         };
         return FormParentComponent;
-    }());
+    }(ColorableParentComponent));
     FormParentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormParentComponent, deps: [{ token: i1__namespace$1.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FormParentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0__namespace, template: '', isInline: true });
+    FormParentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled", showRequired: "showRequired" }, outputs: { formDataChanged: "formDataChanged" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormParentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'kms-form',
                         template: '',
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }]; }, propDecorators: { formDataChanged: [{
-                    type: i0.Output
-                }], disabled: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }]; }, propDecorators: { disabled: [{
+                    type: i0.Input
+                }], showRequired: [{
                     type: i0.Input
+                }], formDataChanged: [{
+                    type: i0.Output
                 }] } });
 
     var FormControlParentComponent = /** @class */ (function (_super) {
@@ -661,7 +715,8 @@
             this.onTouch = fn;
         };
         FormControlParentComponent.prototype.setDisabledState = function (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);
             }
         };
@@ -687,49 +742,6 @@
                     args: ['child']
                 }] } });
 
-    /**
-     * Attached File DTO
-     */
-    var AttachedFileDTO = /** @class */ (function () {
-        function AttachedFileDTO() {
-        }
-        return AttachedFileDTO;
-    }());
-
-    /*!
-     * @copyright FLYACTS GmbH 2019
-     */
-    exports.IconSize = void 0;
-    (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";
-    })(exports.IconSize || (exports.IconSize = {}));
-
-    /**
-     * @copyright FLYACTS GmbH 2019
-     */
-    /**
-     * Check if null or undefined
-     * @param value value that is being checked
-     */
-    function isValue(value) {
-        if (value === null) {
-            return false;
-        }
-        if (typeof value === 'undefined') {
-            return false;
-        }
-        return true;
-    }
-
     /*!
      * @copyright FLYACTS GmbH 2019
      */
@@ -745,7 +757,18 @@
         IconSize["XXL"] = "size-512";
         IconSize["XXXL"] = "size-1024";
         IconSize["NONE"] = "NONE";
-    })(IconSize || (IconSize = {}));
+    })(IconSize || (IconSize = {}));
+    var IconSizePx;
+    (function (IconSizePx) {
+        IconSizePx[IconSizePx["TINY"] = 16] = "TINY";
+        IconSizePx[IconSizePx["SMALLER"] = 20] = "SMALLER";
+        IconSizePx[IconSizePx["SMALL"] = 32] = "SMALL";
+        IconSizePx[IconSizePx["MEDIUM"] = 64] = "MEDIUM";
+        IconSizePx[IconSizePx["LARGE"] = 128] = "LARGE";
+        IconSizePx[IconSizePx["XL"] = 256] = "XL";
+        IconSizePx[IconSizePx["XXL"] = 512] = "XXL";
+        IconSizePx[IconSizePx["XXXL"] = 1024] = "XXXL";
+    })(IconSizePx || (IconSizePx = {}));
 
     /**
      * @copyright KMS GmbH
@@ -755,6 +778,7 @@
             this.sanitizer = sanitizer;
             /**
              * Optional: Different size via CSS inline style.
+             * @deprecated. Please use size instead
              */
             this.iconSize = IconSize.FULLSIZE;
             /**
@@ -775,7 +799,7 @@
         return IconComponent;
     }());
     IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", dontUseSprite: "dontUseSprite" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\">\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", size: "size", dontUseSprite: "dontUseSprite" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\r\n  <span class=\"icon {{ iconSize }}\" [ngClass]=\"iconClass\" [ngStyle]=\"iconStyle\" [style.width.px]=\"size ? size : undefined\" [style.height.px]=\"size ? size : undefined\">\r\n    <svg>\r\n      <use\r\n        [attr.xlink:href]=\"\r\n          'assets/sprite.svg?Version=' + Version + '#' + iconToShow\r\n        \"\r\n      ></use>\r\n    </svg>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\r\n  <object\r\n    [data]=\"\r\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\r\n    \"\r\n    type=\"image/svg+xml\"\r\n    class=\"icon {{ iconSize }}\"\r\n    [ngClass]=\"iconClass\"\r\n    [ngStyle]=\"iconStyle\"\r\n  ></object>\r\n</ng-container>\r\n", styles: [""], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: IconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -791,6 +815,8 @@
                     type: i0.Input
                 }], iconSize: [{
                     type: i0.Input
+                }], size: [{
+                    type: i0.Input
                 }], dontUseSprite: [{
                     type: i0.Input
                 }] } });
@@ -938,6 +964,26 @@
                     args: ['mouseleave']
                 }] } });
 
+    var SizeDirective = /** @class */ (function () {
+        function SizeDirective(elementRef) {
+            this.elementRef = elementRef;
+            this.size = '';
+        }
+        SizeDirective.prototype.ngOnInit = function () {
+            this.elementRef.nativeElement.style.width(this.size + 'px');
+            this.elementRef.nativeElement.style.height(this.size + 'px');
+        };
+        return SizeDirective;
+    }());
+    SizeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SizeDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SizeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SizeDirective, selector: "[size]", inputs: { size: "size" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SizeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[size]' }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { size: [{
+                    type: i0.Input
+                }] } });
+
     var TooltipIconComponent = /** @class */ (function () {
         function TooltipIconComponent() {
             this.tooltipTitle = "";
@@ -946,12 +992,12 @@
             this.tooltipLinkUrl = "";
             this.placement = "";
             this.delay = 1000;
-            this.IconSize = exports.IconSize;
+            this.IconSizePx = IconSizePx;
         }
         return TooltipIconComponent;
     }());
     TooltipIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipIconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TooltipIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0__namespace, template: "<span\n    kmsTooltip\n    [tooltipTitle]=\"tooltipTitle\"\n    [tooltipText]=\"tooltipText\"\n    [tooltipPlacement]=\"placement\"\n    [tooltipDelay]=\"delay\"\n    [tooltipLinkText]=\"tooltipLinkText\"\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\n>\n    <kms-icon icon=\"ic_info\" [iconSize]=\"IconSize.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }] });
+    TooltipIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipTitle: "tooltipTitle", tooltipText: "tooltipText", tooltipLinkText: "tooltipLinkText", tooltipLinkUrl: "tooltipLinkUrl", placement: "placement", delay: "delay" }, ngImport: i0__namespace, template: "<span\r\n    kmsTooltip\r\n    [tooltipTitle]=\"tooltipTitle\"\r\n    [tooltipText]=\"tooltipText\"\r\n    [tooltipPlacement]=\"placement\"\r\n    [tooltipDelay]=\"delay\"\r\n    [tooltipLinkText]=\"tooltipLinkText\"\r\n    [tooltipLinkUrl]=\"tooltipLinkUrl\"\r\n>\r\n    <kms-icon icon=\"ic_info\" [size]=\"IconSizePx.SMALLER\" [iconClass]=\"'color-primary'\"></kms-icon>\r\n</span>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["tooltipTitle", "tooltipText", "tooltipLinkText", "tooltipLinkUrl", "tooltipPlacement", "tooltipDelay", "tooltipPlaceIntoHost", "tooltipOnlyonclick"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TooltipIconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1062,6 +1108,7 @@
              * 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 = function () { };
             // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1096,13 +1143,13 @@
         return RadioButtonComponent;
     }(ActionsParentComponent));
     RadioButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RadioButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", formControl: "formControl" }, providers: [
+    RadioButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { name: "name", id: "id", radioButtonSize: "radioButtonSize", formControl: "formControl" }, providers: [
             {
                 provide: i1.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return RadioButtonComponent; }),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<label class=\"wrapper ui-small-text\"\n       [ngClass]=\"{'disabled' : disabled}\">\n    <input type=\"radio\"\n           [name]=\"name\"\n           [value]=\"value\"\n           [checked]=\"checked\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           (change)=\"selectAction($event)\">{{label}}\n\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_active'\"\n        >\n    </kms-icon>\n    <kms-icon\n            class=\"checkmark\" \n            aria-hidden=\"true\"\n            *ngIf=\"!checked\"\n            [ngClass]=\"{\n                'disabled' : disabled\n            }\"\n            [iconClass]=\"{\n                'disabled' : disabled, \n                'color-primary': true,\n                'size-16': true\n            }\"\n            [icon]=\"'ic_radiobutton_inactive'\"\n        >\n    </kms-icon>\n    <ng-content></ng-content>\n</label>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<label class=\"wrapper ui-small-text\"\r\n       [ngClass]=\"{'disabled' : disabled}\">\r\n    <input type=\"radio\"\r\n           [name]=\"name\"\r\n           [value]=\"value\"\r\n           [checked]=\"checked\"\r\n           [disabled]=\"disabled\"\r\n           [id]=\"id\"\r\n           (change)=\"selectAction($event)\">{{label}}\r\n\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_active'\"\r\n            [size]=\"radioButtonSize\"\r\n        >\r\n    </kms-icon>\r\n    <kms-icon\r\n            class=\"checkmark\" \r\n            aria-hidden=\"true\"\r\n            *ngIf=\"!checked\"\r\n            [ngClass]=\"{\r\n                'disabled' : disabled\r\n            }\"\r\n            [iconClass]=\"{\r\n                'disabled' : disabled, \r\n                'color-primary': true\r\n            }\"\r\n            [icon]=\"'ic_radiobutton_inactive'\"\r\n            [size]=\"radioButtonSize\"\r\n        >\r\n    </kms-icon>\r\n    <ng-content></ng-content>\r\n</label>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1121,6 +1168,8 @@
                     type: i0.Input
                 }], id: [{
                     type: i0.Input
+                }], radioButtonSize: [{
+                    type: i0.Input
                 }], formControl: [{
                     type: i0.Input
                 }] } });
@@ -1275,7 +1324,7 @@
                 useExisting: i0.forwardRef(function () { return YesNoRadiogroupComponent; }),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\n    </mat-radio-group>\n</form>\n", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['yesno']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\"> {{ textYes }}</mat-radio-button>\r\n        <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\"> {{ textNo }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>\r\n", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: YesNoRadiogroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1302,6 +1351,23 @@
                     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
     var MAX_SIZE_BYTES = 2097152;
     var FileInputComponent = /** @class */ (function () {
@@ -1336,7 +1402,7 @@
             });
             this.subscriptions = [];
             this.newImageLoading = false;
-            this.IconSize = exports.IconSize;
+            this.IconSizePx = IconSizePx;
             this.formDataChanged = new i0.EventEmitter();
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             this.onChange = function () { };
@@ -1493,7 +1559,7 @@
                 useExisting: i0.forwardRef(function () { return FileInputComponent; }),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [iconSize]=\"IconSize.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }, { type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0__namespace, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \r\n\r\n    <div *ngIf=\"form.value.Filename && previewImage\">\r\n        <div *ngIf=\"newImageLoading\">\r\n            {{ 'file-input.loading' | translate }}\r\n        </div>\r\n        <div *ngIf=\"!newImageLoading\">\r\n            <div class=\"\">\r\n                <div class=\"\">\r\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\r\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\r\n                </div>\r\n                <div class=\"\">{{form.value.Filename}}</div>\r\n                <div class=\"\">\r\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\r\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \r\n                        {{ 'file-input.remove' }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!previewImage\">\r\n        <div class=\"\">{{form.value.Filename}}</div>\r\n    </div>\r\n\r\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\r\n        <span>{{ label }}</span>\r\n    </button>\r\n    <input\r\n        type=\"file\"\r\n        [accept]=\"acceptedFileMimetypes\"\r\n        style=\"display: none\"\r\n        #fileInput\r\n        (click)=\"clearInputValue($event)\"\r\n        (change)=\"selectImage($event)\"\r\n    />\r\n\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\r\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\r\n\r\n</form>", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1544,7 +1610,7 @@
         return LoaderComponent;
     }());
     LoaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LoaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0__namespace, template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n", styles: [""], components: [{ type: i1__namespace$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    LoaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0__namespace, template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\r\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\r\n</div>\r\n", styles: [""], components: [{ type: i1__namespace$3.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LoaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1690,7 +1756,7 @@
         return FlyoutComponent;
     }());
     FlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FlyoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"flyout\"\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\n>\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n        <ng-content select=\"[header]\"></ng-content>\n\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\n            <span *ngIf=\"!isDropdownOpened\">\n                {{ moreText }}\n            </span>\n            <span *ngIf=\"isDropdownOpened\">\n                {{ lessText }}\n            </span>\n            <kms-icon [icon]=\"'chevron-down'\"\n                  [iconClass]=\"{'size-16': true, 'is-rotating180': isDropdownOpened}\" >\n            </kms-icon>\n        </div>\n    </div>\n    <div \n        class=\"flyout-body\"\n        [ngClass]=\"bodyCssClass\"\n        tabindex=\"0\"\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\n        getMaxHeight=\"inner\"\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\n        #flyoutHeader>\n        <div class=\"inner\" #content>\n            <ng-content ></ng-content>\n        </div>\n    </div>\n\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }], pipes: { "kmsSafeHtml": SafeHtmlPipe }, animations: [
+    FlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"flyout\"\r\n    [ngClass]=\"{'is-active': isDropdownOpened}\"\r\n>\r\n    <div class=\"flyout-header\" (click)=\"toggleDropdownHeader()\" [ngClass]=\"headerCssClass\">\r\n        <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\r\n        <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\r\n\r\n        <ng-content select=\"[header]\"></ng-content>\r\n\r\n        <div *ngIf=\"hasButtonForMore\" (click)=\"toggleDropdown()\" class=\"flyout-header-more\">\r\n            <span *ngIf=\"!isDropdownOpened\">\r\n                {{ moreText }}\r\n            </span>\r\n            <span *ngIf=\"isDropdownOpened\">\r\n                {{ lessText }}\r\n            </span>\r\n            <kms-icon [icon]=\"'chevron-down'\" [ngClass]=\"{'is-rotating180':isDropdownOpened}\" [size]=\"16\">\r\n            </kms-icon>\r\n        </div>\r\n    </div>\r\n    <div \r\n        class=\"flyout-body\"\r\n        [ngClass]=\"bodyCssClass\"\r\n        tabindex=\"0\"\r\n        [@dropdownAnimation]=\"{value: isDropdownOpened, params: {targetHeight: targetHeight, animationTime: '500'}}\"\r\n        getMaxHeight=\"inner\"\r\n        (sumOfHeight)=\"setDropdownListHeight($event)\"\r\n        #flyoutHeader>\r\n        <div class=\"inner\" #content>\r\n            <ng-content ></ng-content>\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n", styles: [""], components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: SizeDirective, selector: "[size]", inputs: ["size"] }, { type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }], pipes: { "kmsSafeHtml": SafeHtmlPipe }, animations: [
             animations.trigger('dropdownAnimation', [
                 animations.state('true', animations.style({
                     height: '{{targetHeight}}',
@@ -2049,7 +2115,7 @@
                 useExisting: i0.forwardRef(function () { return EnumRadiogroupComponent; }),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\n    <div>{{ header }}</div>\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\n    </mat-radio-group>\n</form>", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\r\n    <div>{{ header }}</div>\r\n    <mat-radio-group [formControl]=\"form.controls['enumData']\" [disabled]=\"disabled\" #child>\r\n        <mat-radio-button [value]=\"choice\" [checked]=\"value === choice\" *ngFor=\"let choice of optionValues\">{{ translationPrefix + '.' + choice | translate }}</mat-radio-button>\r\n    </mat-radio-group>\r\n</form>", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EnumRadiogroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2092,7 +2158,7 @@
         return KMSAccordionItemComponent;
     }());
     KMSAccordionItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KMSAccordionItemComponent, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    KMSAccordionItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0__namespace, template: "<mat-expansion-panel\r\n    class=\"accordion-item\"\r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\"\r\n    (closed)=\"panelOpenState = false\"\r\n    [expanded] = \"expanded\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>\r\n", styles: [""], components: [{ type: i2__namespace$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2__namespace$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    KMSAccordionItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { itemTitle: "itemTitle", showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded" }, ngImport: i0__namespace, template: "<mat-expansion-panel\r\n    class=\"accordion-item\"\r\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\r\n    (opened)=\"panelOpenState = true\"\r\n    (closed)=\"panelOpenState = false\"\r\n    [expanded] = \"expanded\"\r\n    hideToggle=\"true\">\r\n    <mat-expansion-panel-header class=\"accordion-item-header\">\r\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\r\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\r\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\r\n        </mat-panel-title>\r\n        <div class=\"accordion-item-header-icon-wrapper\">\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\r\n\r\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\r\n        </div>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n</mat-expansion-panel>\r\n", styles: [""], components: [{ type: i2__namespace$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i2__namespace$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KMSAccordionItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2114,12 +2180,13 @@
      * Service to get viewport
      */
     var ViewportService = /** @class */ (function () {
-        function ViewportService(platformId) {
+        function ViewportService(platformId, document) {
             this.platformId = platformId;
+            this.document = document;
             this.viewports = [
                 {
                     name: 'xs',
-                    low: 420,
+                    low: 360,
                     high: 990,
                 },
                 {
@@ -2134,7 +2201,7 @@
                 },
                 {
                     name: 'l',
-                    low: 12001,
+                    low: 1201,
                     high: 1400,
                 },
                 {
@@ -2155,45 +2222,52 @@
             ];
             this.viewportChangedSubscriber = new rxjs.Subject();
             this.viewportResizedSubscriber = new rxjs.Subject();
+            this.isBrowser = false;
             if (i2.isPlatformBrowser(this.platformId)) {
                 window.addEventListener('resize', this.documentSizeChanged.bind(this), { passive: true });
+                this.isBrowser = true;
             }
         }
         /**
          * Get window height
          */
         ViewportService.prototype.getDocumentHeight = function () {
-            return i2.isPlatformBrowser(this.platformId) ? document.body.clientHeight : 1200;
+            return this.isBrowser ? document.body.clientHeight : 1200;
         };
         /**
          * Get window width
          */
         ViewportService.prototype.getDocumentWidth = function () {
-            return i2.isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
+            return this.isBrowser ? document.body.clientWidth : 1200;
         };
         /**
          * Get window height
          */
         ViewportService.prototype.getWindowHeight = function () {
-            return i2.isPlatformBrowser(this.platformId) ? window.innerHeight : 1200;
+            return this.isBrowser ? window.innerHeight : 1200;
         };
         /**
          * Get window width
          */
         ViewportService.prototype.getWindowWidth = function () {
-            return i2.isPlatformBrowser(this.platformId) ? window.innerWidth : 1200;
+            return this.isBrowser ? window.innerWidth : 1200;
         };
         /**
          * Returns the current viewport MQ as string
          * @returns string
          */
         ViewportService.prototype.getCurrentViewPort = function () {
-            if (!this.currentViewport) {
-                var currentWidth = i2.isPlatformBrowser(this.platformId) ? document.body.clientWidth : 1200;
-                this.currentViewport = this.convertWidthToMediaQuery(currentWidth);
-            }
+            var currentWidth = this.isBrowser ? document.body.clientWidth : 1200;
+            this.currentViewport = this.convertWidthToMediaQuery(currentWidth);
             return this.currentViewport;
         };
+        /**
+         * Returns the current viewport MQ as string
+         * @returns string
+         */
+        ViewportService.prototype.getCurrentViewPortNumber = function () {
+            return this.isBrowser ? document.body.clientWidth : 1200;
+        };
         /**
          * Provides mq´s as string
          */
@@ -2208,7 +2282,7 @@
         };
         ViewportService.prototype.scrollToElementId = function (el, alignCenter) {
             if (alignCenter === void 0) { alignCenter = false; }
-            if (i2.isPlatformBrowser(this.platformId)) {
+            if (this.isBrowser) {
                 this.scrollToElement(document.querySelector('#' + el), alignCenter);
             }
         };
@@ -2219,24 +2293,20 @@
          */
         ViewportService.prototype.scrollToElement = function (el, alignCenter) {
             if (alignCenter === void 0) { alignCenter = false; }
-            if (i2.isPlatformBrowser(this.platformId)) {
+            if (this.isBrowser) {
                 var extraScrollTop = 0;
                 if (alignCenter) {
                     extraScrollTop = (window.innerHeight - el.clientHeight) / 2;
                 }
-                /*
-                const elementPos: DOMRect = el.getBoundingClientRect();
-                const scrollTopPosition = elementPos.x - extraScrollTop;
-                */
-                //let offsetLeft = 0;
+                var offsetLeft = 0;
                 var offsetTop = 0;
                 var 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' });
             }
         };
         /**
@@ -2244,13 +2314,42 @@
          * @param top - top position value
          */
         ViewportService.prototype.scrollTop = function (top) {
-            if (i2.isPlatformBrowser(this.platformId)) {
+            if (this.isBrowser) {
                 window.scrollTo({ left: 0, top: top, behavior: 'smooth' });
             }
         };
-        ViewportService.prototype.ngOnDestroy = function () {
-            if (i2.isPlatformBrowser(this.platformId)) {
-                window.removeEventListener('resize', this.documentSizeChanged);
+        ViewportService.prototype.isPortrait = function () {
+            if (this.isBrowser)
+                return window.innerHeight > window.innerWidth;
+            else
+                return;
+        };
+        ViewportService.prototype.isLandscape = function () {
+            if (this.isBrowser) {
+                var isLandscape = window.orientation === 90 || window.orientation === -90;
+                return isLandscape;
+            }
+            else {
+                return;
+            }
+        };
+        ViewportService.prototype.isMobile = function () {
+            return this.getCurrentViewPortNumber() < this.viewports[2].low;
+        };
+        ViewportService.prototype.calculateFullscreenElementsheight = function (id, defaultheight, extra) {
+            if (!this.isBrowser || this.isMobile()) {
+                return defaultheight;
+            }
+            else {
+                var map = this.document.getElementById(id);
+                var 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;
+                }
             }
         };
         /**
@@ -2318,24 +2417,14 @@
             }
             return currentViewport;
         };
-        ViewportService.prototype.isPortrait = function () {
-            if (i2.isPlatformBrowser(this.platformId))
-                return window.innerHeight > window.innerWidth;
-            else
-                return;
-        };
-        ViewportService.prototype.isLandscape = function () {
-            if (i2.isPlatformBrowser(this.platformId)) {
-                var isLandscape = window.orientation === 90 || window.orientation === -90;
-                return isLandscape;
-            }
-            else {
-                return;
+        ViewportService.prototype.ngOnDestroy = function () {
+            if (this.isBrowser) {
+                window.removeEventListener('resize', this.documentSizeChanged);
             }
         };
         return ViewportService;
     }());
-    ViewportService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService, deps: [{ token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ViewportService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService, deps: [{ token: i0.PLATFORM_ID }, { token: i2.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     ViewportService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ViewportService, decorators: [{
                 type: i0.Injectable
@@ -2343,6 +2432,9 @@
             return [{ type: Object, decorators: [{
                             type: i0.Inject,
                             args: [i0.PLATFORM_ID]
+                        }] }, { type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.DOCUMENT]
                         }] }];
         } });
 
@@ -2418,13 +2510,6 @@
                     _this.center.lng = results[0].geometry.location.lng();
                     _this.addMarker();
                     _this.geoDataFoundForAddress = true;
-                    // react to browser resize
-                    _this.setMapWidth(_this.viewPortService.getDocumentWidth());
-                    _this.viewportSubscription = _this.viewPortService.getViewportResizedObserver().subscribe(function (val) {
-                        _this.setMapWidth(val);
-                    }, function (error) {
-                        console.error('Get updated ViewPort failed', error);
-                    });
                 }
                 else {
                     console.error('Sorry, this search of map address produced no results.');
@@ -2448,18 +2533,6 @@
                 options: { animation: google.maps.Animation.DROP },
             });
         };
-        /**
-         * sets the width of map accodring to viewport
-         */
-        MapComponent.prototype.setMapWidth = function (val) {
-            if (val < 991) {
-                this.width = (val - 84) + 'px';
-            }
-            else {
-                this.width = '100%';
-            }
-            this.widthSet = true;
-        };
         /**
          * Zooms in into map
          */
@@ -2479,7 +2552,7 @@
         return MapComponent;
     }());
     MapComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MapComponent, deps: [{ token: ViewportService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MapComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div *ngIf=\"geoDataFoundForAddress && widthSet\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""], components: [{ type: i2__namespace$5.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$5.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }] });
+    MapComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0__namespace, template: "<div *ngIf=\"geoDataFoundForAddress\">\r\n    <google-map\r\n            height=\"415px\"\r\n            [width]=\"width\"\r\n            [zoom]=\"zoom\"\r\n            [center]=\"center\"\r\n            [options]=\"options\"\r\n    >\r\n        <map-marker\r\n            *ngFor=\"let marker of markers\"\r\n            [position]=\"marker.position\"\r\n            [label]=\"marker.label\"\r\n            [title]=\"marker.title\"\r\n            [options]=\"marker.options\"\r\n        >\r\n        </map-marker>\r\n    </google-map>\r\n</div>", styles: [""], components: [{ type: i2__namespace$5.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$5.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MapComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2534,7 +2607,7 @@
                 useExisting: i0.forwardRef(function () { return SalutationDropdownComponent; }),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\" class=\"row\">\r\n    <mat-form-field class=\"col\">\r\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\r\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\r\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>", components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SalutationDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2571,6 +2644,32 @@
                     type: i0.Input
                 }] } });
 
+    /**
+     * Attached File DTO
+     */
+    var AttachedFileDTO = /** @class */ (function () {
+        function AttachedFileDTO() {
+        }
+        return AttachedFileDTO;
+    }());
+
+    /*!
+     * @copyright FLYACTS GmbH 2019
+     */
+    exports.IconSize = void 0;
+    (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";
+    })(exports.IconSize || (exports.IconSize = {}));
+
     var SalutationRadiogroupComponent = /** @class */ (function (_super) {
         __extends(SalutationRadiogroupComponent, _super);
         function SalutationRadiogroupComponent(formBuilder, renderer) {
@@ -2603,7 +2702,7 @@
                 useExisting: i0.forwardRef(function () { return SalutationRadiogroupComponent; }),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\" >\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\n        </mat-radio-button>\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</form>", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\" >\r\n    <mat-radio-group [formControl]=\"form.controls['salut']\" [disabled]=\"disabled\" #radioGroup>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.NOT_SPECIFIED\" [checked]=\"value === SalutationEnum.NOT_SPECIFIED\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.MALE\" [checked]=\"value === SalutationEnum.MALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" [value]=\"SalutationEnum.FEMALE\" [checked]=\"value === SalutationEnum.FEMALE\">\r\n            {{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n</form>", components: [{ type: i2__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SalutationRadiogroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2652,7 +2751,7 @@
         return BackToTopComponent;
     }());
     BackToTopComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BackToTopComponent, deps: [{ token: i0.PLATFORM_ID }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BackToTopComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0__namespace, template: "<div class=\"scrollToTop\"\n    [ngClass]=\"{'show': windowScrolled}\"\n    (click)=\"scrollToTop()\">\n        <div class=\"scrollToTop-inner\">\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n        </div>\n</div>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    BackToTopComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0__namespace, template: "<div class=\"scrollToTop\"\r\n    [ngClass]=\"{'show': windowScrolled}\"\r\n    (click)=\"scrollToTop()\">\r\n        <div class=\"scrollToTop-inner\">\r\n            <kms-icon icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\r\n        </div>\r\n</div>", components: [{ type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BackToTopComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2715,7 +2814,7 @@
         return GenericDialogComponent;
     }());
     GenericDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: GenericDialogComponent, deps: [{ token: i1__namespace$4.MatDialogRef }, { token: i0__namespace.NgZone }, { token: i1$4.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    GenericDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GenericDialogComponent, selector: "kms-generic-dialog", ngImport: i0__namespace, template: "<div mat-dialog-title class=\"mat-dialog-title\">\n    <h3>{{ data.title }}</h3>\n</div>\n<div mat-dialog-content class=\"mat-dialog-content\">\n    {{ data.message }}\n</div>\n<div mat-dialog-actions class=\"custom-dialog-actions\">\n    <button\n        mat-flat-button\n        class=\"test_secondary_button\"\n         color=\"accent\"\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\n    >\n        {{ buttons.secondary }}\n    </button>\n    <button\n        mat-flat-button\n        class=\"test_primary_button\"\n        color=\"primary\"\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\n    >\n        {{ buttons.primary }}\n    </button>\n</div>\n", styles: [""], components: [{ type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+    GenericDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GenericDialogComponent, selector: "kms-generic-dialog", ngImport: i0__namespace, template: "<div mat-dialog-title class=\"mat-dialog-title\">\r\n    <h3>{{ data.title }}</h3>\r\n</div>\r\n<div mat-dialog-content class=\"mat-dialog-content\">\r\n    {{ data.message }}\r\n</div>\r\n<div mat-dialog-actions class=\"custom-dialog-actions\">\r\n    <button\r\n        mat-flat-button\r\n        class=\"test_secondary_button\"\r\n         color=\"accent\"\r\n        (click)=\"onClickAction(ButtonResponseType.secondary)\"\r\n    >\r\n        {{ buttons.secondary }}\r\n    </button>\r\n    <button\r\n        mat-flat-button\r\n        class=\"test_primary_button\"\r\n        color=\"primary\"\r\n        (click)=\"onClickAction(ButtonResponseType.primary)\"\r\n    >\r\n        {{ buttons.primary }}\r\n    </button>\r\n</div>\r\n", styles: [""], components: [{ type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: GenericDialogComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2765,7 +2864,7 @@
         return ButtonWithConfirmDialogComponent;
     }());
     ButtonWithConfirmDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ButtonWithConfirmDialogComponent, deps: [{ token: i1__namespace$4.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ButtonWithConfirmDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonWithConfirmDialogComponent, selector: "kms-button-with-confirm-dialog", inputs: { disabled: "disabled", buttonText: "buttonText", confirmTitle: "confirmTitle", confirmTextYes: "confirmTextYes", confirmTextNo: "confirmTextNo" }, outputs: { onConfirmClosed: "onConfirmClosed" }, ngImport: i0__namespace, template: "<button\n    type=\"button\"\n    (click)=\"start()\"\n    mat-stroked-button\n    [disabled]=\"disabled\"\n>\n    {{ buttonText }}\n</button>\n", styles: [""], components: [{ type: i2__namespace$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"] }] });
+    ButtonWithConfirmDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonWithConfirmDialogComponent, selector: "kms-button-with-confirm-dialog", inputs: { disabled: "disabled", buttonText: "buttonText", confirmTitle: "confirmTitle", confirmTextYes: "confirmTextYes", confirmTextNo: "confirmTextNo" }, outputs: { onConfirmClosed: "onConfirmClosed" }, ngImport: i0__namespace, template: "<button\r\n    type=\"button\"\r\n    (click)=\"start()\"\r\n    mat-stroked-button\r\n    [disabled]=\"disabled\"\r\n>\r\n    {{ buttonText }}\r\n</button>\r\n", styles: [""], components: [{ type: i2__namespace$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ButtonWithConfirmDialogComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2802,6 +2901,8 @@
             _this.label = '';
             _this.required = false;
             _this.useEnumIndexAsValue = false;
+            // multiple selection
+            _this.multiple = false;
             _this.keys = [];
             _this.values = [];
             _this.Object = Object;
@@ -2877,20 +2978,20 @@
          */
         DropdownFromDataComponent.prototype.setDisplayKey = function (key) {
             /*
-            if (this.translation && key !== null) {
-                if (this.translation.isPrefix) {
-                    return this.translationService.instant(this.translation.path + '.' + key);
-                } else if (this.translation.useKey) {
-                    return this.translationService.instant(this.translation.path, { key: key });
-                } else if (!this.translation?.useKey && !this.translation?.isPrefix) {
-                    return this.translationService.instant(this.translation.path);
+                if (this.translation && key !== null) {
+                    if (this.translation.isPrefix) {
+                        return this.translationService.instant(this.translation.path + '.' + key);
+                    } else if (this.translation.useKey) {
+                        return this.translationService.instant(this.translation.path, { key: key });
+                    } else if (!this.translation?.useKey && !this.translation?.isPrefix) {
+                        return this.translationService.instant(this.translation.path);
+                    }
+                } else if (key == null) {
+                    return '';
+                } else if (!this.translation) {
+                    return key;
                 }
-            } else if (key == null) {
-                return '';
-            } else if (!this.translation) {
-                return key;
-            }
-            */
+                */
             return key;
         };
         DropdownFromDataComponent.prototype.valueChanged = function (value) {
@@ -2902,13 +3003,13 @@
         return DropdownFromDataComponent;
     }(FormControlParentComponent));
     DropdownFromDataComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DropdownFromDataComponent, deps: [{ token: i1__namespace$1.FormBuilder }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DropdownFromDataComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue" }, providers: [
+    DropdownFromDataComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple" }, providers: [
             {
                 provide: i1.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return DropdownFromDataComponent; }),
                 multi: true,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\n        <mat-label>{{ label }}</mat-label>\n        <mat-select\n            placeholder=\"{{ placeholder }}\"\n            disableOptionCentering\n            [(value)]=\"value\"\n            (selectionChange)=\"valueChanged($event?.value)\"\n            #child\n            [disabled]=\"disabled\"\n        >\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\n                <span>{{ setDisplayKey(key) }}</span>\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>\n", components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.MatLabel, selector: "mat-label" }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<form [formGroup]=\"form\">\r\n    <mat-form-field [attr.required]=\"required\" [floatLabel]=\"placeholder ? 'always' : 'auto'\">\r\n        <mat-label>{{ label }}</mat-label>\r\n        <mat-select\r\n            placeholder=\"{{ placeholder }}\"\r\n            disableOptionCentering\r\n            [(value)]=\"value\"\r\n            (selectionChange)=\"valueChanged($event?.value)\"\r\n            #child\r\n            [disabled]=\"disabled\"\r\n            [multiple]=\"multiple\"\r\n            >\r\n            <mat-option *ngFor=\"let key of keys; let i = index\" [value]=\"values[i]\">\r\n                <span>{{ setDisplayKey(key) }}</span>\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</form>\r\n", components: [{ type: i2__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.MatLabel, selector: "mat-label" }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DropdownFromDataComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2944,6 +3045,8 @@
                     type: i0.Input
                 }], useEnumIndexAsValue: [{
                     type: i0.Input
+                }], multiple: [{
+                    type: i0.Input
                 }] } });
 
     /*!
@@ -3273,8 +3376,8 @@
          */
         ImageSliderComponent.prototype.drop = function (event) {
             if (this.slides && this.imagesTOSave) {
-                i6.moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
-                i6.moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
+                i6$1.moveItemInArray(this.slides, event.previousIndex, event.currentIndex);
+                i6$1.moveItemInArray(this.imagesTOSave, event.previousIndex, event.currentIndex);
                 this.orderChanged.emit(this.imagesTOSave);
             }
         };
@@ -3287,7 +3390,7 @@
         return ImageSliderComponent;
     }());
     ImageSliderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageSliderComponent, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ImageSliderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], components: [{ type: i2__namespace$6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "dontUseSprite"] }], directives: [{ type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { type: i6__namespace.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i5__namespace$1.TranslatePipe } });
+    ImageSliderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesTOSave: "imagesTOSave", swipeConfig: "swipeConfig" }, outputs: { orderChanged: "orderChanged", deleteImageEvent: "deleteImageEvent" }, host: { listeners: { "document:keydown": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "usefulSwiper", first: true, predicate: ["usefulSwiper"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"all-wrapper\">\r\n    <!--(swiperight)=\"previousSlide()\" (swipeleft)=\"nextSlide()\"-->\r\n    <div \r\n        class=\"swiper-bigImage\"\r\n        [style.backgroundImage]=\"selectedSlideImage\"\r\n        [swipeDirective]=\"swipeConfig\"\r\n        (moveEvent)=\"handleMoveEvent($event)\"\r\n        (releaseEvent)=\"handleReleaseEvent($event)\"\r\n        (mouseup)=\"lastClicked()\"\r\n        (mouseout)=\"noLastClicked()\" >\r\n    </div>\r\n\r\n    <ng-content select=\"[description]\"></ng-content>\r\n\r\n    <div class=\"swiper-holder\">\r\n        <!--\r\n        (mouseWheelUp)=\"scrollLeft($event)\"\r\n        (mouseWheelDown)=\"scrollRight($event)\"\r\n        -->\r\n\r\n        <swiper [config]=\"config\" #usefulSwiper>\r\n            <div class=\"swiper-wrapper\" \r\n                cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n                cdkDropListOrientation=\"horizontal\">                \r\n                <div class=\"swiper-slide\" \r\n                    *ngFor=\"let slide of slides; let index = index\" \r\n                    cdkDrag [cdkDragDisabled]=\"!editMode\">\r\n                    <button mat-menu-item *ngIf=\"editMode\" (click)=\"deleteImage(index)\"> \r\n                        <kms-icon icon=\"trash\"></kms-icon>\r\n                    </button>\r\n                    <div class=\"img\" (click)=\"openSlide(index)\"\r\n                        [style.backgroundImage]=\"sanitizer.bypassSecurityTrustStyle('url(' + slide + ')')\"\r\n                        [ngClass]=\"{'active': index === selectedSlide}\">\r\n                    </div>\r\n                    \r\n                    <div class=\"default-image\">{{\"common.defaultImage\" | translate}} </div>\r\n                </div>\r\n            </div>\r\n        </swiper>\r\n\r\n        <div class=\"swiper-button-next\" *ngIf=\"slides?.length > 3\"></div>\r\n        <div class=\"swiper-button-prev\" *ngIf=\"slides?.length > 3\"></div>\r\n\r\n        <div class=\"swiper-button-next2\" *ngIf=\"slides?.length > 1\" (click)=\"nextSlide()\">\r\n            <kms-icon icon=\"chevron-right\" [iconClass]=\"{'color-disabled': selectedSlide == slides?.length - 1, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n        <div class=\"swiper-button-prev2\" *ngIf=\"slides?.length > 1\" (click)=\"previousSlide()\">\r\n            <kms-icon icon=\"chevron-left\" [iconClass]=\"{'color-disabled': selectedSlide == 0, 'color-primary': true}\"></kms-icon>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], components: [{ type: i2__namespace$6.SwiperComponent, selector: "swiper", inputs: ["initialize", "config"] }, { type: i3__namespace$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }], directives: [{ type: SwipeDirective, selector: "[swipeDirective]", inputs: ["swipeDirective"], outputs: ["moveEvent", "releaseEvent"] }, { type: i6__namespace$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImageSliderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3382,10 +3485,12 @@
     DirectivesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, declarations: [SwipeDirective,
             MouseWheelDirective,
             GetMaxHeightDirective,
-            TooltipDirective], imports: [i2.CommonModule], exports: [SwipeDirective,
+            TooltipDirective,
+            SizeDirective], imports: [i2.CommonModule], exports: [SwipeDirective,
             MouseWheelDirective,
             GetMaxHeightDirective,
-            TooltipDirective] });
+            TooltipDirective,
+            SizeDirective] });
     DirectivesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, imports: [[i2.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DirectivesModule, decorators: [{
                 type: i0.NgModule,
@@ -3395,6 +3500,7 @@
                             MouseWheelDirective,
                             GetMaxHeightDirective,
                             TooltipDirective,
+                            SizeDirective,
                         ],
                         imports: [i2.CommonModule],
                         exports: [
@@ -3402,6 +3508,7 @@
                             MouseWheelDirective,
                             GetMaxHeightDirective,
                             TooltipDirective,
+                            SizeDirective,
                         ],
                     }]
             }] });
@@ -3436,7 +3543,7 @@
             TooltipComponent,
             TooltipIconComponent,
             YesNoRadiogroupComponent], imports: [i2.CommonModule,
-            i6.DragDropModule,
+            i6$1.DragDropModule,
             i1$1.MatCheckboxModule,
             i2$3.MatButtonModule,
             i2$2.MatRadioModule,
@@ -3452,7 +3559,7 @@
             i3.MatSelectModule,
             i1$3.MatProgressSpinnerModule,
             DirectivesModule,
-            i5$1.TranslateModule,
+            i6.TranslateModule,
             i2$6.NgxUsefulSwiperModule], exports: [ActionsParentComponent,
             BackToTopComponent,
             ButtonWithConfirmDialogComponent,
@@ -3481,7 +3588,7 @@
             ViewportService
         ], imports: [[
                 i2.CommonModule,
-                i6.DragDropModule,
+                i6$1.DragDropModule,
                 i1$1.MatCheckboxModule,
                 i2$3.MatButtonModule,
                 i2$2.MatRadioModule,
@@ -3497,7 +3604,7 @@
                 i3.MatSelectModule,
                 i1$3.MatProgressSpinnerModule,
                 DirectivesModule,
-                i5$1.TranslateModule,
+                i6.TranslateModule,
                 i2$6.NgxUsefulSwiperModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KmsUiPresentationalModule, decorators: [{
@@ -3531,7 +3638,7 @@
                         ],
                         imports: [
                             i2.CommonModule,
-                            i6.DragDropModule,
+                            i6$1.DragDropModule,
                             i1$1.MatCheckboxModule,
                             i2$3.MatButtonModule,
                             i2$2.MatRadioModule,
@@ -3547,7 +3654,7 @@
                             i3.MatSelectModule,
                             i1$3.MatProgressSpinnerModule,
                             DirectivesModule,
-                            i5$1.TranslateModule,
+                            i6.TranslateModule,
                             i2$6.NgxUsefulSwiperModule,
                         ],
                         exports: [
@@ -3626,6 +3733,7 @@
     exports.SafeUrlPipe = SafeUrlPipe;
     exports.SalutationDropdownComponent = SalutationDropdownComponent;
     exports.SalutationRadiogroupComponent = SalutationRadiogroupComponent;
+    exports.SizeDirective = SizeDirective;
     exports.SwipeDirective = SwipeDirective;
     exports.TimeInputComponent = TimeInputComponent;
     exports.ToNumberPipe = ToNumberPipe;