@kms-ngx-ui/presentational 18.1.2 → 18.3.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, forwardRef, Input, Output, Pipe, NgModule, ViewChild, Directive, HostListener, input, VERSION, signal, computed, PLATFORM_ID, Injectable, Inject, model, HostBinding, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, Pipe, NgModule, ViewChild, Directive, HostListener, input, VERSION, signal, computed, PLATFORM_ID, Injectable, Inject, output, model, HostBinding, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { CommonModule, CurrencyPipe, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -18,16 +18,16 @@ import { MatInputModule } from '@angular/material/input';
 import { autoUpdate, computePosition, shift, offset, arrow, flip } from '@floating-ui/dom';
 import * as i5 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i3 from '@angular/material/button';
+import * as i2$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { trigger, state, style } from '@angular/animations';
-import * as i3$1 from '@angular/material/expansion';
+import * as i3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i2$2 from '@angular/material/progress-spinner';
+import * as i2$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i2$3 from '@angular/google-maps';
+import * as i2$4 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import * as i3$2 from '@angular/material/select';
+import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4$1 from '@angular/material/core';
 import moment from 'moment';
@@ -36,15 +36,15 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1$5 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
 export { ChangeContext as KmsSliderChange, Options as KmsSliderOptions } from '@angular-slider/ngx-slider';
-import * as i2$4 from '@angular/cdk/drag-drop';
+import * as i2$5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i4$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3$4 from '@angular/material/list';
+import * as i3$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i3$3 from '@angular/material/menu';
+import * as i3$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Subject } from 'rxjs';
@@ -109,7 +109,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [(ngModel)]=\"checked\"\n    (change)=\"valueChanged($event.checked)\"\n  >\n    {{ infoText }}\n  </mat-checkbox>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], ngImport: i0, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [(ngModel)]=\"checked\"\n    (change)=\"valueChanged($event.checked)\"\n    color=\"primary\"\n  >\n    {{ infoText }}\n  </mat-checkbox>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -119,7 +119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [(ngModel)]=\"checked\"\n    (change)=\"valueChanged($event.checked)\"\n  >\n    {{ infoText }}\n  </mat-checkbox>\n</div>\n" }]
+                    ], template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [(ngModel)]=\"checked\"\n    (change)=\"valueChanged($event.checked)\"\n    color=\"primary\"\n  >\n    {{ infoText }}\n  </mat-checkbox>\n</div>\n" }]
         }], propDecorators: { infoText: [{
                 type: Input
             }], checked: [{
@@ -592,28 +592,12 @@ var Color;
     Color["WHITE"] = "--kms-white";
     Color["BLACK"] = "--kms-black";
 })(Color || (Color = {}));
-const ColorsArr = [
-    Color.PRIMARY,
-    Color.SECONDARY,
-    Color.TERTIARY,
-    Color.SUCCESS,
-    Color.ALERT,
-    Color.ERROR,
-    Color.DISABLED,
-    Color.WHITE,
-    Color.BLACK,
-];
-const ColorsLabelsArr = {
-    [Color.PRIMARY]: 'PRIMARY',
-    [Color.SECONDARY]: 'SECONDARY',
-    [Color.TERTIARY]: 'TERTIARY',
-    [Color.SUCCESS]: 'SUCCESS',
-    [Color.ALERT]: 'ALERT',
-    [Color.ERROR]: 'ERROR',
-    [Color.DISABLED]: 'DISABLED',
-    [Color.WHITE]: 'WHITE',
-    [Color.BLACK]: 'BLACK',
-};
+var StylingTheme;
+(function (StylingTheme) {
+    StylingTheme["PRIMARY"] = "primary";
+    StylingTheme["SECONDARY"] = "accent";
+    StylingTheme["WARN"] = "warn";
+})(StylingTheme || (StylingTheme = {}));
 
 /**
  * @copyright KMS GmbH
@@ -636,11 +620,11 @@ class IconComponent {
         this.Version = VERSION.full;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: IconComponent, selector: "kms-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dontUseSprite: { classPropertyName: "dontUseSprite", publicName: "dontUseSprite", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === false\">\n  <span\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"{\n      color: 'var(' + color() + ')'\n    }\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\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\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"iconStyle()\"\n  ></object>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: IconComponent, selector: "kms-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dontUseSprite: { classPropertyName: "dontUseSprite", publicName: "dontUseSprite", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === false\">\n  <span\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"{\n      color: 'var(' + color() + ')'\n    }\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\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\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"iconStyle()\"\n  ></object>\n</ng-container>\n", styles: [":root{--kms-primary: #162f43;--kms-primary-50: #0f2334;--kms-primary-100: #162f43;--kms-primary-200: #26415e;--kms-primary-300: #375e79;--kms-primary-400: #4b7a94;--kms-primary-500: #5f97af;--kms-primary-600: #7cb3ca;--kms-primary-700: #9acfe5;--kms-primary-800: #b8ebff;--kms-primary-900: #d6f7ff;--kms-secondary: #48acd1;--kms-tertiary: #43403e;--kms-tertiary-50: #1e1d1c;--kms-tertiary-100: #43403e;--kms-tertiary-200: #54524f;--kms-tertiary-300: #6c6a67;--kms-tertiary-400: #97938f;--kms-tertiary-500: #c2beb9;--kms-tertiary-600: #e3e1df;--kms-tertiary-700: #eeedec;--kms-tertiary-800: #f4f3f2;--kms-tertiary-900: #ffffff;--kms-success: #39b948;--kms-alert: #e5c936;--kms-error: #c3293b;--kms-disabled: #a6a6a6;--kms-background: #fafafa;--kms-white: #ffffff;--kms-black: #000000;--kms-border-grey: #101423}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === false\">\n  <span\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"{\n      color: 'var(' + color() + ')'\n    }\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\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\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"iconStyle()\"\n  ></object>\n</ng-container>\n" }]
+            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === false\">\n  <span\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"{\n      color: 'var(' + color() + ')'\n    }\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\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\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"iconStyle()\"\n  ></object>\n</ng-container>\n", styles: [":root{--kms-primary: #162f43;--kms-primary-50: #0f2334;--kms-primary-100: #162f43;--kms-primary-200: #26415e;--kms-primary-300: #375e79;--kms-primary-400: #4b7a94;--kms-primary-500: #5f97af;--kms-primary-600: #7cb3ca;--kms-primary-700: #9acfe5;--kms-primary-800: #b8ebff;--kms-primary-900: #d6f7ff;--kms-secondary: #48acd1;--kms-tertiary: #43403e;--kms-tertiary-50: #1e1d1c;--kms-tertiary-100: #43403e;--kms-tertiary-200: #54524f;--kms-tertiary-300: #6c6a67;--kms-tertiary-400: #97938f;--kms-tertiary-500: #c2beb9;--kms-tertiary-600: #e3e1df;--kms-tertiary-700: #eeedec;--kms-tertiary-800: #f4f3f2;--kms-tertiary-900: #ffffff;--kms-success: #39b948;--kms-alert: #e5c936;--kms-error: #c3293b;--kms-disabled: #a6a6a6;--kms-background: #fafafa;--kms-white: #ffffff;--kms-black: #000000;--kms-border-grey: #101423}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }] });
 
 class TooltipIconComponent {
@@ -978,7 +962,7 @@ class FileInputComponent {
                 useExisting: forwardRef(() => FileInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
@@ -1219,7 +1203,7 @@ class KMSAccordionItemComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n  class=\"kms-accordion\"\n  [ngClass]=\"{\n    'kms-accordion--flat': !showAsCard,\n    'kms-accordion--small': isSmall\n  }\"\n  (opened)=\"panelOpenState = true\"\n  (closed)=\"panelOpenState = false\"\n  [expanded]=\"expanded\"\n  hideToggle=\"true\"\n>\n  <mat-expansion-panel-header class=\"kms-accordion__header\">\n    <mat-panel-title class=\"mat-subheading-2 kms-accordion__title\">\n      <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n      <ng-content select=\"[itemTitleElement]\"></ng-content>\n    </mat-panel-title>\n    <div class=\"kms-accordion__header-icon-wrapper\">\n      <kms-icon\n        *ngIf=\"!panelOpenState\"\n        icon=\"ic_plus\"\n        [color]=\"Color.PRIMARY\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n      <kms-icon\n        *ngIf=\"panelOpenState\"\n        icon=\"ic_minus\"\n        [color]=\"Color.PRIMARY\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n    </div>\n  </mat-expansion-panel-header>\n  <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n  class=\"kms-accordion\"\n  [ngClass]=\"{\n    'kms-accordion--flat': !showAsCard,\n    'kms-accordion--small': isSmall\n  }\"\n  (opened)=\"panelOpenState = true\"\n  (closed)=\"panelOpenState = false\"\n  [expanded]=\"expanded\"\n  hideToggle=\"true\"\n>\n  <mat-expansion-panel-header class=\"kms-accordion__header\">\n    <mat-panel-title class=\"mat-subheading-2 kms-accordion__title\">\n      <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n      <ng-content select=\"[itemTitleElement]\"></ng-content>\n    </mat-panel-title>\n    <div class=\"kms-accordion__header-icon-wrapper\">\n      <kms-icon\n        *ngIf=\"!panelOpenState\"\n        icon=\"ic_plus\"\n        [color]=\"Color.PRIMARY\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n      <kms-icon\n        *ngIf=\"panelOpenState\"\n        icon=\"ic_minus\"\n        [color]=\"Color.PRIMARY\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n    </div>\n  </mat-expansion-panel-header>\n  <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
@@ -1239,7 +1223,7 @@ class LoaderComponent {
         this.loading = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n  <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n  <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
@@ -1348,7 +1332,7 @@ class MapComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i2$3.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", "markerInitialized"], exportAs: ["mapMarker"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapComponent, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "<div *ngIf=\"geoDataFoundForAddress\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i2$4.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", "markerInitialized"], exportAs: ["mapMarker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
@@ -1357,6 +1341,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+var RadioButtonSize;
+(function (RadioButtonSize) {
+    RadioButtonSize["SM"] = "small";
+    RadioButtonSize["MD"] = "medium";
+    RadioButtonSize["LG"] = "large";
+})(RadioButtonSize || (RadioButtonSize = {}));
+
 /**
  * @copyright KMS GmbH
  */
@@ -1365,9 +1356,10 @@ class RadioButtonComponent {
         this.label = '';
         this.checked = false;
         this.disabled = false;
-        this.size = 'medium';
-        this.color = 'primary';
+        this.size = RadioButtonSize.MD;
+        this.color = StylingTheme.PRIMARY;
         this.onChange = new EventEmitter();
+        this.onTouched = () => { };
     }
     onRadioChange(event) {
         this.onChange.emit(event);
@@ -1455,7 +1447,7 @@ class SalutationDropdownComponent extends FormControlParentComponent {
                 useExisting: forwardRef(() => SalutationDropdownComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n    <mat-form-field class=\"col\">\n        <mat-select disableOptionCentering [formControl]=\"form.controls['salut']\" [placeholder]=\"placeholder\" [value]=\"value\" #child>\n            <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.MALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase() | translate }}</mat-option>\n            <mat-option [value]=\"SalutationEnum.FEMALE\">{{ 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase() | translate }}</mat-option>\n        </mat-select>\n    </mat-form-field>\n</form>", dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
             type: Component,
@@ -2312,6 +2304,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:scroll', []]
             }] } });
 
