@kms-ngx-ui/presentational 18.0.2 → 18.0.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, forwardRef, Input, Output, Pipe, NgModule, ViewChild, Directive, HostListener, VERSION, signal, computed, PLATFORM_ID, Injectable, Inject, input, HostBinding, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, Pipe, NgModule, ViewChild, Directive, HostListener, input, VERSION, signal, computed, PLATFORM_ID, Injectable, Inject, HostBinding, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { CommonModule, CurrencyPipe, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -31,7 +31,7 @@ import * as i3$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4$1 from '@angular/material/core';
 import moment from 'moment';
-import * as i6$1 from '@angular/material/autocomplete';
+import * as i7 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1$5 from '@angular-slider/ngx-slider';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
@@ -446,31 +446,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * @copyright KMS GmbH
  */
-var IconSize$1;
-(function (IconSize) {
-    IconSize["FULLSIZE"] = "size-full";
-    IconSize["TINY"] = "size-16";
-    IconSize["SMALLER"] = "size-20";
-    IconSize["SMALL"] = "size-32";
-    IconSize["MEDIUM"] = "size-64";
-    IconSize["LARGE"] = "size-128";
-    IconSize["XL"] = "size-256";
-    IconSize["XXL"] = "size-512";
-    IconSize["XXXL"] = "size-1024";
-    IconSize["NONE"] = "NONE";
-})(IconSize$1 || (IconSize$1 = {}));
 var IconSizePx;
 (function (IconSizePx) {
-    IconSizePx[IconSizePx["TINY"] = 16] = "TINY";
-    IconSizePx[IconSizePx["SMALLER"] = 20] = "SMALLER";
-    IconSizePx[IconSizePx["SMALL"] = 32] = "SMALL";
-    IconSizePx[IconSizePx["MEDIUM"] = 64] = "MEDIUM";
-    IconSizePx[IconSizePx["LARGE"] = 128] = "LARGE";
+    IconSizePx[IconSizePx["XXS"] = 16] = "XXS";
+    IconSizePx[IconSizePx["XS"] = 20] = "XS";
+    IconSizePx[IconSizePx["SM"] = 32] = "SM";
+    IconSizePx[IconSizePx["MD"] = 64] = "MD";
+    IconSizePx[IconSizePx["LG"] = 128] = "LG";
     IconSizePx[IconSizePx["XL"] = 256] = "XL";
     IconSizePx[IconSizePx["XXL"] = 512] = "XXL";
-    IconSizePx[IconSizePx["XXXL"] = 1024] = "XXXL";
 })(IconSizePx || (IconSizePx = {}));
-const IconSizesArr = [16, 20, 32, 64, 128, 256, 512, 1024];
+const IconSizesArr = [
+    IconSizePx.XXS,
+    IconSizePx.XS,
+    IconSizePx.SM,
+    IconSizePx.MD,
+    IconSizePx.LG,
+    IconSizePx.XL,
+    IconSizePx.XXL,
+];
 
 class SizeDirective {
     constructor(elementRef) {
@@ -606,6 +600,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['mouseout']
             }] } });
 
+var Color;
+(function (Color) {
+    Color["PRIMARY"] = "--kms-primary";
+    Color["SECONDARY"] = "--kms-secondary";
+    Color["TERTIARY"] = "--kms-tertiary";
+    Color["SUCCESS"] = "--kms-success";
+    Color["ALERT"] = "--kms-alert";
+    Color["ERROR"] = "--kms-error";
+    Color["DISABLED"] = "--kms-disabled";
+    Color["WHITE"] = "--kms-white";
+    Color["BLACK"] = "--kms-black";
+})(Color || (Color = {}));
+const ColorsArr = [
+    Color.PRIMARY,
+    Color.SECONDARY,
+    Color.TERTIARY,
+    Color.SUCCESS,
+    Color.ALERT,
+    Color.ERROR,
+    Color.DISABLED,
+    Color.WHITE,
+    Color.BLACK,
+];
+const ColorsLabelsArr = {
+    [Color.PRIMARY]: 'PRIMARY',
+    [Color.SECONDARY]: 'SECONDARY',
+    [Color.TERTIARY]: 'TERTIARY',
+    [Color.SUCCESS]: 'SUCCESS',
+    [Color.ALERT]: 'ALERT',
+    [Color.ERROR]: 'ERROR',
+    [Color.DISABLED]: 'DISABLED',
+    [Color.WHITE]: 'WHITE',
+    [Color.BLACK]: 'BLACK',
+};
+
 /**
  * @copyright KMS GmbH
  */
