@kms-ngx-ui/presentational 18.6.2 → 20.0.0-next-angular20.0

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

@@ -1,51 +1,50 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, NgModule, EventEmitter, Directive, Input, Output, HostListener, PLATFORM_ID, Injectable, Inject, input, VERSION, forwardRef, ViewChild, HostBinding, output, computed, model, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, ViewChild, HostBinding, output, computed, model, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, CurrencyPipe, isPlatformBrowser, DOCUMENT } from '@angular/common';
-import * as i1$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, UntypedFormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule, CurrencyPipe, isPlatformBrowser } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$3 from '@angular/material/radio';
+import * as i1$6 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4$1 from '@angular/material/slide-toggle';
+import * as i3$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i1$1 from '@angular/platform-browser';
-import * as i1$4 from '@angular-slider/ngx-slider';
+import * as i1$7 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$5 from '@angular/cdk/drag-drop';
+import * as i1$9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2$2 from '@angular/google-maps';
+import * as i1$5 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import * as i6 from '@angular/material/autocomplete';
+import * as i5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i2$4 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$3 from '@angular/material/card';
+import * as i4$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i1$5 from '@angular/material/dialog';
+import * as i1$8 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3$1 from '@angular/material/expansion';
+import * as i3$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i2 from '@angular/material/form-field';
+import * as i1$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$2 from '@angular/material/input';
+import * as i2$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$2 from '@angular/material/list';
+import * as i3$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i3 from '@angular/material/menu';
+import * as i2$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i2$1 from '@angular/material/progress-spinner';
+import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i5 from '@angular/material/select';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5$1 from '@ngx-translate/core';
+import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { autoUpdate, computePosition, shift, offset, arrow, flip } from '@floating-ui/dom';
 import { Subject } from 'rxjs';
-import * as i4 from '@angular/material/core';
 import { trigger, state, style } from '@angular/animations';
 import { register } from 'swiper/element/bundle';
 import { isEmpty } from 'lodash';
@@ -54,22 +53,25 @@ import moment from 'moment';
 class KmsUiPresentationalComponent {
     constructor() { }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KmsUiPresentationalComponent, selector: "lib-kms-ngx-ui-presentational", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: KmsUiPresentationalComponent, isStandalone: false, selector: "lib-kms-ngx-ui-presentational", ngImport: i0, template: `
     <p>
       kms-ngx-ui-presentational works!
     </p>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-kms-ngx-ui-presentational', template: `
+            args: [{ standalone: false, selector: 'lib-kms-ngx-ui-presentational', template: `
     <p>
       kms-ngx-ui-presentational works!
     </p>
   ` }]
         }], ctorParameters: () => [] });
 