+var ButtonType;
+(function (ButtonType) {
+    ButtonType["BASIC"] = "mat-button";
+    ButtonType["FLAT"] = "mat-flat-button";
+    ButtonType["RAISED"] = "mat-raised-button";
+})(ButtonType || (ButtonType = {}));
+
+/**
+ * @copyright KMS GmbH
+ */
+class ButtonComponent {
+    constructor() {
+        this.color = input(StylingTheme.PRIMARY);
+        this.type = input(ButtonType.FLAT);
+        this.loading = input(false);
+        this.label = input('');
+        this.icon = input();
+        this.disabled = input(false);
+        this.click = output();
+        this.StylingTheme = StylingTheme;
+        this.IconSize = IconSizePx;
+        this.ButtonType = ButtonType;
+        this.iconColor = computed(() => {
+            if (this.type() !== ButtonType.BASIC) {
+                return Color.WHITE;
+            }
+            switch (this.color()) {
+                case StylingTheme.PRIMARY:
+                    return Color.PRIMARY;
+                case StylingTheme.SECONDARY:
+                    return Color.TERTIARY;
+                case StylingTheme.WARN:
+                    return Color.ERROR;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ButtonComponent, selector: "kms-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@if (type() == ButtonType.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n            'kms-button--basic-primary': color() === StylingTheme.PRIMARY,\n            'kms-button--basic-accent': color() === StylingTheme.SECONDARY,\n            'kms-button--basic-warn': color() === StylingTheme.WARN,\n        }\"\n  [disabled]=\"disabled()\"\n  (click)=\"click.emit($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"> </ng-container>\n</button>\n} @else if (type() == ButtonType.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n            'kms-button--flat-primary': color() === StylingTheme.PRIMARY,\n            'kms-button--flat-accent': color() === StylingTheme.SECONDARY,\n            'kms-button--flat-warn': color() === StylingTheme.WARN,\n        }\"\n  [disabled]=\"disabled()\"\n  (click)=\"click.emit($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"> </ng-container>\n</button>\n} @else if (type() == ButtonType.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n            'kms-button--raised-primary': color() === StylingTheme.PRIMARY,\n            'kms-button--raised-accent': color() === StylingTheme.SECONDARY,\n            'kms-button--raised-warn': color() === StylingTheme.WARN,\n        }\"\n  [disabled]=\"disabled()\"\n  (click)=\"click.emit($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"> </ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if(loading()){\n  <mat-spinner diameter=\"22\"></mat-spinner>\n  } @else { @if (icon()) {\n  <kms-icon\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-button', template: "@if (type() == ButtonType.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n            'kms-button--basic-primary': color() === StylingTheme.PRIMARY,\n            'kms-button--basic-accent': color() === StylingTheme.SECONDARY,\n            'kms-button--basic-warn': color() === StylingTheme.WARN,\n        }\"\n  [disabled]=\"disabled()\"\n  (click)=\"click.emit($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"> </ng-container>\n</button>\n} @else if (type() == ButtonType.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n            'kms-button--flat-primary': color() === StylingTheme.PRIMARY,\n            'kms-button--flat-accent': color() === StylingTheme.SECONDARY,\n            'kms-button--flat-warn': color() === StylingTheme.WARN,\n        }\"\n  [disabled]=\"disabled()\"\n  (click)=\"click.emit($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"> </ng-container>\n</button>\n} @else if (type() == ButtonType.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n            'kms-button--raised-primary': color() === StylingTheme.PRIMARY,\n            'kms-button--raised-accent': color() === StylingTheme.SECONDARY,\n            'kms-button--raised-warn': color() === StylingTheme.WARN,\n        }\"\n  [disabled]=\"disabled()\"\n  (click)=\"click.emit($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"> </ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if(loading()){\n  <mat-spinner diameter=\"22\"></mat-spinner>\n  } @else { @if (icon()) {\n  <kms-icon\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
 class CardComponent {
     constructor() {
         this.imageUrl = input('');
@@ -2365,7 +2401,7 @@ class ConfirmationDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: i0.NgZone }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationDialogComponent, selector: "kms-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-header\">\n    <h4>{{ data.title }}</h4>\n  </div>\n  <div class=\"dialog-content\">\n    {{ data.message }}\n  </div>\n  <div class=\"dialog-footer\">\n    <button\n      mat-flat-button\n      color=\"accent\"\n      (click)=\"onClickAction(ButtonDialogType.secondary)\"\n    >\n      {{ data.buttons.secondary }}\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"onClickAction(ButtonDialogType.primary)\"\n    >\n      {{ data.buttons.primary }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationDialogComponent, selector: "kms-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n  <div class=\"dialog-header\">\n    <h4>{{ data.title }}</h4>\n  </div>\n  <div class=\"dialog-content\">\n    {{ data.message }}\n  </div>\n  <div class=\"dialog-footer\">\n    <button\n      mat-flat-button\n      color=\"accent\"\n      (click)=\"onClickAction(ButtonDialogType.secondary)\"\n    >\n      {{ data.buttons.secondary }}\n    </button>\n    <button\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"onClickAction(ButtonDialogType.primary)\"\n    >\n      {{ data.buttons.primary }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
@@ -2524,7 +2560,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
                 useExisting: forwardRef(() => DropdownFromDataComponent),
                 multi: true,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"required\"\n    [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <mat-select\n      [placeholder]=\"placeholder\"\n      disableOptionCentering\n      (selectionChange)=\"valueChanged($event?.value)\"\n      [value]=\"value\"\n      #child\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n    >\n      <mat-checkbox\n        *ngIf=\"selectAllText && !disableOptions\"\n        color=\"accent\"\n        class=\"dropdown-from-data__checkbox\"\n        [indeterminate]=\"isCheckboxIndeterminate()\"\n        [checked]=\"allElementsChecked()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggleAllSelection($event)\"\n      >\n        {{ selectAllText }}\n      </mat-checkbox>\n      <mat-option\n        *ngFor=\"let key of keys; let i = index\"\n        [value]=\"values[i]\"\n        [disabled]=\"disableOptions\"\n      >\n        <span *ngIf=\"(hasNullOption && i != 0) || !hasNullOption\">{{\n          setDisplayKey(key)\n        }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"required\"\n    [floatLabel]=\"placeholder ? 'always' : 'auto'\"\n  >\n    <mat-label>{{ label }}</mat-label>\n    <mat-select\n      [placeholder]=\"placeholder\"\n      disableOptionCentering\n      (selectionChange)=\"valueChanged($event?.value)\"\n      [value]=\"value\"\n      #child\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n    >\n      <mat-checkbox\n        *ngIf=\"selectAllText && !disableOptions\"\n        color=\"accent\"\n        class=\"dropdown-from-data__checkbox\"\n        [indeterminate]=\"isCheckboxIndeterminate()\"\n        [checked]=\"allElementsChecked()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggleAllSelection($event)\"\n      >\n        {{ selectAllText }}\n      </mat-checkbox>\n      <mat-option\n        *ngFor=\"let key of keys; let i = index\"\n        [value]=\"values[i]\"\n        [disabled]=\"disableOptions\"\n      >\n        <span *ngIf=\"(hasNullOption && i != 0) || !hasNullOption\">{{\n          setDisplayKey(key)\n        }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
             type: Component,
@@ -2632,7 +2668,7 @@ class ImageSliderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesToSave: "imagesToSave" }, outputs: { deleteImageEvent: "deleteImageEvent", orderChanged: "orderChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-slider-container\">\n  <swiper-container\n    class=\"swiper-main-view-container\"\n    thumbs-swiper=\".swiper-carousel-container\"\n  >\n    <swiper-slide *ngFor=\"let slide of slides\">\n      <img [src]=\"slide\" loading=\"lazy\" />\n    </swiper-slide>\n  </swiper-container>\n\n  <swiper-container\n    class=\"swiper-carousel-container\"\n    thumbsSlider=\"\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"onOrderChanged($event)\"\n  >\n    <swiper-slide\n      *ngFor=\"let slide of slides; let index = index\"\n      [class.swiper-slide-default]=\"index === 0 && editMode\"\n    >\n      <div *ngIf=\"editMode\">\n        <button cdkDrag class=\"drag-button\" mat-menu-item></button>\n        <button\n          class=\"delete-button\"\n          mat-menu-item\n          (click)=\"deleteImage(index)\"\n        >\n          <kms-icon icon=\"trash\" [size]=\"15\"></kms-icon>\n        </button>\n      </div>\n      <img [src]=\"slide\" loading=\"lazy\" />\n      <div class=\"swiper-slide-default-text\" *ngIf=\"index === 0 && editMode\">\n        {{ 'common.defaultImage' | translate }}\n      </div>\n    </swiper-slide>\n  </swiper-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesToSave: "imagesToSave" }, outputs: { deleteImageEvent: "deleteImageEvent", orderChanged: "orderChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-slider-container\">\n  <swiper-container\n    class=\"swiper-main-view-container\"\n    thumbs-swiper=\".swiper-carousel-container\"\n  >\n    <swiper-slide *ngFor=\"let slide of slides\">\n      <img [src]=\"slide\" loading=\"lazy\" />\n    </swiper-slide>\n  </swiper-container>\n\n  <swiper-container\n    class=\"swiper-carousel-container\"\n    thumbsSlider=\"\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"onOrderChanged($event)\"\n  >\n    <swiper-slide\n      *ngFor=\"let slide of slides; let index = index\"\n      [class.swiper-slide-default]=\"index === 0 && editMode\"\n    >\n      <div *ngIf=\"editMode\">\n        <button cdkDrag class=\"drag-button\" mat-menu-item></button>\n        <button\n          class=\"delete-button\"\n          mat-menu-item\n          (click)=\"deleteImage(index)\"\n        >\n          <kms-icon icon=\"trash\" [size]=\"15\"></kms-icon>\n        </button>\n      </div>\n      <img [src]=\"slide\" loading=\"lazy\" />\n      <div class=\"swiper-slide-default-text\" *ngIf=\"index === 0 && editMode\">\n        {{ 'common.defaultImage' | translate }}\n      </div>\n    </swiper-slide>\n  </swiper-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSliderComponent, decorators: [{
             type: Component,
@@ -2838,7 +2874,7 @@ class PasswordComponent {
                 useExisting: forwardRef(() => PasswordComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field class=\"kms-password__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [type]=\"showPassword() ? 'text' : 'password'\"\n    matInput\n    (input)=\"valueChanged($event.target.value)\"\n    [disabled]=\"disabled()\"\n    (keypress)=\"keypress($event)\"\n    #password=\"matInput\"\n  />\n  @if (showPassword()) {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(false)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  } @else {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye_active\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(true)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  }\n</mat-form-field>\n\n@if ((eyeIconIsBeingPressed() || password.focused) && withStrength()) {\n<mat-card appearance=\"outlined\">\n  <mat-card-content class=\"kms-password__card\">\n    <mat-list role=\"list\">\n      @for (validation of validations(); track validation) {\n      <mat-list-item role=\"listitem\">\n        <div class=\"kms-password__strength-item\">\n          @if(validation.isValid()) {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_check\"\n            iconClass=\"color-success\"\n          ></kms-icon>\n          }@else {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_abbrechen\"\n            iconClass=\"color-warn\"\n          ></kms-icon>\n          } {{ validation.text() }}\n        </div></mat-list-item\n      >\n      }\n    </mat-list>\n  </mat-card-content>\n</mat-card>\n}\n", dependencies: [{ kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+        ], ngImport: i0, template: "<mat-form-field class=\"kms-password__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [type]=\"showPassword() ? 'text' : 'password'\"\n    matInput\n    (input)=\"valueChanged($event.target.value)\"\n    [disabled]=\"disabled()\"\n    (keypress)=\"keypress($event)\"\n    #password=\"matInput\"\n  />\n  @if (showPassword()) {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(false)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  } @else {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye_active\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(true)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  }\n</mat-form-field>\n\n@if ((eyeIconIsBeingPressed() || password.focused) && withStrength()) {\n<mat-card appearance=\"outlined\">\n  <mat-card-content class=\"kms-password__card\">\n    <mat-list role=\"list\">\n      @for (validation of validations(); track validation) {\n      <mat-list-item role=\"listitem\">\n        <div class=\"kms-password__strength-item\">\n          @if(validation.isValid()) {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_check\"\n            iconClass=\"color-success\"\n          ></kms-icon>\n          }@else {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_abbrechen\"\n            iconClass=\"color-warn\"\n          ></kms-icon>\n          } {{ validation.text() }}\n        </div></mat-list-item\n      >\n      }\n    </mat-list>\n  </mat-card-content>\n</mat-card>\n}\n", dependencies: [{ kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
@@ -2860,6 +2896,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class RadioGroupComponent {
+    constructor() {
+        this.options = input.required();
+        this.disabled = input(false);
+        this.value = input(null);
+        this.infoText = input(undefined);
+        this.color = input(StylingTheme.PRIMARY);
+        this.size = input(RadioButtonSize.MD);
+        this.direction = input('row');
+        this.onChange = (value) => {
+            this.value = value;
+        };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    handleChange(value) {
+        this.value = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RadioGroupComponent, selector: "kms-radiogroup", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, infoText: { classPropertyName: "infoText", publicName: "infoText", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "@if (options() && options().length > 0) {\n<mat-radio-group\n  class=\"radiogroup\"\n  [value]=\"value()\"\n  (change)=\"handleChange($event.value)\"\n  [disabled]=\"disabled()\"\n  [ngStyle]=\"{ 'flex-direction': direction() }\"\n>\n  @if (infoText()) {\n  <kms-tooltip-icon\n    [class.margin-left]=\"direction() == 'column'\"\n    [tooltipText]=\"infoText()\"\n  ></kms-tooltip-icon>\n  } @for (option of options(); track $index) {\n  <div class=\"radiobutton-container\">\n    <kms-radiobutton\n      [label]=\"option.Text\"\n      [value]=\"option.Value\"\n      [checked]=\"value() === option.Value\"\n      [disabled]=\"disabled() || option.Disabled\"\n      [size]=\"size()\"\n      [color]=\"color()\"\n    ></kms-radiobutton>\n    @if (option.InfoText) {\n    <kms-tooltip-icon [tooltipText]=\"option.InfoText\"></kms-tooltip-icon>\n    }\n  </div>\n  }\n</mat-radio-group>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: ["label", "checked", "disabled", "value", "size", "color"], outputs: ["onChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-radiogroup', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioGroupComponent),
+                            multi: true,
+                        },
+                    ], template: "@if (options() && options().length > 0) {\n<mat-radio-group\n  class=\"radiogroup\"\n  [value]=\"value()\"\n  (change)=\"handleChange($event.value)\"\n  [disabled]=\"disabled()\"\n  [ngStyle]=\"{ 'flex-direction': direction() }\"\n>\n  @if (infoText()) {\n  <kms-tooltip-icon\n    [class.margin-left]=\"direction() == 'column'\"\n    [tooltipText]=\"infoText()\"\n  ></kms-tooltip-icon>\n  } @for (option of options(); track $index) {\n  <div class=\"radiobutton-container\">\n    <kms-radiobutton\n      [label]=\"option.Text\"\n      [value]=\"option.Value\"\n      [checked]=\"value() === option.Value\"\n      [disabled]=\"disabled() || option.Disabled\"\n      [size]=\"size()\"\n      [color]=\"color()\"\n    ></kms-radiobutton>\n    @if (option.InfoText) {\n    <kms-tooltip-icon [tooltipText]=\"option.InfoText\"></kms-tooltip-icon>\n    }\n  </div>\n  }\n</mat-radio-group>\n}\n" }]
+        }] });
+
 /**
  * General Image Model
  */
@@ -2878,6 +2962,27 @@ var ImageSourceType;
     ImageSourceType["URL"] = "URL";
 })(ImageSourceType || (ImageSourceType = {}));
 
+class TextValuePairArray {
+}
+class TextValuePair {
+    constructor(text, value) {
+        this.Text = text;
+        this.Value = value;
+    }
+}
+class LabelValuePair {
+    constructor(label, value) {
+        this.Label = label;
+        this.Value = value;
+    }
+}
+class KeyValuePair {
+    constructor(key, value) {
+        this.Key = key;
+        this.Value = value;
+    }
+}
+
 /**
  * Attached File DTO
  */
@@ -3083,6 +3188,7 @@ class KmsUiPresentationalModule {
             LoaderComponent,
             MapComponent,
             RadioButtonComponent,
+            RadioGroupComponent,
             SalutationDropdownComponent,
             SalutationRadiogroupComponent,
             SlideToggleComponent,
@@ -3092,6 +3198,7 @@ class KmsUiPresentationalModule {
             PasswordComponent,
             SliderComponent,
             CardComponent,
+            ButtonComponent,
             NumericInputComponent], imports: [CommonModule,
             DragDropModule,
             MatCheckboxModule,
@@ -3114,7 +3221,6 @@ class KmsUiPresentationalModule {
             MatTooltipModule,
             NgxSliderModule,
             MatAutocompleteModule,
-            MatRadioModule,
             MatListModule,
             MatCardModule], exports: [BackToTopComponent,
             CheckboxComponent,
@@ -3141,6 +3247,7 @@ class KmsUiPresentationalModule {
             PasswordComponent,
             SliderComponent,
             CardComponent,
+            ButtonComponent,
             NumericInputComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KmsUiPresentationalModule, providers: [ViewportService], imports: [CommonModule,
             DragDropModule,
@@ -3164,7 +3271,6 @@ class KmsUiPresentationalModule {
             MatTooltipModule,
             NgxSliderModule,
             MatAutocompleteModule,
-            MatRadioModule,
             MatListModule,
             MatCardModule] }); }
 }
@@ -3188,6 +3294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LoaderComponent,
                         MapComponent,
                         RadioButtonComponent,
+                        RadioGroupComponent,
                         SalutationDropdownComponent,
                         SalutationRadiogroupComponent,
                         SlideToggleComponent,
@@ -3197,6 +3304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PasswordComponent,
                         SliderComponent,
                         CardComponent,
+                        ButtonComponent,
                         NumericInputComponent,
                     ],
                     imports: [
@@ -3222,7 +3330,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatTooltipModule,
                         NgxSliderModule,
                         MatAutocompleteModule,
-                        MatRadioModule,
                         MatListModule,
                         MatCardModule,
                     ],
@@ -3252,6 +3359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PasswordComponent,
                         SliderComponent,
                         CardComponent,
+                        ButtonComponent,
                         NumericInputComponent,
                     ],
                     providers: [ViewportService],
@@ -3288,5 +3396,5 @@ var ButtonResponseType;
  * Generated bundle index. Do not edit.
  */
 
-export { BackToTopComponent, Breakpoint, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ColorsArr, ColorsLabelsArr, ConfirmationDialogComponent, CustomPipesModule, DirectivesModule, DropdownFromDataComponent, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SlideToggleComponent, SliderComponent, SwipeDirective, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent };
+export { BackToTopComponent, Breakpoint, ButtonComponent, ButtonResponseType, ButtonType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DirectivesModule, DropdownFromDataComponent, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map