@@ -613,72 +642,47 @@ class IconComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
         /**
-         * Optional: Different size via CSS inline style.
-         * @deprecated. Please use size instead
+         * 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();
+        /**
+         * Optional: Different appearance via CSS class defined in this component´s style sheet.
          */
-        this.iconSize = IconSize$1.FULLSIZE;
-        this.dontUseSprite = false;
-        this.IconSize = IconSize$1;
+        this.iconClass = input('');
+        this.size = input(IconSizePx.XS);
+        this.dontUseSprite = input(false);
+        this.color = input(Color.BLACK);
         this.Version = VERSION.full;
-        this.timestamp = 0;
-    }
-    ngOnInit() {
-        const d = new Date();
-        const n = d.getTime();
-        this.timestamp = n;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconComponent, selector: "kms-icon", inputs: { icon: "icon", iconClass: "iconClass", iconStyle: "iconStyle", iconSize: "iconSize", size: "size", dontUseSprite: "dontUseSprite" }, ngImport: i0, template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n    [style.width.px]=\"size\"\n    [style.height.px]=\"size\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"'assets/sprite.svg?Version=' + Version + '#' + icon\"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: IconComponent, selector: "kms-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dontUseSprite: { classPropertyName: "dontUseSprite", publicName: "dontUseSprite", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === false\">\n  <span\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"{\n      color: 'var(' + color() + ')'\n    }\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon() + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"iconStyle()\"\n  ></object>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === false\">\n  <span\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n    [style.width.px]=\"size\"\n    [style.height.px]=\"size\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"'assets/sprite.svg?Version=' + Version + '#' + icon\"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon !== 'none' && dontUseSprite === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon {{ iconSize }}\"\n    [ngClass]=\"iconClass\"\n    [ngStyle]=\"iconStyle\"\n  ></object>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { icon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], iconStyle: [{
-                type: Input
-            }], iconSize: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], dontUseSprite: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'kms-icon', template: "<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === false\">\n  <span\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"{\n      color: 'var(' + color() + ')'\n    }\"\n    [style.width.px]=\"size()\"\n    [style.height.px]=\"size()\"\n  >\n    <svg>\n      <use\n        [attr.xlink:href]=\"\n          'assets/sprite.svg?Version=' + Version + '#' + icon()\n        \"\n      ></use>\n    </svg>\n  </span>\n</ng-container>\n<ng-container *ngIf=\"icon() !== 'none' && dontUseSprite() === true\">\n  <object\n    [data]=\"\n      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon() + '')\n    \"\n    type=\"image/svg+xml\"\n    class=\"icon\"\n    [ngClass]=\"iconClass()\"\n    [ngStyle]=\"iconStyle()\"\n  ></object>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }] });
 
 class TooltipIconComponent {
     constructor() {
-        this.tooltipText = '';
-        this.delay = 1000;
-        this.iconSize = IconSizePx.SMALLER;
-        this.iconClass = 'color-primary';
-        this.tooltipAlwaysVisible = false;
+        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.13", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: { tooltipText: "tooltipText", placement: "placement", delay: "delay", iconSize: "iconSize", iconClass: "iconClass", tooltipAlwaysVisible: "tooltipAlwaysVisible" }, 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    [iconClass]=\"iconClass\"\n    [kmsTooltip]=\"tooltipContent\"\n    [placement]=\"placement\"\n    [delay]=\"delay\"\n    [alwaysVisible]=\"tooltipAlwaysVisible\"\n  ></kms-icon>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["kmsTooltip", "placement", "delay", "alwaysVisible"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", 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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { 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.13", 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    [iconClass]=\"iconClass\"\n    [kmsTooltip]=\"tooltipContent\"\n    [placement]=\"placement\"\n    [delay]=\"delay\"\n    [alwaysVisible]=\"tooltipAlwaysVisible\"\n  ></kms-icon>\n" }]
+            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" }]
         }], propDecorators: { button: [{
                 type: ViewChild,
                 args: ['button']
             }], tooltip: [{
                 type: ViewChild,
                 args: ['tooltip']
-            }], tooltipText: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], iconSize: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], tooltipAlwaysVisible: [{
-                type: Input
             }] } });
 
 class ColorInputComponent extends FormControlParentComponent {
@@ -729,7 +733,7 @@ class ColorInputComponent extends FormControlParentComponent {
                 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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.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", "iconClass", "tooltipAlwaysVisible"] }] }); }
+        ], 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -898,7 +902,7 @@ class FileInputComponent {
             }
         }
         else {
-            console.warn("No file selected");
+            console.warn('No file selected');
         }
     }
     /**
@@ -929,7 +933,7 @@ class FileInputComponent {
             Filename: name ? name : '',
             ImageAsDataURL: content ? content : '',
             ImageLink: imageLink ? imageLink : '',
-            Text: text ? text : ''
+            Text: text ? text : '',
         };
     }
     /**
@@ -955,7 +959,7 @@ class FileInputComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     ngOnInit() { }
     ngOnDestroy() {
-        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions.forEach((s) => s.unsubscribe());
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -994,7 +998,7 @@ class FileInputComponent {
                 useExisting: forwardRef(() => FileInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading=true\" class=\"fileInput\"> \n\n    <div *ngIf=\"form.value.Filename && previewImage\">\n        <div *ngIf=\"newImageLoading\">\n            {{ 'file-input.loading' | translate }}\n        </div>\n        <div *ngIf=\"!newImageLoading\">\n            <div class=\"\">\n                <div class=\"\">\n                    <img *ngIf=\"form.value.ImageLink && form.value.ImageLink !== '' && !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\" [src]=\"form.value.ImageAsDataURL\" [src]=\"form.value.ImageLink\" style=\"height: 40px; width: fit-content;\" />\n                    <img *ngIf=\"form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\" [src]=\"form.value.ImageAsDataURL\" style=\"height: 40px; width: fit-content;\" />\n                </div>\n                <div class=\"\">{{form.value.Filename}}</div>\n                <div class=\"\">\n                    <div (click)=\"removeFromList()\" *ngIf=\"allowRemove\">\n                        <kms-icon icon=\"trash\" [size]=\"IconSizePx.TINY\" iconClass=\"color-black\"></kms-icon> \n                        {{ 'file-input.remove' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!previewImage\">\n        <div class=\"\">{{form.value.Filename}}</div>\n    </div>\n\n    <button (click)=\"selectImageOverlay()\" class=\"button-primary-font-color\" mat-stroked-button>\n        <span>{{ label }}</span>\n    </button>\n    <input\n        type=\"file\"\n        [accept]=\"acceptedFileMimetypes\"\n        style=\"display: none\"\n        #fileInput\n        (click)=\"clearInputValue($event)\"\n        (change)=\"selectImage($event)\"\n    />\n\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageIdent']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageLink']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Filename']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['ImageAsDataURL']\" />\n    <input type=\"hidden\" [formControl]=\"form.controls['Text']\" />\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
@@ -1142,7 +1146,7 @@ class FlyoutComponent {
         this.targetHeight = `${contentHeight}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
             trigger('dropdownAnimation', [
                 state('true', style({
                     height: '{{targetHeight}}',
@@ -1234,11 +1238,11 @@ class KMSAccordionItemComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KMSAccordionItemComponent, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n  class=\"kms-accordion\"\n  [ngClass]=\"{\n    'kms-accordion--flat': !showAsCard,\n    'kms-accordion--small': isSmall\n  }\"\n  (opened)=\"panelOpenState = true\"\n  (closed)=\"panelOpenState = false\"\n  [expanded]=\"expanded\"\n  hideToggle=\"true\"\n>\n  <mat-expansion-panel-header class=\"kms-accordion__header\">\n    <mat-panel-title class=\"mat-subheading-2 kms-accordion__title\">\n      <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n      <ng-content select=\"[itemTitleElement]\"></ng-content>\n    </mat-panel-title>\n    <div class=\"kms-accordion__header-icon-wrapper\">\n      <kms-icon\n        *ngIf=\"!panelOpenState\"\n        icon=\"ic_plus\"\n        iconClass=\"color-red\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n      <kms-icon\n        *ngIf=\"panelOpenState\"\n        icon=\"ic_minus\"\n        iconClass=\"color-red\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n    </div>\n  </mat-expansion-panel-header>\n  <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-accordion-item', template: "<mat-expansion-panel\n    class=\"accordion-item\"\n    [ngClass]=\"{showAsCard: showAsCard, showFlat: !showAsCard, isSmall: isSmall}\"\n    (opened)=\"panelOpenState = true\"\n    (closed)=\"panelOpenState = false\"\n    [expanded] = \"expanded\"\n    hideToggle=\"true\">\n    <mat-expansion-panel-header class=\"accordion-item-header\">\n        <mat-panel-title class=\"mat-subheading-2 accordion-item-title\">\n            <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n            <ng-content select=\"[itemTitleElement]\"></ng-content>\n        </mat-panel-title>\n        <div class=\"accordion-item-header-icon-wrapper\">\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"ic_plus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"ic_minus\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-desktop\"></kms-icon>\n\n            <kms-icon *ngIf=\"!panelOpenState\" icon=\"chevron-down\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n            <kms-icon *ngIf=\"panelOpenState\" icon=\"chevron-top\" iconClass=\"color-red\" class=\"accordion-item-header-icon-wrapper-mobile\"></kms-icon>\n        </div>\n    </mat-expansion-panel-header>\n    <ng-content></ng-content>\n</mat-expansion-panel>\n" }]
+            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        iconClass=\"color-red\"\n        [size]=\"isSmall ? 16 : 22\"\n      ></kms-icon>\n      <kms-icon\n        *ngIf=\"panelOpenState\"\n        icon=\"ic_minus\"\n        iconClass=\"color-red\"\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" }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { showAsCard: [{
                 type: Input
             }], isSmall: [{
@@ -1485,23 +1489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-/**
- * @copyright KMS GmbH
- */
-var IconSize;
-(function (IconSize) {
-    IconSize["FULLSIZE"] = "size-full";
-    IconSize["TINY"] = "size-16";
-    IconSize["SMALLER"] = "size-20";
-    IconSize["SMALL"] = "size-32";
-    IconSize["MEDIUM"] = "size-64";
-    IconSize["LARGE"] = "size-128";
-    IconSize["XL"] = "size-256";
-    IconSize["XXL"] = "size-512";
-    IconSize["XXXL"] = "size-1024";
-    IconSize["NONE"] = "NONE";
-})(IconSize || (IconSize = {}));
-
 class TimeDirective {
     constructor(el) {
         this.el = el;
@@ -1551,7 +1538,7 @@ class TimeInputComponent {
         this.label = '';
         this.value = '';
         this.interval = 15;
-        this.IconSize = IconSize;
+        this.IconSizePx = IconSizePx;
         this._value = signal('');
         this.options = signal([]);
         this.filteredOptions = computed(() => {
@@ -1619,7 +1606,7 @@ 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)=\"valueChanged($event.target.value)\"\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    [iconSize]=\"IconSize.TINY\"\n  ></kms-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.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.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: TimeDirective, selector: "[kmsTime]" }, { kind: "component", type: i6$1.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$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] }); }
+        ], 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)=\"valueChanged($event.target.value)\"\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$2.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.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "directive", type: TimeDirective, selector: "[kmsTime]" }, { kind: "component", type: i7.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: i7.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.13", ngImport: i0, type: TimeInputComponent, decorators: [{
             type: Component,
@@ -1634,7 +1621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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)=\"valueChanged($event.target.value)\"\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    [iconSize]=\"IconSize.TINY\"\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)=\"valueChanged($event.target.value)\"\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" }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -2306,6 +2293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class BackToTopComponent {
     constructor(platformId) {
         this.platformId = platformId;
+        this.IconSizePx = IconSizePx;
+        this.Color = Color;
     }
     onWindowScroll() {
         if (isPlatformBrowser(this.platformId)) {
@@ -2333,11 +2322,11 @@ class BackToTopComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: 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 icon=\"floating_button_clear\" iconClass=\"color-white\"></kms-icon>\n  </div>\n</div>\n" }]
+            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" }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -2664,7 +2653,7 @@ class ImageSliderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesToSave: "imagesToSave" }, outputs: { deleteImageEvent: "deleteImageEvent", orderChanged: "orderChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-slider-container\">\n  <swiper-container\n    class=\"swiper-main-view-container\"\n    thumbs-swiper=\".swiper-carousel-container\"\n  >\n    <swiper-slide *ngFor=\"let slide of slides\">\n      <img [src]=\"slide\" loading=\"lazy\" />\n    </swiper-slide>\n  </swiper-container>\n\n  <swiper-container\n    class=\"swiper-carousel-container\"\n    thumbsSlider=\"\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"onOrderChanged($event)\"\n  >\n    <swiper-slide\n      *ngFor=\"let slide of slides; let index = index\"\n      [class.swiper-slide-default]=\"index === 0 && editMode\"\n    >\n      <div *ngIf=\"editMode\">\n        <button cdkDrag class=\"drag-button\" mat-menu-item></button>\n        <button\n          class=\"delete-button\"\n          mat-menu-item\n          (click)=\"deleteImage(index)\"\n        >\n          <kms-icon icon=\"trash\" [size]=\"15\"></kms-icon>\n        </button>\n      </div>\n      <img [src]=\"slide\" loading=\"lazy\" />\n      <div class=\"swiper-slide-default-text\" *ngIf=\"index === 0 && editMode\">\n        {{ 'common.defaultImage' | translate }}\n      </div>\n    </swiper-slide>\n  </swiper-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageSliderComponent, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesToSave: "imagesToSave" }, outputs: { deleteImageEvent: "deleteImageEvent", orderChanged: "orderChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-slider-container\">\n  <swiper-container\n    class=\"swiper-main-view-container\"\n    thumbs-swiper=\".swiper-carousel-container\"\n  >\n    <swiper-slide *ngFor=\"let slide of slides\">\n      <img [src]=\"slide\" loading=\"lazy\" />\n    </swiper-slide>\n  </swiper-container>\n\n  <swiper-container\n    class=\"swiper-carousel-container\"\n    thumbsSlider=\"\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"onOrderChanged($event)\"\n  >\n    <swiper-slide\n      *ngFor=\"let slide of slides; let index = index\"\n      [class.swiper-slide-default]=\"index === 0 && editMode\"\n    >\n      <div *ngIf=\"editMode\">\n        <button cdkDrag class=\"drag-button\" mat-menu-item></button>\n        <button\n          class=\"delete-button\"\n          mat-menu-item\n          (click)=\"deleteImage(index)\"\n        >\n          <kms-icon icon=\"trash\" [size]=\"15\"></kms-icon>\n        </button>\n      </div>\n      <img [src]=\"slide\" loading=\"lazy\" />\n      <div class=\"swiper-slide-default-text\" *ngIf=\"index === 0 && editMode\">\n        {{ 'common.defaultImage' | translate }}\n      </div>\n    </swiper-slide>\n  </swiper-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageSliderComponent, decorators: [{
             type: Component,
@@ -2794,7 +2783,7 @@ class PasswordComponent {
                 useExisting: forwardRef(() => PasswordComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field class=\"kms-password__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [type]=\"showPassword() ? 'text' : 'password'\"\n    matInput\n    (input)=\"valueChanged($event.target.value)\"\n    [disabled]=\"disabled()\"\n    (keypress)=\"keypress($event)\"\n    #password=\"matInput\"\n  />\n  @if (showPassword()) {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye\"\n    [size]=\"IconSizePx.TINY\"\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.TINY\"\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.SMALLER\"\n            icon=\"ic_check\"\n            iconClass=\"color-success\"\n          ></kms-icon>\n          }@else {\n          <kms-icon\n            [size]=\"IconSizePx.SMALLER\"\n            icon=\"ic_abbrechen\"\n            iconClass=\"color-warn\"\n          ></kms-icon>\n          } {{ validation.text() }}\n        </div></mat-list-item\n      >\n      }\n    </mat-list>\n  </mat-card-content>\n</mat-card>\n}\n", dependencies: [{ kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: i4$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "iconStyle", "iconSize", "size", "dontUseSprite"] }] }); }
+        ], ngImport: i0, template: "<mat-form-field class=\"kms-password__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [type]=\"showPassword() ? 'text' : 'password'\"\n    matInput\n    (input)=\"valueChanged($event.target.value)\"\n    [disabled]=\"disabled()\"\n    (keypress)=\"keypress($event)\"\n    #password=\"matInput\"\n  />\n  @if (showPassword()) {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(false)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  } @else {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye_active\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(true)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  }\n</mat-form-field>\n\n@if ((eyeIconIsBeingPressed() || password.focused) && withStrength()) {\n<mat-card appearance=\"outlined\">\n  <mat-card-content class=\"kms-password__card\">\n    <mat-list role=\"list\">\n      @for (validation of validations(); track validation) {\n      <mat-list-item role=\"listitem\">\n        <div class=\"kms-password__strength-item\">\n          @if(validation.isValid()) {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_check\"\n            iconClass=\"color-success\"\n          ></kms-icon>\n          }@else {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_abbrechen\"\n            iconClass=\"color-warn\"\n          ></kms-icon>\n          } {{ validation.text() }}\n        </div></mat-list-item\n      >\n      }\n    </mat-list>\n  </mat-card-content>\n</mat-card>\n}\n", dependencies: [{ kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: SizeDirective, selector: "[size]", inputs: ["size"] }, { kind: "component", type: i4$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
@@ -2809,7 +2798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => PasswordComponent),
                             multi: true,
                         },