+/**
+ * @copyright KMS GmbH
+ */
 class IntegerCurrency {
     constructor(cp) {
         this.cp = cp;
@@ -81,16 +83,17 @@ class IntegerCurrency {
             return convertedValue;
         }
         else {
-            throw new Error("No value provided");
+            throw new Error('No value provided');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IntegerCurrency, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: IntegerCurrency, name: "kmsIntegerCurrency" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IntegerCurrency, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: IntegerCurrency, isStandalone: false, name: "kmsIntegerCurrency" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IntegerCurrency, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IntegerCurrency, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kmsIntegerCurrency',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i1.CurrencyPipe }] });
 
@@ -104,13 +107,14 @@ class SafeHtmlPipe {
     transform(html) {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SafeHtmlPipe, name: "kmsSafeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SafeHtmlPipe, isStandalone: false, name: "kmsSafeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kmsSafeHtml',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
@@ -124,13 +128,14 @@ class SafeResourceUrlPipe {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SafeResourceUrlPipe, name: "kmsSafeResourceSUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SafeResourceUrlPipe, isStandalone: false, name: "kmsSafeResourceSUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeResourceUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeResourceUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kmsSafeResourceSUrl',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
@@ -144,13 +149,14 @@ class SafeUrlPipe {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SafeUrlPipe, name: "kmsSafeSUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SafeUrlPipe, isStandalone: false, name: "kmsSafeSUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kmsSafeSUrl',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
 
@@ -158,12 +164,12 @@ class SanitizeNullPipe {
     transform(value) {
         return value === 'null' || value == null ? '' : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SanitizeNullPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SanitizeNullPipe, name: "sanitizeNull" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SanitizeNullPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SanitizeNullPipe, isStandalone: false, name: "sanitizeNull" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SanitizeNullPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SanitizeNullPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'sanitizeNull' }]
+            args: [{ name: 'sanitizeNull', standalone: false }]
         }] });
 
 /**
@@ -176,25 +182,26 @@ class TrimPipe {
         }
         return value.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrimPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TrimPipe, name: "kmsTrim" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrimPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TrimPipe, isStandalone: false, name: "kmsTrim" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrimPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TrimPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'kmsTrim' }]
+            args: [{ name: 'kmsTrim', standalone: false }]
         }] });
 
 class TypeofPipe {
     transform(value) {
         return typeof value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TypeofPipe, name: "kmsTypeOf" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TypeofPipe, isStandalone: false, name: "kmsTypeOf" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TypeofPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TypeofPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kmsTypeOf',
+                    standalone: false,
                 }]
         }] });
 
@@ -202,8 +209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @copyright KMS GmbH
  */
 class CustomPipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: CustomPipesModule, declarations: [IntegerCurrency,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CustomPipesModule, declarations: [IntegerCurrency,
             SafeHtmlPipe,
             SanitizeNullPipe,
             SafeUrlPipe,
@@ -216,9 +223,9 @@ class CustomPipesModule {
             TrimPipe,
             SafeResourceUrlPipe,
             TypeofPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomPipesModule, providers: [CurrencyPipe], imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPipesModule, providers: [CurrencyPipe], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomPipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CustomPipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -299,13 +306,14 @@ class GetMaxHeightDirective {
         this.maxHeightChanged.emit(maxHeight);
         this.sumOfHeight.emit(sumOfHeight);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GetMaxHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: { cssClassName: ["getMaxHeight", "cssClassName"] }, outputs: { maxHeightChanged: "maxHeightChanged", sumOfHeight: "sumOfHeight" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GetMaxHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: GetMaxHeightDirective, isStandalone: false, selector: "[getMaxHeight]", inputs: { cssClassName: ["getMaxHeight", "cssClassName"] }, outputs: { maxHeightChanged: "maxHeightChanged", sumOfHeight: "sumOfHeight" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GetMaxHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GetMaxHeightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[getMaxHeight]',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cssClassName: [{
                 type: Input,
@@ -470,13 +478,14 @@ class SwipeDirective {
             this._moveEventData = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SwipeDirective, selector: "[swipeDirective]", inputs: { config: ["swipeDirective", "config"] }, outputs: { moveEvent: "moveEvent", releaseEvent: "releaseEvent" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onMouseDown($event)", "mousemove": "onMove($event)", "touchmove": "onMove($event)", "mouseup": "onRelease($event)", "mouseleave": "onRelease($event)", "touchend": "onRelease($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SwipeDirective, isStandalone: false, selector: "[swipeDirective]", inputs: { config: ["swipeDirective", "config"] }, outputs: { moveEvent: "moveEvent", releaseEvent: "releaseEvent" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onMouseDown($event)", "mousemove": "onMove($event)", "touchmove": "onMove($event)", "mouseup": "onRelease($event)", "mouseleave": "onRelease($event)", "touchend": "onRelease($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwipeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwipeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[swipeDirective]',
+                    standalone: false,
                 }]
         }], propDecorators: { moveEvent: [{
                 type: Output
@@ -536,13 +545,14 @@ class TimeDirective {
             inputElement.dispatchEvent(new Event('input'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TimeDirective, selector: "[kmsTime]", host: { listeners: { "input": "onInputChange($event)", "beforeinput": "onBeforeInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TimeDirective, isStandalone: false, selector: "[kmsTime]", host: { listeners: { "input": "onInputChange($event)", "beforeinput": "onBeforeInput($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kmsTime]',
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onInputChange: [{
                 type: HostListener,
@@ -645,12 +655,12 @@ class TooltipDirective {
         this.renderer.removeClass(this.arrow, 'kms-tooltip__arrow--top');
         this.renderer.addClass(this.arrow, 'kms-tooltip__arrow--' + side);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TooltipDirective, selector: "[kmsTooltip]", inputs: { kmsTooltip: "kmsTooltip", placement: "placement", delay: "delay", alwaysVisible: "alwaysVisible" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: TooltipDirective, isStandalone: false, selector: "[kmsTooltip]", inputs: { kmsTooltip: "kmsTooltip", placement: "placement", delay: "delay", alwaysVisible: "alwaysVisible" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kmsTooltip]' }]
+            args: [{ selector: '[kmsTooltip]', standalone: false }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { kmsTooltip: [{
                 type: Input
             }], placement: [{
@@ -671,17 +681,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @copyright KMS GmbH
  */
 class DirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DirectivesModule, declarations: [SwipeDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, declarations: [SwipeDirective,
             GetMaxHeightDirective,
             TooltipDirective,
-            TimeDirective], imports: [CommonModule], exports: [SwipeDirective,
+            TimeDirective], exports: [SwipeDirective,
             GetMaxHeightDirective,
             TooltipDirective,
             TimeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DirectivesModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -690,7 +700,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TooltipDirective,
                         TimeDirective,
                     ],
-                    imports: [CommonModule],
                     exports: [
                         SwipeDirective,
                         GetMaxHeightDirective,
@@ -1038,10 +1047,10 @@ class ViewportService {
             window.removeEventListener('resize', this.documentSizeChanged);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewportService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ViewportService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ViewportService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
@@ -1103,23 +1112,23 @@ class IconComponent {
          * Required: Name of the SVG icon inside your sprite sheet file with name 'icons.svg'.
          * Pass 'none' if no icon should be rendered.
          */
-        this.icon = input();
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         /**
          * Optional: Different appearance via CSS class defined in this component´s style sheet.
          */
-        this.iconClass = input('');
-        this.size = input(IconSizePx.XS);
-        this.dontUseSprite = input(false);
-        this.color = input(Color.BLACK);
+        this.iconClass = input('', ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+        this.size = input(IconSizePx.XS, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.dontUseSprite = input(false, ...(ngDevMode ? [{ debugName: "dontUseSprite" }] : []));
+        this.color = input(Color.BLACK, ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.Version = VERSION.full;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", 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 [style.width.px]=\"size()\" [style.height.px]=\"size()\">\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  ></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;--kms-green: #008000;--kms-light-green: #00c800;--kms-font-green: #27ae60}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: IconComponent, isStandalone: false, 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: "@if (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 [style.width.px]=\"size()\" [style.height.px]=\"size()\">\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\n        \"\n      ></use>\n    </svg>\n  </span>\n}\n@if (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  ></object>\n}\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;--kms-green: #008000;--kms-light-green: #00c800;--kms-font-green: #27ae60}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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 [style.width.px]=\"size()\" [style.height.px]=\"size()\">\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  ></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;--kms-green: #008000;--kms-light-green: #00c800;--kms-font-green: #27ae60}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
+            args: [{ selector: 'kms-icon', standalone: false, template: "@if (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 [style.width.px]=\"size()\" [style.height.px]=\"size()\">\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\n        \"\n      ></use>\n    </svg>\n  </span>\n}\n@if (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  ></object>\n}\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;--kms-green: #008000;--kms-light-green: #00c800;--kms-font-green: #27ae60}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dontUseSprite: [{ type: i0.Input, args: [{ isSignal: true, alias: "dontUseSprite", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 /**
  * @copyright KMS GmbH
@@ -1149,12 +1158,12 @@ class BackToTopComponent {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BackToTopComponent, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div\n  class=\"scrollToTop\"\n  [ngClass]=\"{ show: windowScrolled }\"\n  (click)=\"scrollToTop()\"\n>\n  <div class=\"scrollToTop-inner\">\n    <kms-icon\n      icon=\"floating_button_clear\"\n      [color]=\"Color.WHITE\"\n      [size]=\"IconSizePx.SM\"\n    ></kms-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BackToTopComponent, isStandalone: false, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div\n  class=\"scrollToTop\"\n  [ngClass]=\"{ show: windowScrolled }\"\n  (click)=\"scrollToTop()\"\n>\n  <div class=\"scrollToTop-inner\">\n    <kms-icon\n      icon=\"floating_button_clear\"\n      [color]=\"Color.WHITE\"\n      [size]=\"IconSizePx.SM\"\n    ></kms-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BackToTopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BackToTopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-back-to-top', template: "<div\n  class=\"scrollToTop\"\n  [ngClass]=\"{ show: windowScrolled }\"\n  (click)=\"scrollToTop()\"\n>\n  <div class=\"scrollToTop-inner\">\n    <kms-icon\n      icon=\"floating_button_clear\"\n      [color]=\"Color.WHITE\"\n      [size]=\"IconSizePx.SM\"\n    ></kms-icon>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'kms-back-to-top', standalone: false, template: "<div\n  class=\"scrollToTop\"\n  [ngClass]=\"{ show: windowScrolled }\"\n  (click)=\"scrollToTop()\"\n>\n  <div class=\"scrollToTop-inner\">\n    <kms-icon\n      icon=\"floating_button_clear\"\n      [color]=\"Color.WHITE\"\n      [size]=\"IconSizePx.SM\"\n    ></kms-icon>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -1165,16 +1174,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class CardComponent {
     constructor() {
-        this.imageUrl = input('');
-        this.hoverEffect = input(false);
+        this.imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+        this.hoverEffect = input(false, ...(ngDevMode ? [{ debugName: "hoverEffect" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, selector: "kms-card", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, hoverEffect: { classPropertyName: "hoverEffect", publicName: "hoverEffect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{ hoverEffect: hoverEffect() }\">\n  @if(imageUrl() !== '') {\n  <div\n    class=\"card-image\"\n    [ngStyle]=\"{ 'background-image': 'url(' + imageUrl() + ')' }\"\n  ></div>\n  }\n  <div class=\"card-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CardComponent, isStandalone: false, selector: "kms-card", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, hoverEffect: { classPropertyName: "hoverEffect", publicName: "hoverEffect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{ hoverEffect: hoverEffect() }\">\n  @if(imageUrl() !== '') {\n  <div\n    class=\"card-image\"\n    [ngStyle]=\"{ 'background-image': 'url(' + imageUrl() + ')' }\"\n  ></div>\n  }\n  <div class=\"card-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-card', template: "<div class=\"card\" [ngClass]=\"{ hoverEffect: hoverEffect() }\">\n  @if(imageUrl() !== '') {\n  <div\n    class=\"card-image\"\n    [ngStyle]=\"{ 'background-image': 'url(' + imageUrl() + ')' }\"\n  ></div>\n  }\n  <div class=\"card-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }] });
+            args: [{ selector: 'kms-card', standalone: false, template: "<div class=\"card\" [ngClass]=\"{ hoverEffect: hoverEffect() }\">\n  @if(imageUrl() !== '') {\n  <div\n    class=\"card-image\"\n    [ngStyle]=\"{ 'background-image': 'url(' + imageUrl() + ')' }\"\n  ></div>\n  }\n  <div class=\"card-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], propDecorators: { imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], hoverEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverEffect", required: false }] }] } });
 
 /**
  * @copyright KMS GmbH
@@ -1208,16 +1217,16 @@ class CheckboxComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckboxComponent, selector: "kms-checkbox", inputs: { infoText: "infoText", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CheckboxComponent, isStandalone: false, selector: "kms-checkbox", inputs: { infoText: "infoText", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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    color=\"primary\"\n  >\n    {{ infoText }}\n  </mat-checkbox>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-checkbox', providers: [
                         {
@@ -1225,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    color=\"primary\"\n  >\n    {{ infoText }}\n  </mat-checkbox>\n</div>\n" }]
+                    ], standalone: false, 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: [{
@@ -1242,8 +1251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @copyright KMS GmbH
  */
 class FormParentComponent {
-    constructor(formBuilder) {
-        this.formBuilder = formBuilder;
+    constructor() {
         this.formInitialized = false;
         this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map((c) => c.charCodeAt(0)));
         this.formDataChanged = new EventEmitter();
@@ -1304,25 +1312,25 @@ class FormParentComponent {
             this.formDataChanged.emit(this.form);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormParentComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormParentComponent, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormParentComponent, isStandalone: false, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormParentComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: 'kms-form',
                     template: '',
                 }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }], propDecorators: { formDataChanged: [{
+        }], propDecorators: { formDataChanged: [{
                 type: Output
             }], disabled: [{
                 type: Input
             }] } });
 
 class FormControlParentComponent extends FormParentComponent {
-    constructor(formBuilder, renderer) {
-        super(formBuilder);
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
+        super();
         this.renderer = renderer;
         this.defaultDataOverride = ''; // when we have NO form around, get default via input to set it manually
         this.onSelectItemEmitter = new EventEmitter();
@@ -1368,20 +1376,28 @@ class FormControlParentComponent extends FormParentComponent {
         if (this.child?.nativeElement) {
             this.renderer.setProperty(this.child.nativeElement, 'disabled', isDisabled);
         }
+        this.disabled = isDisabled;
+        if (isDisabled) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
     }
     validate(_) {
         return this.form.valid ? null : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlParentComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormControlParentComponent, selector: "kms-formControlParent", inputs: { defaultDataOverride: "defaultDataOverride" }, outputs: { onSelectItemEmitter: "onSelectItemEmitter" }, viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormControlParentComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormControlParentComponent, isStandalone: false, selector: "kms-formControlParent", inputs: { defaultDataOverride: "defaultDataOverride" }, outputs: { onSelectItemEmitter: "onSelectItemEmitter" }, viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormControlParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormControlParentComponent, decorators: [{
             type: Component,
             args: [{
+                    standalone: false,
                     selector: 'kms-formControlParent',
                     template: '',
                 }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }], propDecorators: { defaultDataOverride: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { defaultDataOverride: [{
                 type: Input
             }], onSelectItemEmitter: [{
                 type: Output
@@ -1394,9 +1410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
  */
 class DropdownFromDataComponent extends FormControlParentComponent {
-    constructor(formBuilder, renderer) {
-        super(formBuilder, renderer);
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
+        super(renderer);
         this.renderer = renderer;
         // options for the dropdown have a null value at the beginning of the array
         this.hasNullOption = false;
@@ -1423,8 +1438,8 @@ class DropdownFromDataComponent extends FormControlParentComponent {
         this.setKeyValues();
     }
     ngOnInit() {
-        this.form = this.formBuilder.group({
-            dropdownData: [],
+        this.form = new UntypedFormGroup({
+            dropdownData: new UntypedFormControl([]),
         });
         this.formInitialized = true;
         this.form.valueChanges.subscribe((value) => {
@@ -1532,16 +1547,16 @@ class DropdownFromDataComponent extends FormControlParentComponent {
             this.form.controls.dropdownData.setValue(this.values);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownFromDataComponent, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", preselectedKeys: "preselectedKeys", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple", selectAllText: "selectAllText", disableOptions: "disableOptions" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DropdownFromDataComponent, isStandalone: false, selector: "kms-dropdown-from-data", inputs: { optionsEnum: "optionsEnum", optionsPlainArray: "optionsPlainArray", optionsObjArray: "optionsObjArray", mapKey: "mapKey", mapValue: "mapValue", hasNullOption: "hasNullOption", preselectedKeys: "preselectedKeys", translation: "translation", placeholder: "placeholder", label: "label", required: "required", useEnumIndexAsValue: "useEnumIndexAsValue", multiple: "multiple", selectAllText: "selectAllText", disableOptions: "disableOptions" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.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: i5.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.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      @if (selectAllText && !disableOptions) {\n        <mat-checkbox\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      }\n      @for (key of keys; track key; let i = $index) {\n        <mat-option\n          [value]=\"values[i]\"\n          [disabled]=\"disableOptions\"\n          >\n          {{ setDisplayKey(key) || '\u2014' }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-dropdown-from-data', providers: [
                         {
@@ -1549,8 +1564,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => DropdownFromDataComponent),
                             multi: true,
                         },
-                    ], 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        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }], propDecorators: { optionsEnum: [{
+                    ], standalone: false, 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      @if (selectAllText && !disableOptions) {\n        <mat-checkbox\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      }\n      @for (key of keys; track key; let i = $index) {\n        <mat-option\n          [value]=\"values[i]\"\n          [disabled]=\"disableOptions\"\n          >\n          {{ setDisplayKey(key) || '\u2014' }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{
                 type: Input
             }], optionsPlainArray: [{
                 type: Input
@@ -1586,16 +1601,22 @@ class LoaderComponent {
     constructor() {
         this.loading = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LoaderComponent, isStandalone: false, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, template: "@if (loading) {\n  <div class=\"loading-spinner-shade\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-loader', template: "<div class=\"loading-spinner-shade\" *ngIf=\"loading\">\n  <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n</div>\n" }]
+            args: [{ selector: 'kms-loader', standalone: false, template: "@if (loading) {\n  <div class=\"loading-spinner-shade\">\n    <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n  </div>\n}\n" }]
         }], propDecorators: { loading: [{
                 type: Input
             }] } });
 
+/**
+ * Typical basic address data
+ */
+class Address {
+}
+
 /**
  * @copyright KMS GmbH
  */
@@ -1695,12 +1716,12 @@ class MapComponent {
             this.zoom--;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.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$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MapComponent, isStandalone: false, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "@if (geoDataFoundForAddress) {\n  <div>\n    <google-map\n      height=\"415px\"\n      [width]=\"width\"\n      [zoom]=\"zoom\"\n      [center]=\"center\"\n      [options]=\"options\"\n      >\n      @for (marker of markers; track marker) {\n        <map-marker\n          [position]=\"marker.position\"\n          [label]=\"marker.label\"\n          [title]=\"marker.title\"\n          [options]=\"marker.options\"\n          >\n        </map-marker>\n      }\n    </google-map>\n  </div>\n}", styles: [""], dependencies: [{ kind: "component", type: i1$5.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: i1$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", "markerInitialized"], exportAs: ["mapMarker"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-map', template: "<div *ngIf=\"geoDataFoundForAddress\">\n    <google-map\n            height=\"415px\"\n            [width]=\"width\"\n            [zoom]=\"zoom\"\n            [center]=\"center\"\n            [options]=\"options\"\n    >\n        <map-marker\n            *ngFor=\"let marker of markers\"\n            [position]=\"marker.position\"\n            [label]=\"marker.label\"\n            [title]=\"marker.title\"\n            [options]=\"marker.options\"\n        >\n        </map-marker>\n    </google-map>\n</div>" }]
+            args: [{ selector: 'kms-map', standalone: false, template: "@if (geoDataFoundForAddress) {\n  <div>\n    <google-map\n      height=\"415px\"\n      [width]=\"width\"\n      [zoom]=\"zoom\"\n      [center]=\"center\"\n      [options]=\"options\"\n      >\n      @for (marker of markers; track marker) {\n        <map-marker\n          [position]=\"marker.position\"\n          [label]=\"marker.label\"\n          [title]=\"marker.title\"\n          [options]=\"marker.options\"\n          >\n        </map-marker>\n      }\n    </google-map>\n  </div>\n}" }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -1740,16 +1761,16 @@ class RadioButtonComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: { label: "label", checked: "checked", disabled: "disabled", value: "value", size: "size", color: "color" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: RadioButtonComponent, isStandalone: false, selector: "kms-radiobutton", inputs: { label: "label", checked: "checked", disabled: "disabled", value: "value", size: "size", color: "color" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioButtonComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-radio-button\n  [disabled]=\"disabled\"\n  [checked]=\"checked\"\n  [ngClass]=\"size\"\n  [color]=\"color\"\n  [value]=\"value\"\n  (change)=\"onChange.emit()\"\n  ngDefaultControl\n>\n  {{ label }}\n</mat-radio-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] }); }
+        ], ngImport: i0, template: "<mat-radio-button\n  [disabled]=\"disabled\"\n  [checked]=\"checked\"\n  [ngClass]=\"size\"\n  [color]=\"color\"\n  [value]=\"value\"\n  (change)=\"onChange.emit()\"\n  ngDefaultControl\n>\n  {{ label }}\n</mat-radio-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-radiobutton', providers: [
                         {
@@ -1757,7 +1778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => RadioButtonComponent),
                             multi: true,
                         },
-                    ], template: "<mat-radio-button\n  [disabled]=\"disabled\"\n  [checked]=\"checked\"\n  [ngClass]=\"size\"\n  [color]=\"color\"\n  [value]=\"value\"\n  (change)=\"onChange.emit()\"\n  ngDefaultControl\n>\n  {{ label }}\n</mat-radio-button>\n" }]
+                    ], standalone: false, template: "<mat-radio-button\n  [disabled]=\"disabled\"\n  [checked]=\"checked\"\n  [ngClass]=\"size\"\n  [color]=\"color\"\n  [value]=\"value\"\n  (change)=\"onChange.emit()\"\n  ngDefaultControl\n>\n  {{ label }}\n</mat-radio-button>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], checked: [{
@@ -1809,16 +1830,16 @@ class SlideToggleComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SlideToggleComponent, selector: "kms-slide-toggle", inputs: { leftLabel: "leftLabel", rightLabel: "rightLabel", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SlideToggleComponent, isStandalone: false, selector: "kms-slide-toggle", inputs: { leftLabel: "leftLabel", rightLabel: "rightLabel", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SlideToggleComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"kms-slide-toggle\">\n  <mat-label\n    *ngIf=\"leftLabel\"\n    class=\"kms-slide-toggle__label\"\n    [class.kms-slide-toggle__label--bold]=\"rightLabel && !checked\"\n    >{{ leftLabel }}</mat-label\n  >\n  <mat-slide-toggle\n    [name]=\"name\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [hideIcon]=\"true\"\n    (change)=\"emitOnChange($event)\"\n  />\n  <mat-label\n    *ngIf=\"rightLabel\"\n    class=\"kms-slide-toggle__label\"\n    [class.kms-slide-toggle__label--bold]=\"leftLabel && checked\"\n    >{{ rightLabel }}</mat-label\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+        ], ngImport: i0, template: "<div class=\"kms-slide-toggle\">\n  @if (leftLabel) {\n    <mat-label\n      class=\"kms-slide-toggle__label\"\n      [class.kms-slide-toggle__label--bold]=\"rightLabel && !checked\"\n      >{{ leftLabel }}</mat-label\n      >\n    }\n    <mat-slide-toggle\n      [name]=\"name\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [hideIcon]=\"true\"\n      (change)=\"emitOnChange($event)\"\n      />\n    @if (rightLabel) {\n      <mat-label\n        class=\"kms-slide-toggle__label\"\n        [class.kms-slide-toggle__label--bold]=\"leftLabel && checked\"\n        >{{ rightLabel }}</mat-label\n        >\n      }\n    </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-slide-toggle', providers: [
                         {
@@ -1826,7 +1847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => SlideToggleComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"kms-slide-toggle\">\n  <mat-label\n    *ngIf=\"leftLabel\"\n    class=\"kms-slide-toggle__label\"\n    [class.kms-slide-toggle__label--bold]=\"rightLabel && !checked\"\n    >{{ leftLabel }}</mat-label\n  >\n  <mat-slide-toggle\n    [name]=\"name\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [hideIcon]=\"true\"\n    (change)=\"emitOnChange($event)\"\n  />\n  <mat-label\n    *ngIf=\"rightLabel\"\n    class=\"kms-slide-toggle__label\"\n    [class.kms-slide-toggle__label--bold]=\"leftLabel && checked\"\n    >{{ rightLabel }}</mat-label\n  >\n</div>\n" }]
+                    ], standalone: false, template: "<div class=\"kms-slide-toggle\">\n  @if (leftLabel) {\n    <mat-label\n      class=\"kms-slide-toggle__label\"\n      [class.kms-slide-toggle__label--bold]=\"rightLabel && !checked\"\n      >{{ leftLabel }}</mat-label\n      >\n    }\n    <mat-slide-toggle\n      [name]=\"name\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [hideIcon]=\"true\"\n      (change)=\"emitOnChange($event)\"\n      />\n    @if (rightLabel) {\n      <mat-label\n        class=\"kms-slide-toggle__label\"\n        [class.kms-slide-toggle__label--bold]=\"leftLabel && checked\"\n        >{{ rightLabel }}</mat-label\n        >\n      }\n    </div>\n" }]
         }], propDecorators: { leftLabel: [{
                 type: Input
             }], rightLabel: [{
@@ -1841,6 +1862,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * @copyright KMS GmbH
+ */
 class SliderComponent {
     constructor() {
         this.kmsSliderClass = true;
@@ -1877,16 +1901,16 @@ class SliderComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SliderComponent, selector: "kms-slider", inputs: { disabled: "disabled", options: "options", max: "max" }, outputs: { change: "change" }, host: { properties: { "class.kms-slider": "this.kmsSliderClass", "class.kms-slider--disabled": "this.disabledClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SliderComponent, isStandalone: false, selector: "kms-slider", inputs: { disabled: "disabled", options: "options", max: "max" }, outputs: { change: "change" }, host: { properties: { "class.kms-slider": "this.kmsSliderClass", "class.kms-slider--disabled": "this.disabledClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ngx-slider\n  [(value)]=\"value\"\n  [options]=\"options\"\n  [highValue]=\"max\"\n  (userChangeEnd)=\"change.emit($event)\"\n></ngx-slider>\n", styles: [""], dependencies: [{ kind: "component", type: i1$4.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] }); }
+        ], ngImport: i0, template: "<ngx-slider\n  [(value)]=\"value\"\n  [options]=\"options\"\n  [highValue]=\"max\"\n  (userChangeEnd)=\"change.emit($event)\"\n></ngx-slider>\n", styles: [""], dependencies: [{ kind: "component", type: i1$7.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kms-slider', providers: [
                         {
@@ -1894,7 +1918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], template: "<ngx-slider\n  [(value)]=\"value\"\n  [options]=\"options\"\n  [highValue]=\"max\"\n  (userChangeEnd)=\"change.emit($event)\"\n></ngx-slider>\n" }]
+                    ], standalone: false, template: "<ngx-slider\n  [(value)]=\"value\"\n  [options]=\"options\"\n  [highValue]=\"max\"\n  (userChangeEnd)=\"change.emit($event)\"\n></ngx-slider>\n" }]
         }], propDecorators: { kmsSliderClass: [{
                 type: HostBinding,
                 args: ['class.kms-slider']
@@ -1923,15 +1947,15 @@ var ButtonAppearance;
  */
 class ButtonComponent {
     constructor() {
-        this.color = input(StylingTheme.PRIMARY);
-        this.type = input('button');
-        this.appearance = input(ButtonAppearance.FLAT);
-        this.loading = input(false);
-        this.label = input('');
-        this.icon = input();
-        this.disabled = input(false);
+        this.color = input(StylingTheme.PRIMARY, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.appearance = input(ButtonAppearance.FLAT, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.buttonClick = output();
-        this.rounded = input(false);
+        this.rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
         this.StylingTheme = StylingTheme;
         this.IconSize = IconSizePx;
         this.ButtonAppearance = ButtonAppearance;
@@ -1950,50 +1974,49 @@ class ButtonComponent {
                 case StylingTheme.WARN:
                     return Color.ERROR;
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if (loading()) {\n  <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n  } @if (icon()) {\n  <kms-icon\n    class=\"kms-button__icon\"\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: false, 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if (loading()) {\n  <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n  } @if (icon()) {\n  <kms-icon\n    class=\"kms-button__icon\"\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.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.14", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-button', template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if (loading()) {\n  <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n  } @if (icon()) {\n  <kms-icon\n    class=\"kms-button__icon\"\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n</ng-template>\n" }]
-        }] });
+            args: [{ selector: 'kms-button', standalone: false, template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n  mat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n  mat-flat-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n  mat-raised-button\n  [color]=\"color()\"\n  class=\"kms-button\"\n  [ngClass]=\"{\n    'kms-button--loading': loading(),\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    'kms-button--rounded': rounded()\n  }\"\n  [disabled]=\"disabled() || loading()\"\n  (click)=\"buttonClick.emit($event)\"\n  [type]=\"type()\"\n  (keyup)=\"\n    ($event.key === 'Enter' || $event.key === 'Space') &&\n      buttonClick.emit($event)\n  \"\n>\n  <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n  @if (loading()) {\n  <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n  } @if (icon()) {\n  <kms-icon\n    class=\"kms-button__icon\"\n    [color]=\"iconColor()\"\n    [size]=\"IconSize.XXS\"\n    [icon]=\"icon()\"\n  ></kms-icon>\n  }\n  {{ label() }}\n</ng-template>\n" }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
 class TooltipIconComponent {
     constructor() {
-        this.tooltipText = input('');
-        this.placement = input();
-        this.delay = input(1000);
-        this.iconSize = input(IconSizePx.XS);
-        this.tooltipAlwaysVisible = input(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlwaysVisible: { classPropertyName: "tooltipAlwaysVisible", publicName: "tooltipAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div #tooltipContent>\n  <ng-container *ngIf=\"tooltipText(); else content\">\n    {{ tooltipText() }}\n  </ng-container>\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n\n<kms-icon\n  icon=\"ic_info\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["kmsTooltip", "placement", "delay", "alwaysVisible"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+        this.tooltipText = input('', ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : []));
+        this.delay = input(1000, ...(ngDevMode ? [{ debugName: "delay" }] : []));
+        this.iconSize = input(IconSizePx.XS, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+        this.tooltipAlwaysVisible = input(false, ...(ngDevMode ? [{ debugName: "tooltipAlwaysVisible" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TooltipIconComponent, isStandalone: false, selector: "kms-tooltip-icon", inputs: { tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlwaysVisible: { classPropertyName: "tooltipAlwaysVisible", publicName: "tooltipAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div #tooltipContent>\n  @if (tooltipText()) {\n    {{ tooltipText() }}\n  } @else {\n    <ng-content></ng-content>\n  }\n</div>\n\n<kms-icon\n  icon=\"ic_info\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["kmsTooltip", "placement", "delay", "alwaysVisible"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-tooltip-icon', template: "<div #tooltipContent>\n  <ng-container *ngIf=\"tooltipText(); else content\">\n    {{ tooltipText() }}\n  </ng-container>\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n\n<kms-icon\n  icon=\"ic_info\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n" }]
+            args: [{ standalone: false, selector: 'kms-tooltip-icon', template: "<div #tooltipContent>\n  @if (tooltipText()) {\n    {{ tooltipText() }}\n  } @else {\n    <ng-content></ng-content>\n  }\n</div>\n\n<kms-icon\n  icon=\"ic_info\"\n  [size]=\"iconSize()\"\n  [kmsTooltip]=\"tooltipContent\"\n  [placement]=\"placement()\"\n  [delay]=\"delay()\"\n  [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n" }]
         }], propDecorators: { button: [{
                 type: ViewChild,
                 args: ['button']
             }], tooltip: [{
                 type: ViewChild,
                 args: ['tooltip']
-            }] } });
+            }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], tooltipAlwaysVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlwaysVisible", required: false }] }] } });
 
 class ColorInputComponent extends FormControlParentComponent {
-    constructor(formBuilder, renderer) {
-        super(formBuilder, renderer);
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
+        super(renderer);
         this.renderer = renderer;
         this.label = '';
         this.tooltipText = '';
         this.placeholder = '';
     }
     ngOnInit() {
-        this.form = this.formBuilder.group({
-            color: '',
+        this.form = new UntypedFormGroup({
+            color: new UntypedFormControl(''),
         });
         super.ngOnInit();
         this.formInitialized = true;
@@ -2023,25 +2046,25 @@ class ColorInputComponent extends FormControlParentComponent {
         this.internalValue = color;
         this.change(color);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorInputComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColorInputComponent, selector: "kms-color-input", inputs: { label: "label", tooltipText: "tooltipText", placeholder: "placeholder" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ColorInputComponent, isStandalone: false, selector: "kms-color-input", inputs: { label: "label", tooltipText: "tooltipText", placeholder: "placeholder" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorInputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: i4$2.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: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "\n@if (formInitialized) {\n  <form [formGroup]=\"form\">\n    <div>\n      <mat-form-field class=\"colorInput\">\n        @if (tooltipText) {\n          <kms-tooltip-icon [tooltipText]=\"tooltipText\"></kms-tooltip-icon>\n        }\n        <mat-label>{{ label }}</mat-label>\n        <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n      </mat-form-field>\n    </div>\n  </form>\n}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-color-input', providers: [
+            args: [{ standalone: false, selector: 'kms-color-input', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ColorInputComponent),
                             multi: true,
                         },
-                    ], template: "\n<form [formGroup]=\"form\" *ngIf=\"formInitialized\">\n    <div>\n        <mat-form-field class=\"colorInput\">\n            <kms-tooltip-icon [tooltipText]=\"tooltipText\" *ngIf=\"tooltipText\"></kms-tooltip-icon>\n            <mat-label>{{ label }}</mat-label>\n            <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n            <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        </mat-form-field>\n    </div>\n</form>" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }], propDecorators: { label: [{
+                    ], template: "\n@if (formInitialized) {\n  <form [formGroup]=\"form\">\n    <div>\n      <mat-form-field class=\"colorInput\">\n        @if (tooltipText) {\n          <kms-tooltip-icon [tooltipText]=\"tooltipText\"></kms-tooltip-icon>\n        }\n        <mat-label>{{ label }}</mat-label>\n        <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n        <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n      </mat-form-field>\n    </div>\n  </form>\n}" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{
                 type: Input
             }], tooltipText: [{
                 type: Input
@@ -2088,28 +2111,27 @@ class ConfirmationDialogComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$5.MatDialogRef }, { token: i0.NgZone }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$8.MatDialogRef }, { token: i0.NgZone }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: false, 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$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-confirmation-dialog', 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" }]
-        }], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+            args: [{ standalone: false, selector: 'kms-confirmation-dialog', 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" }]
+        }], ctorParameters: () => [{ type: i1$8.MatDialogRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
 class EnumRadiogroupComponent extends FormControlParentComponent {
-    constructor(formBuilder, renderer) {
-        super(formBuilder, renderer);
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
+        super(renderer);
         this.renderer = renderer;
         this.translationPrefix = '';
     }
     ngOnInit() {
         this.optionValues = Object.keys(this.optionsEnum).filter((x) => !(parseInt(x) >= 0));
-        this.form = this.formBuilder.group({
-            enumData: [],
+        this.form = new UntypedFormGroup({
+            enumData: new UntypedFormControl([]),
         });
         this.formInitialized = true;
         this.form.valueChanges.subscribe((value) => {
@@ -2118,25 +2140,25 @@ class EnumRadiogroupComponent extends FormControlParentComponent {
         });
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EnumRadiogroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EnumRadiogroupComponent, selector: "kms-enum-radiogroup", inputs: { header: "header", optionsEnum: "optionsEnum", translationPrefix: "translationPrefix" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EnumRadiogroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: EnumRadiogroupComponent, isStandalone: false, selector: "kms-enum-radiogroup", inputs: { header: "header", optionsEnum: "optionsEnum", translationPrefix: "translationPrefix" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EnumRadiogroupComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"enumData\" [disabled]=\"disabled\" #child>\n    <mat-radio-button\n      [value]=\"choice\"\n      [checked]=\"value === choice\"\n      *ngFor=\"let choice of optionValues\"\n      >{{ translationPrefix + '.' + choice | translate }}</mat-radio-button\n    >\n  </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"enumData\" [disabled]=\"disabled\" #child>\n    @for (choice of optionValues; track choice) {\n      <mat-radio-button\n        [value]=\"choice\"\n        [checked]=\"value === choice\"\n        >{{ translationPrefix + '.' + choice | translate }}</mat-radio-button\n        >\n      }\n    </mat-radio-group>\n  </form>\n", dependencies: [{ kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-enum-radiogroup', providers: [
+            args: [{ standalone: false, selector: 'kms-enum-radiogroup', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EnumRadiogroupComponent),
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"enumData\" [disabled]=\"disabled\" #child>\n    <mat-radio-button\n      [value]=\"choice\"\n      [checked]=\"value === choice\"\n      *ngFor=\"let choice of optionValues\"\n      >{{ translationPrefix + '.' + choice | translate }}</mat-radio-button\n    >\n  </mat-radio-group>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }], propDecorators: { header: [{
+                    ], template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"enumData\" [disabled]=\"disabled\" #child>\n    @for (choice of optionValues; track choice) {\n      <mat-radio-button\n        [value]=\"choice\"\n        [checked]=\"value === choice\"\n        >{{ translationPrefix + '.' + choice | translate }}</mat-radio-button\n        >\n      }\n    </mat-radio-group>\n  </form>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { header: [{
                 type: Input
             }], optionsEnum: [{
                 type: Input
@@ -2166,16 +2188,12 @@ const MAX_SIZE_BYTES = 2097152;
 class FileInputComponent {
     /**
      * Constructor
-     * @param formBuilder
      * @param appRef
      * @param cd
      * @param translateService
      * @param renderer
      */
-    constructor(formBuilder, appRef, cd, 
-    //private translateService: TranslateService,
-    renderer) {
-        this.formBuilder = formBuilder;
+    constructor(appRef, cd, renderer) {
         this.appRef = appRef;
         this.cd = cd;
         this.renderer = renderer;
@@ -2186,7 +2204,7 @@ class FileInputComponent {
         this.maxSizeBytes = MAX_SIZE_BYTES;
         this.resizePixels = 0;
         this.acceptedFileMimetypes = 'image/jpeg, image/jpg, image/png';
-        this.form = this.formBuilder.group({
+        this.form = new UntypedFormGroup({
             ImageIdent: new UntypedFormControl(''),
             ImageLink: new UntypedFormControl(''),
             Filename: new UntypedFormControl(''),
@@ -2219,7 +2237,6 @@ class FileInputComponent {
             const file = ev.target.files[0];
             if (file.size > this.maxSizeBytes) {
                 this.clearInputValue(ev);
-                //alert(this.translateService.instant('errors.fileTooBig'));
                 return;
             }
             else {
@@ -2333,8 +2350,8 @@ class FileInputComponent {
         const element = ev.target;
         element.value = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileInputComponent, selector: "kms-file-input", inputs: { label: "label", previewImage: "previewImage", allowRemove: "allowRemove", previewImageText: "previewImageText", maxSizeBytes: "maxSizeBytes", resizePixels: "resizePixels", acceptedFileMimetypes: "acceptedFileMimetypes" }, outputs: { formDataChanged: "formDataChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileInputComponent, deps: [{ token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileInputComponent, isStandalone: false, selector: "kms-file-input", inputs: { label: "label", previewImage: "previewImage", allowRemove: "allowRemove", previewImageText: "previewImageText", maxSizeBytes: "maxSizeBytes", resizePixels: "resizePixels", acceptedFileMimetypes: "acceptedFileMimetypes" }, outputs: { formDataChanged: "formDataChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FileInputComponent),
@@ -2345,11 +2362,11 @@ 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  <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\n            *ngIf=\"\n              form.value.ImageLink &&\n              form.value.ImageLink !== '' &&\n              !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\n            \"\n            [src]=\"form.value.ImageAsDataURL\"\n            [src]=\"form.value.ImageLink\"\n            style=\"height: 40px; width: fit-content\"\n          />\n          <img\n            *ngIf=\"\n              form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\n            \"\n            [src]=\"form.value.ImageAsDataURL\"\n            style=\"height: 40px; width: fit-content\"\n          />\n        </div>\n        <div class=\"\">{{ form.value.Filename }}</div>\n        <div class=\"\">\n          <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n            <kms-icon\n              icon=\"trash\"\n              [size]=\"IconSizePx.XS\"\n              iconClass=\"color-black\"\n            ></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\n    (click)=\"selectImageOverlay()\"\n    class=\"button-primary-font-color\"\n    mat-stroked-button\n  >\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\" formControlName=\"ImageIdent\" />\n  <input type=\"hidden\" formControlName=\"ImageLink\" />\n  <input type=\"hidden\" formControlName=\"Filename\" />\n  <input type=\"hidden\" formControlName=\"ImageAsDataURL\" />\n  <input type=\"hidden\" formControlName=\"Text\" />\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading = true\" class=\"fileInput\">\n  @if (form.value.Filename && previewImage) {\n    <div>\n      @if (newImageLoading) {\n        <div>\n          {{ 'file-input.loading' | translate }}\n        </div>\n      }\n      @if (!newImageLoading) {\n        <div>\n          <div class=\"\">\n            <div class=\"\">\n              @if (\n                form.value.ImageLink &&\n                form.value.ImageLink !== '' &&\n                !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\n                ) {\n                <img\n                  [src]=\"form.value.ImageAsDataURL\"\n                  [src]=\"form.value.ImageLink\"\n                  style=\"height: 40px; width: fit-content\"\n                  />\n              }\n              @if (\n                form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\n                ) {\n                <img\n                  [src]=\"form.value.ImageAsDataURL\"\n                  style=\"height: 40px; width: fit-content\"\n                  />\n              }\n            </div>\n            <div class=\"\">{{ form.value.Filename }}</div>\n            <div class=\"\">\n              @if (allowRemove) {\n                <div (click)=\"removeFromList()\">\n                  <kms-icon\n                    icon=\"trash\"\n                    [size]=\"IconSizePx.XS\"\n                    iconClass=\"color-black\"\n                  ></kms-icon>\n                  {{ 'file-input.remove' }}\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n  @if (!previewImage) {\n    <div>\n      <div class=\"\">{{ form.value.Filename }}</div>\n    </div>\n  }\n\n  <button\n    (click)=\"selectImageOverlay()\"\n    class=\"button-primary-font-color\"\n    mat-stroked-button\n    >\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\" formControlName=\"ImageIdent\" />\n  <input type=\"hidden\" formControlName=\"ImageLink\" />\n  <input type=\"hidden\" formControlName=\"Filename\" />\n  <input type=\"hidden\" formControlName=\"ImageAsDataURL\" />\n  <input type=\"hidden\" formControlName=\"Text\" />\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-file-input', providers: [
+            args: [{ standalone: false, selector: 'kms-file-input', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => FileInputComponent),
@@ -2360,8 +2377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => FileInputComponent),
                             multi: true,
                         },
-                    ], template: "<form [formGroup]=\"form\" (change)=\"newImageLoading = true\" class=\"fileInput\">\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\n            *ngIf=\"\n              form.value.ImageLink &&\n              form.value.ImageLink !== '' &&\n              !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\n            \"\n            [src]=\"form.value.ImageAsDataURL\"\n            [src]=\"form.value.ImageLink\"\n            style=\"height: 40px; width: fit-content\"\n          />\n          <img\n            *ngIf=\"\n              form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\n            \"\n            [src]=\"form.value.ImageAsDataURL\"\n            style=\"height: 40px; width: fit-content\"\n          />\n        </div>\n        <div class=\"\">{{ form.value.Filename }}</div>\n        <div class=\"\">\n          <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n            <kms-icon\n              icon=\"trash\"\n              [size]=\"IconSizePx.XS\"\n              iconClass=\"color-black\"\n            ></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\n    (click)=\"selectImageOverlay()\"\n    class=\"button-primary-font-color\"\n    mat-stroked-button\n  >\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\" formControlName=\"ImageIdent\" />\n  <input type=\"hidden\" formControlName=\"ImageLink\" />\n  <input type=\"hidden\" formControlName=\"Filename\" />\n  <input type=\"hidden\" formControlName=\"ImageAsDataURL\" />\n  <input type=\"hidden\" formControlName=\"Text\" />\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { fileInput: [{
+                    ], template: "<form [formGroup]=\"form\" (change)=\"newImageLoading = true\" class=\"fileInput\">\n  @if (form.value.Filename && previewImage) {\n    <div>\n      @if (newImageLoading) {\n        <div>\n          {{ 'file-input.loading' | translate }}\n        </div>\n      }\n      @if (!newImageLoading) {\n        <div>\n          <div class=\"\">\n            <div class=\"\">\n              @if (\n                form.value.ImageLink &&\n                form.value.ImageLink !== '' &&\n                !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\n                ) {\n                <img\n                  [src]=\"form.value.ImageAsDataURL\"\n                  [src]=\"form.value.ImageLink\"\n                  style=\"height: 40px; width: fit-content\"\n                  />\n              }\n              @if (\n                form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\n                ) {\n                <img\n                  [src]=\"form.value.ImageAsDataURL\"\n                  style=\"height: 40px; width: fit-content\"\n                  />\n              }\n            </div>\n            <div class=\"\">{{ form.value.Filename }}</div>\n            <div class=\"\">\n              @if (allowRemove) {\n                <div (click)=\"removeFromList()\">\n                  <kms-icon\n                    icon=\"trash\"\n                    [size]=\"IconSizePx.XS\"\n                    iconClass=\"color-black\"\n                  ></kms-icon>\n                  {{ 'file-input.remove' }}\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n  @if (!previewImage) {\n    <div>\n      <div class=\"\">{{ form.value.Filename }}</div>\n    </div>\n  }\n\n  <button\n    (click)=\"selectImageOverlay()\"\n    class=\"button-primary-font-color\"\n    mat-stroked-button\n    >\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\" formControlName=\"ImageIdent\" />\n  <input type=\"hidden\" formControlName=\"ImageLink\" />\n  <input type=\"hidden\" formControlName=\"Filename\" />\n  <input type=\"hidden\" formControlName=\"ImageAsDataURL\" />\n  <input type=\"hidden\" formControlName=\"Text\" />\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }], label: [{
@@ -2420,8 +2437,8 @@ class FlyoutComponent {
     setDropdownListHeight(contentHeight) {
         this.targetHeight = `${contentHeight}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FlyoutComponent, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\" [ngClass]=\"{ 'is-active': isDropdownOpened }\">\n  <div\n    class=\"flyout-header\"\n    (click)=\"toggleDropdownHeader()\"\n    [ngClass]=\"headerCssClass\"\n  >\n    <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n    <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n    <ng-content select=\"[header]\"></ng-content>\n\n    <div\n      *ngIf=\"hasButtonForMore\"\n      (click)=\"toggleDropdown()\"\n      class=\"flyout-header-more\"\n    >\n      <span *ngIf=\"!isDropdownOpened\">\n        {{ moreText }}\n        <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n      </span>\n      <span *ngIf=\"isDropdownOpened\">\n        {{ lessText }}\n        <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n      </span>\n    </div>\n  </div>\n  <div\n    class=\"flyout-body\"\n    [ngClass]=\"bodyCssClass\"\n    tabindex=\"0\"\n    [@dropdownAnimation]=\"{\n      value: isDropdownOpened,\n      params: { targetHeight: targetHeight, animationTime: '500' }\n    }\"\n    getMaxHeight=\"inner\"\n    (sumOfHeight)=\"setDropdownListHeight($event)\"\n    #flyoutHeader\n  >\n    <div class=\"inner\" #content *ngIf=\"isDropdownOpened || !hasButtonForMore\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FlyoutComponent, isStandalone: false, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\" [ngClass]=\"{ 'is-active': isDropdownOpened }\">\n  <div\n    class=\"flyout-header\"\n    (click)=\"toggleDropdownHeader()\"\n    [ngClass]=\"headerCssClass\"\n    >\n    <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n    <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n    <ng-content select=\"[header]\"></ng-content>\n\n    @if (hasButtonForMore) {\n      <div\n        (click)=\"toggleDropdown()\"\n        class=\"flyout-header-more\"\n        >\n        @if (!isDropdownOpened) {\n          <span>\n            {{ moreText }}\n            <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n          </span>\n        }\n        @if (isDropdownOpened) {\n          <span>\n            {{ lessText }}\n            <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n          </span>\n        }\n      </div>\n    }\n  </div>\n  <div\n    class=\"flyout-body\"\n    [ngClass]=\"bodyCssClass\"\n    tabindex=\"0\"\n    [@dropdownAnimation]=\"{\n      value: isDropdownOpened,\n      params: { targetHeight: targetHeight, animationTime: '500' }\n    }\"\n    getMaxHeight=\"inner\"\n    (sumOfHeight)=\"setDropdownListHeight($event)\"\n    #flyoutHeader\n    >\n    @if (isDropdownOpened || !hasButtonForMore) {\n      <div class=\"inner\" #content>\n        <ng-content></ng-content>\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
             trigger('dropdownAnimation', [
                 state('true', style({
                     height: '{{targetHeight}}',
@@ -2445,9 +2462,9 @@ class FlyoutComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FlyoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FlyoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-flyout', animations: [
+            args: [{ standalone: false, selector: 'kms-flyout', animations: [
                         trigger('dropdownAnimation', [
                             state('true', style({
                                 height: '{{targetHeight}}',
@@ -2469,7 +2486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 },
                             }),
                         ]),
-                    ], template: "<div class=\"flyout\" [ngClass]=\"{ 'is-active': isDropdownOpened }\">\n  <div\n    class=\"flyout-header\"\n    (click)=\"toggleDropdownHeader()\"\n    [ngClass]=\"headerCssClass\"\n  >\n    <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n    <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n    <ng-content select=\"[header]\"></ng-content>\n\n    <div\n      *ngIf=\"hasButtonForMore\"\n      (click)=\"toggleDropdown()\"\n      class=\"flyout-header-more\"\n    >\n      <span *ngIf=\"!isDropdownOpened\">\n        {{ moreText }}\n        <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n      </span>\n      <span *ngIf=\"isDropdownOpened\">\n        {{ lessText }}\n        <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n      </span>\n    </div>\n  </div>\n  <div\n    class=\"flyout-body\"\n    [ngClass]=\"bodyCssClass\"\n    tabindex=\"0\"\n    [@dropdownAnimation]=\"{\n      value: isDropdownOpened,\n      params: { targetHeight: targetHeight, animationTime: '500' }\n    }\"\n    getMaxHeight=\"inner\"\n    (sumOfHeight)=\"setDropdownListHeight($event)\"\n    #flyoutHeader\n  >\n    <div class=\"inner\" #content *ngIf=\"isDropdownOpened || !hasButtonForMore\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"flyout\" [ngClass]=\"{ 'is-active': isDropdownOpened }\">\n  <div\n    class=\"flyout-header\"\n    (click)=\"toggleDropdownHeader()\"\n    [ngClass]=\"headerCssClass\"\n    >\n    <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n    <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n    <ng-content select=\"[header]\"></ng-content>\n\n    @if (hasButtonForMore) {\n      <div\n        (click)=\"toggleDropdown()\"\n        class=\"flyout-header-more\"\n        >\n        @if (!isDropdownOpened) {\n          <span>\n            {{ moreText }}\n            <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n          </span>\n        }\n        @if (isDropdownOpened) {\n          <span>\n            {{ lessText }}\n            <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n          </span>\n        }\n      </div>\n    }\n  </div>\n  <div\n    class=\"flyout-body\"\n    [ngClass]=\"bodyCssClass\"\n    tabindex=\"0\"\n    [@dropdownAnimation]=\"{\n      value: isDropdownOpened,\n      params: { targetHeight: targetHeight, animationTime: '500' }\n    }\"\n    getMaxHeight=\"inner\"\n    (sumOfHeight)=\"setDropdownListHeight($event)\"\n    #flyoutHeader\n    >\n    @if (isDropdownOpened || !hasButtonForMore) {\n      <div class=\"inner\" #content>\n        <ng-content></ng-content>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { icon: [{
                 type: Input
             }], headerCssClass: [{
@@ -2558,12 +2575,12 @@ class ImageSliderComponent {
             this.updateSwipers();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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.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$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ImageSliderComponent, isStandalone: false, 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    @for (slide of slides; track slide) {\n      <swiper-slide>\n        <img [src]=\"slide\" loading=\"lazy\" />\n      </swiper-slide>\n    }\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    @for (slide of slides; track slide; let index = $index) {\n      <swiper-slide\n        [class.swiper-slide-default]=\"index === 0 && editMode\"\n        >\n        @if (editMode) {\n          <div>\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        }\n        <img [src]=\"slide\" loading=\"lazy\" />\n        @if (index === 0 && editMode) {\n          <div class=\"swiper-slide-default-text\">\n            {{ 'common.defaultImage' | translate }}\n          </div>\n        }\n      </swiper-slide>\n    }\n  </swiper-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$9.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: i2$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: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ImageSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-image-slider', 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" }]
+            args: [{ standalone: false, selector: 'kms-image-slider', template: "<div class=\"image-slider-container\">\n  <swiper-container\n    class=\"swiper-main-view-container\"\n    thumbs-swiper=\".swiper-carousel-container\"\n    >\n    @for (slide of slides; track slide) {\n      <swiper-slide>\n        <img [src]=\"slide\" loading=\"lazy\" />\n      </swiper-slide>\n    }\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    @for (slide of slides; track slide; let index = $index) {\n      <swiper-slide\n        [class.swiper-slide-default]=\"index === 0 && editMode\"\n        >\n        @if (editMode) {\n          <div>\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        }\n        <img [src]=\"slide\" loading=\"lazy\" />\n        @if (index === 0 && editMode) {\n          <div class=\"swiper-slide-default-text\">\n            {{ 'common.defaultImage' | translate }}\n          </div>\n        }\n      </swiper-slide>\n    }\n  </swiper-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { slides: [{
                 type: Input
             }], editMode: [{
@@ -2595,12 +2612,12 @@ class KMSAccordionItemComponent {
         this.panelOpenState = false;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KMSAccordionItemComponent, isStandalone: false, 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      @if (!panelOpenState) {\n        <kms-icon\n          icon=\"ic_plus\"\n          [color]=\"Color.PRIMARY\"\n          [size]=\"isSmall ? 16 : 22\"\n        ></kms-icon>\n      }\n      @if (panelOpenState) {\n        <kms-icon\n          icon=\"ic_minus\"\n          [color]=\"Color.PRIMARY\"\n          [size]=\"isSmall ? 16 : 22\"\n        ></kms-icon>\n      }\n    </div>\n  </mat-expansion-panel-header>\n  <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$2.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.14", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-accordion-item', 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" }]
+            args: [{ standalone: false, selector: 'kms-accordion-item', 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      @if (!panelOpenState) {\n        <kms-icon\n          icon=\"ic_plus\"\n          [color]=\"Color.PRIMARY\"\n          [size]=\"isSmall ? 16 : 22\"\n        ></kms-icon>\n      }\n      @if (panelOpenState) {\n        <kms-icon\n          icon=\"ic_minus\"\n          [color]=\"Color.PRIMARY\"\n          [size]=\"isSmall ? 16 : 22\"\n        ></kms-icon>\n      }\n    </div>\n  </mat-expansion-panel-header>\n  <ng-content></ng-content>\n</mat-expansion-panel>\n" }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { showAsCard: [{
                 type: Input
             }], isSmall: [{
@@ -2616,10 +2633,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class NumericInputComponent {
     constructor() {
-        this.disabled = model(false);
-        this.min = input(0);
-        this.numericValue = signal(0);
-        this.touched = signal(false);
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+        this.numericValue = signal(0, ...(ngDevMode ? [{ debugName: "numericValue" }] : []));
+        this.touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
         this.Color = Color;
         this.IconSizePx = IconSizePx;
         this.onChange = () => {
@@ -2667,8 +2684,8 @@ class NumericInputComponent {
     registerOnTouched(onTouched) {
         this.onTouched = onTouched;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: NumericInputComponent, selector: "kms-numeric-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NumericInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: NumericInputComponent, isStandalone: false, selector: "kms-numeric-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NumericInputComponent),
@@ -2676,16 +2693,16 @@ class NumericInputComponent {
             },
         ], ngImport: i0, template: "<div class=\"numeric-input\" [ngClass]=\"{ disabled: disabled() }\">\n  <kms-icon\n    id=\"numeric-input-minus\"\n    class=\"numeric-input__icon\"\n    aria-hidden=\"true\"\n    icon=\"ic_minus\"\n    [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n    [size]=\"10\"\n    (click)=\"minus()\"\n    (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && minus()\"\n  >\n  </kms-icon>\n  <strong>{{ numericValue() }}</strong>\n  <kms-icon\n    id=\"numeric-input-plus\"\n    class=\"numeric-input__icon\"\n    aria-hidden=\"true\"\n    icon=\"ic_plus\"\n    [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n    [size]=\"10\"\n    (click)=\"add()\"\n    (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && add()\"\n  >\n  </kms-icon>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumericInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NumericInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-numeric-input', providers: [
+            args: [{ standalone: false, selector: 'kms-numeric-input', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NumericInputComponent),
                             multi: true,
                         },
                     ], template: "<div class=\"numeric-input\" [ngClass]=\"{ disabled: disabled() }\">\n  <kms-icon\n    id=\"numeric-input-minus\"\n    class=\"numeric-input__icon\"\n    aria-hidden=\"true\"\n    icon=\"ic_minus\"\n    [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n    [size]=\"10\"\n    (click)=\"minus()\"\n    (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && minus()\"\n  >\n  </kms-icon>\n  <strong>{{ numericValue() }}</strong>\n  <kms-icon\n    id=\"numeric-input-plus\"\n    class=\"numeric-input__icon\"\n    aria-hidden=\"true\"\n    icon=\"ic_plus\"\n    [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n    [size]=\"10\"\n    (click)=\"add()\"\n    (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && add()\"\n  >\n  </kms-icon>\n</div>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }] } });
 
 /**
  * @copyright KMS GmbH
@@ -2694,37 +2711,37 @@ class PasswordComponent {
     constructor() {
         this.change = new EventEmitter();
         this.submit = new EventEmitter();
-        this.disabled = input(false);
-        this.label = input('Password');
-        this.withStrength = input(false);
-        this.lowerCaseCriteriaMsg = input('At least one lowercase letter');
-        this.upperCaseCriteriaMsg = input('At least one uppercase letter');
-        this.numberCriteriaMsg = input('At least one number');
-        this.specialCharCriteriaMsg = input('At least one special character (-.!.?,$,&,*,+,#,%)');
-        this.minCharsCriteriaMsg = input('At least 10 characters');
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.label = input('Password', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.withStrength = input(false, ...(ngDevMode ? [{ debugName: "withStrength" }] : []));
+        this.lowerCaseCriteriaMsg = input('At least one lowercase letter', ...(ngDevMode ? [{ debugName: "lowerCaseCriteriaMsg" }] : []));
+        this.upperCaseCriteriaMsg = input('At least one uppercase letter', ...(ngDevMode ? [{ debugName: "upperCaseCriteriaMsg" }] : []));
+        this.numberCriteriaMsg = input('At least one number', ...(ngDevMode ? [{ debugName: "numberCriteriaMsg" }] : []));
+        this.specialCharCriteriaMsg = input('At least one special character (-.!.?,$,&,*,+,#,%)', ...(ngDevMode ? [{ debugName: "specialCharCriteriaMsg" }] : []));
+        this.minCharsCriteriaMsg = input('At least 10 characters', ...(ngDevMode ? [{ debugName: "minCharsCriteriaMsg" }] : []));
         this.IconSizePx = IconSizePx;
-        this.value = signal('');
-        this.showPassword = signal(false);
-        this.eyeIconIsBeingPressed = signal(false);
+        this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : []));
+        this.eyeIconIsBeingPressed = signal(false, ...(ngDevMode ? [{ debugName: "eyeIconIsBeingPressed" }] : []));
         this.validateUppercase = computed(() => {
             const regex = /^(?=.*?[A-Z]).{1,}$/;
             return regex.test(this.value());
-        });
+        }, ...(ngDevMode ? [{ debugName: "validateUppercase" }] : []));
         this.validateLowercase = computed(() => {
             const regex = /^(?=.*?[a-z]).{1,}$/;
             return regex.test(this.value());
-        });
+        }, ...(ngDevMode ? [{ debugName: "validateLowercase" }] : []));
         this.validateSpecialChar = computed(() => {
             const regex = /^(?=.*?[-!?$&*+#%]).{1,}$/;
             return regex.test(this.value());
-        });
+        }, ...(ngDevMode ? [{ debugName: "validateSpecialChar" }] : []));
         this.validateNumber = computed(() => {
             const regex = /^(?=.*?[0-9]).{1,}$/;
             return regex.test(this.value());
-        });
+        }, ...(ngDevMode ? [{ debugName: "validateNumber" }] : []));
         this.validateMinimumChar = computed(() => {
             return this.value().length >= 10;
-        });
+        }, ...(ngDevMode ? [{ debugName: "validateMinimumChar" }] : []));
         this.validations = computed(() => {
             return [
                 {
@@ -2753,7 +2770,7 @@ class PasswordComponent {
                     error: 'minChars',
                 },
             ];
-        });
+        }, ...(ngDevMode ? [{ debugName: "validations" }] : []));
         this.onChange = () => { };
         this.onTouch = () => { };
     }
@@ -2789,8 +2806,8 @@ class PasswordComponent {
         }
         return isEmpty(result) ? null : result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PasswordComponent, selector: "kms-password", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, withStrength: { classPropertyName: "withStrength", publicName: "withStrength", isSignal: true, isRequired: false, transformFunction: null }, lowerCaseCriteriaMsg: { classPropertyName: "lowerCaseCriteriaMsg", publicName: "lowerCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, upperCaseCriteriaMsg: { classPropertyName: "upperCaseCriteriaMsg", publicName: "upperCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, numberCriteriaMsg: { classPropertyName: "numberCriteriaMsg", publicName: "numberCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, specialCharCriteriaMsg: { classPropertyName: "specialCharCriteriaMsg", publicName: "specialCharCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, minCharsCriteriaMsg: { classPropertyName: "minCharsCriteriaMsg", publicName: "minCharsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", submit: "submit" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PasswordComponent, isStandalone: false, selector: "kms-password", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, withStrength: { classPropertyName: "withStrength", publicName: "withStrength", isSignal: true, isRequired: false, transformFunction: null }, lowerCaseCriteriaMsg: { classPropertyName: "lowerCaseCriteriaMsg", publicName: "lowerCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, upperCaseCriteriaMsg: { classPropertyName: "upperCaseCriteriaMsg", publicName: "upperCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, numberCriteriaMsg: { classPropertyName: "numberCriteriaMsg", publicName: "numberCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, specialCharCriteriaMsg: { classPropertyName: "specialCharCriteriaMsg", publicName: "specialCharCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, minCharsCriteriaMsg: { classPropertyName: "minCharsCriteriaMsg", publicName: "minCharsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", submit: "submit" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PasswordComponent),
@@ -2801,11 +2818,11 @@ 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)\"\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$2.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$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$3.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)\"\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: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.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.14", ngImport: i0, type: PasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-password', providers: [
+            args: [{ standalone: false, selector: 'kms-password', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PasswordComponent),
@@ -2821,7 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], submit: [{
                 type: Output
-            }] } });
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], withStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "withStrength", required: false }] }], lowerCaseCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lowerCaseCriteriaMsg", required: false }] }], upperCaseCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "upperCaseCriteriaMsg", required: false }] }], numberCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberCriteriaMsg", required: false }] }], specialCharCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "specialCharCriteriaMsg", required: false }] }], minCharsCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharsCriteriaMsg", required: false }] }] } });
 
 class RadioGroupComponent {
     constructor() {
@@ -2850,18 +2867,18 @@ class RadioGroupComponent {
         this.onChange(value);
         this.onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RadioGroupComponent, selector: "kms-radiogroup", inputs: { options: "options", disabled: "disabled", value: "value", infoText: "infoText", color: "color", size: "size", direction: "direction" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RadioGroupComponent, isStandalone: false, selector: "kms-radiogroup", inputs: { options: "options", disabled: "disabled", value: "value", infoText: "infoText", color: "color", size: "size", direction: "direction" }, 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.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"] }] }); }
+        ], 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$6.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.14", ngImport: i0, type: RadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-radiogroup', providers: [
+            args: [{ standalone: false, selector: 'kms-radiogroup', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RadioGroupComponent),
@@ -2892,17 +2909,16 @@ var SalutationEnum;
 })(SalutationEnum || (SalutationEnum = {}));
 
 class SalutationDropdownComponent extends FormControlParentComponent {
-    constructor(formBuilder, renderer) {
-        super(formBuilder, renderer);
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
+        super(renderer);
         this.renderer = renderer;
         //For view
         this.SalutationEnum = SalutationEnum;
         this.Object = Object;
     }
     ngOnInit() {
-        this.form = this.formBuilder.group({
-            salut: [],
+        this.form = new UntypedFormGroup({
+            salut: new UntypedFormControl(''),
         });
         this.formInitialized = true;
         //somehow for dropowns we have to set value manually with timeout for default value
@@ -2914,25 +2930,25 @@ class SalutationDropdownComponent extends FormControlParentComponent {
         });
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SalutationDropdownComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SalutationDropdownComponent, selector: "kms-salutation-dropdown", inputs: { placeholder: "placeholder" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SalutationDropdownComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SalutationDropdownComponent, isStandalone: false, selector: "kms-salutation-dropdown", inputs: { placeholder: "placeholder" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SalutationDropdownComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n  <mat-form-field class=\"col\">\n    <mat-select\n      disableOptionCentering\n      formControlName=\"salut\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      #child\n    >\n      <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n          | translate\n      }}</mat-option>\n      <mat-option [value]=\"SalutationEnum.MALE\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n          | translate\n      }}</mat-option>\n      <mat-option [value]=\"SalutationEnum.FEMALE\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n          | translate\n      }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n  <mat-form-field class=\"col\">\n    <mat-select\n      disableOptionCentering\n      formControlName=\"salut\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      #child\n    >\n      <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n          | translate\n      }}</mat-option>\n      <mat-option [value]=\"SalutationEnum.MALE\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n          | translate\n      }}</mat-option>\n      <mat-option [value]=\"SalutationEnum.FEMALE\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n          | translate\n      }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-salutation-dropdown', providers: [
+            args: [{ standalone: false, selector: 'kms-salutation-dropdown', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SalutationDropdownComponent),
                             multi: true,
                         },
                     ], template: "<form [formGroup]=\"form\" class=\"row\">\n  <mat-form-field class=\"col\">\n    <mat-select\n      disableOptionCentering\n      formControlName=\"salut\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      #child\n    >\n      <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n          | translate\n      }}</mat-option>\n      <mat-option [value]=\"SalutationEnum.MALE\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n          | translate\n      }}</mat-option>\n      <mat-option [value]=\"SalutationEnum.FEMALE\">{{\n        'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n          | translate\n      }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { placeholder: [{
                 type: Input
             }] } });
 
@@ -2986,17 +3002,16 @@ class AttachedFileDTO {
  */
 
 class SalutationRadiogroupComponent extends FormControlParentComponent {
-    constructor(formBuilder, renderer) {
-        super(formBuilder, renderer);
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
+        super(renderer);
         this.renderer = renderer;
         //For view
         this.SalutationEnum = SalutationEnum;
         this.Object = Object;
     }
     ngOnInit() {
-        this.form = this.formBuilder.group({
-            salut: [isValue(this.value) ? this.value : '', null],
+        this.form = new UntypedFormGroup({
+            salut: new UntypedFormControl(isValue(this.value) ? this.value : ''),
         });
         this.formInitialized = true;
         this.form.valueChanges.subscribe((value) => {
@@ -3005,25 +3020,25 @@ class SalutationRadiogroupComponent extends FormControlParentComponent {
         });
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SalutationRadiogroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SalutationRadiogroupComponent, selector: "kms-salutation-radiogroup", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SalutationRadiogroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SalutationRadiogroupComponent, isStandalone: false, selector: "kms-salutation-radiogroup", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SalutationRadiogroupComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-radio-group formControlName=\"salut\" [disabled]=\"disabled\" #radioGroup>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.NOT_SPECIFIED\"\n      [checked]=\"value === SalutationEnum.NOT_SPECIFIED\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.MALE\"\n      [checked]=\"value === SalutationEnum.MALE\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.FEMALE\"\n      [checked]=\"value === SalutationEnum.FEMALE\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n  </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-radio-group formControlName=\"salut\" [disabled]=\"disabled\" #radioGroup>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.NOT_SPECIFIED\"\n      [checked]=\"value === SalutationEnum.NOT_SPECIFIED\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.MALE\"\n      [checked]=\"value === SalutationEnum.MALE\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.FEMALE\"\n      [checked]=\"value === SalutationEnum.FEMALE\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n  </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-salutation-radiogroup', providers: [
+            args: [{ standalone: false, selector: 'kms-salutation-radiogroup', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SalutationRadiogroupComponent),
                             multi: true,
                         },
                     ], template: "<form [formGroup]=\"form\">\n  <mat-radio-group formControlName=\"salut\" [disabled]=\"disabled\" #radioGroup>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.NOT_SPECIFIED\"\n      [checked]=\"value === SalutationEnum.NOT_SPECIFIED\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.MALE\"\n      [checked]=\"value === SalutationEnum.MALE\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n    <mat-radio-button\n      color=\"primary\"\n      [value]=\"SalutationEnum.FEMALE\"\n      [checked]=\"value === SalutationEnum.FEMALE\"\n    >\n      {{\n        'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n          | translate\n      }}\n    </mat-radio-button>\n  </mat-radio-group>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }] });
+        }], ctorParameters: () => [{ type: i0.Renderer2 }] });
 
 class TimeInputComponent {
     constructor() {
@@ -3032,11 +3047,11 @@ class TimeInputComponent {
         this.interval = 15;
         this.allowEmpty = false;
         this.IconSizePx = IconSizePx;
-        this._value = signal('');
-        this.options = signal([]);
+        this._value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.filteredOptions = computed(() => {
             return this.options().filter((option) => option.startsWith(this._value()));
-        });
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
         this.onChange = () => { };
         this.onTouch = () => { };
     }
@@ -3093,8 +3108,8 @@ class TimeInputComponent {
                 invalid: true,
             };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimeInputComponent, selector: "kms-time-input", inputs: { label: "label", value: "value", interval: "interval", allowEmpty: "allowEmpty" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TimeInputComponent, isStandalone: false, selector: "kms-time-input", inputs: { label: "label", value: "value", interval: "interval", allowEmpty: "allowEmpty" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TimeInputComponent),
@@ -3105,11 +3120,11 @@ class TimeInputComponent {
                 useExisting: TimeInputComponent,
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"kms-time-input\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    type=\"text\"\n    aria-label=\"time\"\n    matInput\n    kmsTime\n    [matAutocomplete]=\"auto\"\n    [value]=\"_value()\"\n    (input)=\"inputValueChanged($event)\"\n  />\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    (optionSelected)=\"valueChanged($event.option.value)\"\n    (closed)=\"autocompleteClosed()\"\n  >\n    <mat-option *ngFor=\"let option of filteredOptions()\" [value]=\"option\">\n      {{ option }}\n    </mat-option>\n  </mat-autocomplete>\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"clock\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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$2.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: TimeDirective, selector: "[kmsTime]" }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"kms-time-input\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    type=\"text\"\n    aria-label=\"time\"\n    matInput\n    kmsTime\n    [matAutocomplete]=\"auto\"\n    [value]=\"_value()\"\n    (input)=\"inputValueChanged($event)\"\n    />\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    (optionSelected)=\"valueChanged($event.option.value)\"\n    (closed)=\"autocompleteClosed()\"\n    >\n    @for (option of filteredOptions(); track option) {\n      <mat-option [value]=\"option\">\n        {{ option }}\n      </mat-option>\n    }\n  </mat-autocomplete>\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"clock\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: TimeDirective, selector: "[kmsTime]" }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TimeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-time-input', providers: [
+            args: [{ standalone: false, selector: 'kms-time-input', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TimeInputComponent),
@@ -3120,7 +3135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: TimeInputComponent,
                             multi: true,
                         },
-                    ], template: "<mat-form-field class=\"kms-time-input\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    type=\"text\"\n    aria-label=\"time\"\n    matInput\n    kmsTime\n    [matAutocomplete]=\"auto\"\n    [value]=\"_value()\"\n    (input)=\"inputValueChanged($event)\"\n  />\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    (optionSelected)=\"valueChanged($event.option.value)\"\n    (closed)=\"autocompleteClosed()\"\n  >\n    <mat-option *ngFor=\"let option of filteredOptions()\" [value]=\"option\">\n      {{ option }}\n    </mat-option>\n  </mat-autocomplete>\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"clock\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n</mat-form-field>\n" }]
+                    ], template: "<mat-form-field class=\"kms-time-input\">\n  <mat-label>{{ label }}</mat-label>\n  <input\n    type=\"text\"\n    aria-label=\"time\"\n    matInput\n    kmsTime\n    [matAutocomplete]=\"auto\"\n    [value]=\"_value()\"\n    (input)=\"inputValueChanged($event)\"\n    />\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    (optionSelected)=\"valueChanged($event.option.value)\"\n    (closed)=\"autocompleteClosed()\"\n    >\n    @for (option of filteredOptions(); track option) {\n      <mat-option [value]=\"option\">\n        {{ option }}\n      </mat-option>\n    }\n  </mat-autocomplete>\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"clock\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n</mat-form-field>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -3157,8 +3172,7 @@ class YesNoRadiogroupComponent {
             this.renderer.setProperty(this.child.nativeElement, 'disabled', isDisabled);
         }
     }
-    constructor(formBuilder, renderer) {
-        this.formBuilder = formBuilder;
+    constructor(renderer) {
         this.renderer = renderer;
         this.disabled = false;
         this.textYes = '';
@@ -3169,33 +3183,33 @@ class YesNoRadiogroupComponent {
         this.onTouch = () => { };
     }
     ngOnInit() {
-        this.form = this.formBuilder.group({
-            yesno: [],
+        this.form = new UntypedFormGroup({
+            yesno: new UntypedFormControl(this.value ?? null),
         });
         this.form.valueChanges.subscribe((value) => {
             this.internalValue = value.yesno;
             this.onChange(value.yesno);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: YesNoRadiogroupComponent, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: YesNoRadiogroupComponent, selector: "kms-yesno-radiogroup", inputs: { header: "header", disabled: "disabled", textYes: "textYes", textNo: "textNo" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YesNoRadiogroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: YesNoRadiogroupComponent, isStandalone: false, selector: "kms-yesno-radiogroup", inputs: { header: "header", disabled: "disabled", textYes: "textYes", textNo: "textNo" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YesNoRadiogroupComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"yesno\" [disabled]=\"disabled\" #child>\n    <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\">\n      {{ textYes }}</mat-radio-button\n    >\n    <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\">\n      {{ textNo }}</mat-radio-button\n    >\n  </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i2$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+        ], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"yesno\" [disabled]=\"disabled\" #child>\n    <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\">\n      {{ textYes }}</mat-radio-button\n    >\n    <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\">\n      {{ textNo }}</mat-radio-button\n    >\n  </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: YesNoRadiogroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: YesNoRadiogroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-yesno-radiogroup', providers: [
+            args: [{ standalone: false, selector: 'kms-yesno-radiogroup', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YesNoRadiogroupComponent),
                             multi: true,
                         },
                     ], template: "<form [formGroup]=\"form\">\n  <div>{{ header }}</div>\n  <mat-radio-group formControlName=\"yesno\" [disabled]=\"disabled\" #child>\n    <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\">\n      {{ textYes }}</mat-radio-button\n    >\n    <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\">\n      {{ textNo }}</mat-radio-button\n    >\n  </mat-radio-group>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.Renderer2 }], propDecorators: { header: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { header: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -3209,8 +3223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 class KmsUiPresentationalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalModule, declarations: [BackToTopComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalModule, declarations: [BackToTopComponent,
             CheckboxComponent,
             ColorInputComponent,
             DropdownFromDataComponent,
@@ -3286,7 +3300,7 @@ class KmsUiPresentationalModule {
             CardComponent,
             ButtonComponent,
             NumericInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalModule, providers: [ViewportService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalModule, providers: [ViewportService], imports: [CommonModule,
             DragDropModule,
             MatCheckboxModule,
             MatButtonModule,
@@ -3311,7 +3325,7 @@ class KmsUiPresentationalModule {
             MatListModule,
             MatCardModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3405,10 +3419,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class KmsUiPresentationalService {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KmsUiPresentationalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KmsUiPresentationalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'