-                    ], template: "<mat-form-field class=\"kms-password__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [type]=\"showPassword() ? 'text' : 'password'\"\n    matInput\n    (input)=\"valueChanged($event.target.value)\"\n    [disabled]=\"disabled()\"\n    (keypress)=\"keypress($event)\"\n    #password=\"matInput\"\n  />\n  @if (showPassword()) {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye\"\n    [size]=\"IconSizePx.TINY\"\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.TINY\"\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.SMALLER\"\n            icon=\"ic_check\"\n            iconClass=\"color-success\"\n          ></kms-icon>\n          }@else {\n          <kms-icon\n            [size]=\"IconSizePx.SMALLER\"\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" }]
+                    ], template: "<mat-form-field class=\"kms-password__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [type]=\"showPassword() ? 'text' : 'password'\"\n    matInput\n    (input)=\"valueChanged($event.target.value)\"\n    [disabled]=\"disabled()\"\n    (keypress)=\"keypress($event)\"\n    #password=\"matInput\"\n  />\n  @if (showPassword()) {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(false)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  } @else {\n  <kms-icon\n    class=\"kms-time-input__suffix\"\n    matSuffix\n    icon=\"ic_eye_active\"\n    [size]=\"IconSizePx.XS\"\n    (click)=\"showPassword.set(true)\"\n    (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n    (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n  ></kms-icon>\n  }\n</mat-form-field>\n\n@if ((eyeIconIsBeingPressed() || password.focused) && withStrength()) {\n<mat-card appearance=\"outlined\">\n  <mat-card-content class=\"kms-password__card\">\n    <mat-list role=\"list\">\n      @for (validation of validations(); track validation) {\n      <mat-list-item role=\"listitem\">\n        <div class=\"kms-password__strength-item\">\n          @if(validation.isValid()) {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_check\"\n            iconClass=\"color-success\"\n          ></kms-icon>\n          }@else {\n          <kms-icon\n            [size]=\"IconSizePx.XS\"\n            icon=\"ic_abbrechen\"\n            iconClass=\"color-warn\"\n          ></kms-icon>\n          } {{ validation.text() }}\n        </div></mat-list-item\n      >\n      }\n    </mat-list>\n  </mat-card-content>\n</mat-card>\n}\n" }]
         }], propDecorators: { change: [{
                 type: Output
             }], submit: [{
@@ -3240,5 +3229,5 @@ var ButtonResponseType;
  * Generated bundle index. Do not edit.
  */
 
-export { BackToTopComponent, Breakpoint, ButtonResponseType, CardComponent, CheckboxComponent, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DirectivesModule, DropdownFromDataComponent, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GetMaxHeightDirective, IconComponent, IconSize, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, PasswordComponent, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SizeDirective, SlideToggleComponent, SliderComponent, SwipeDirective, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent };
+export { BackToTopComponent, Breakpoint, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ColorsArr, ColorsLabelsArr, ConfirmationDialogComponent, CustomPipesModule, DirectivesModule, DropdownFromDataComponent, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, PasswordComponent, RadioButtonComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SimpleBreakpoint, SizeDirective, SlideToggleComponent, SliderComponent, SwipeDirective, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map