@kms-ngx-ui/presentational 20.5.0 → 20.8.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, InjectionToken, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ChangeDetectorRef, ViewContainerRef, untracked, DestroyRef, ElementRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, InjectionToken, inject, input, VERSION, forwardRef, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ChangeDetectorRef, ViewContainerRef, untracked, DestroyRef, ElementRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -8,7 +8,7 @@ import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i3$1 from '@angular/material/slide-toggle';
+import * as i3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$6 from '@angular-slider/ngx-slider';
@@ -22,27 +22,27 @@ import * as i5$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/material/card';
+import * as i4$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i4 from '@angular/material/datepicker';
+import * as i4$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$7 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3$3 from '@angular/material/expansion';
+import * as i3$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$2 from '@angular/material/input';
+import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$4 from '@angular/material/list';
+import * as i3$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i2$3 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
+import * as i4 from '@angular/material/select';
+import { MAT_SELECT_CONFIG, MatSelectModule } from '@angular/material/select';
 import * as i5 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -1356,12 +1356,25 @@ const IconSizesArr = [
     IconSizePx.XXL,
 ];
 
+/**
+ * Base URL used by `kms-icon` to resolve the SVG sprite sheet referenced
+ * by `<use xlink:href>`. Override this when the consuming app is loaded
+ * from a different origin than the host page (e.g. an Angular Element
+ * widget embedded in a third-party site), so the browser resolves the
+ * sprite against the bundle's location instead of the host page.
+ */
+const KMS_SPRITE_URL = new InjectionToken('KMS_SPRITE_URL', {
+    providedIn: 'root',
+    factory: () => 'assets/sprite.svg',
+});
+
 /**
  * @copyright KMS GmbH
  */
 class IconComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
+        this.spriteUrl = inject(KMS_SPRITE_URL);
         /**
          * Required: Name of the SVG icon inside your sprite sheet file with name 'icons.svg'.
          * Pass 'none' if no icon should be rendered.
@@ -1377,11 +1390,11 @@ class IconComponent {
         this.Version = VERSION.full;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", type: IconComponent, isStandalone: true, 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: #767676;--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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, 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          spriteUrl + '?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: #767676;--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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kms-icon', standalone: true, imports: [NgClass, NgStyle], 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: #767676;--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"] }]
+            args: [{ selector: 'kms-icon', standalone: true, imports: [NgClass, NgStyle], 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          spriteUrl + '?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: #767676;--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 }] }] } });
 
 /**
@@ -1445,7 +1458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class CheckboxComponent {
     constructor() {
         this.infoText = '';
-        this.disabled = false;
+        this._disabled = false;
         /**
          * Internal description name. All checkboxes with the same name belong to the same group.
          * User can select none, one or all checkboxes with the same name.
@@ -1462,6 +1475,13 @@ class CheckboxComponent {
     get checked() {
         return this.innerControl.value ?? false;
     }
+    set disabled(value) {
+        this._disabled = value;
+        this.setDisabledState(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
     valueChanged(value) {
         this.onChange(value);
         this.innerControl.setValue(value, { emitEvent: false });
@@ -1862,7 +1882,8 @@ class DropdownFromDataComponent extends FormControlParentComponent {
                 useExisting: forwardRef(() => DropdownFromDataComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"isRequired()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n    subscriptSizing=\"dynamic\"\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      [multiple]=\"multiple()\"\n      [required]=\"isRequired()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !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      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i5.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+            { provide: MAT_SELECT_CONFIG, useValue: { panelWidth: 'auto' } },
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"isRequired()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n    subscriptSizing=\"dynamic\"\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      [multiple]=\"multiple()\"\n      [required]=\"isRequired()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !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      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
             type: Component,
@@ -1872,6 +1893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DropdownFromDataComponent),
                             multi: true,
                         },
+                        { provide: MAT_SELECT_CONFIG, useValue: { panelWidth: 'auto' } },
                     ], standalone: false, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"isRequired()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n    subscriptSizing=\"dynamic\"\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      [multiple]=\"multiple()\"\n      [required]=\"isRequired()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !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      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\n  </mat-form-field>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsEnum", required: false }] }], optionsPlainArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsPlainArray", required: false }] }], optionsObjArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsObjArray", required: false }] }], mapKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapKey", required: false }] }], mapValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapValue", required: false }] }], hasNullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNullOption", required: false }] }], preselectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedKeys", required: false }] }], translation: [{ type: i0.Input, args: [{ isSignal: true, alias: "translation", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], useEnumIndexAsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "useEnumIndexAsValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], disableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOptions", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
 
@@ -2122,7 +2144,7 @@ class SlideToggleComponent {
                 useExisting: forwardRef(() => SlideToggleComponent),
                 multi: true,
             },
-        ], 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: i2$1.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"] }] }); }
+        ], 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: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.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: "20.3.16", ngImport: i0, type: SlideToggleComponent, decorators: [{
             type: Component,
@@ -2269,6 +2291,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             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 ButtonToggleGroupComponent {
+    constructor() {
+        this.options = [];
+        this.disabled = false;
+        this.rounded = false;
+        this.value = null;
+        this.ButtonAppearance = ButtonAppearance;
+        this.StylingTheme = StylingTheme;
+        this.onChange = (value) => {
+            this.value = value;
+        };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    select(option) {
+        if (this.disabled || option.Disabled)
+            return;
+        this.value = option.Value;
+        this.onChange(option.Value);
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonToggleGroupComponent, isStandalone: false, selector: "kms-button-toggle-group", inputs: { options: "options", disabled: "disabled", rounded: "rounded", value: "value" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ButtonToggleGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"kms-button-toggle-group\"\n  [class.kms-button-toggle-group--disabled]=\"disabled\"\n  [class.kms-button-toggle-group--rounded]=\"rounded\"\n>\n  @for (option of options; track option.Value) {\n    <kms-button\n      class=\"kms-button-toggle-group__item\"\n      [class.kms-button-toggle-group__item--active]=\"value === option.Value\"\n      [appearance]=\"ButtonAppearance.BASIC\"\n      [color]=\"StylingTheme.SECONDARY\"\n      [label]=\"option.Text\"\n      [icon]=\"option.Icon\"\n      [disabled]=\"disabled || option.Disabled\"\n      (buttonClick)=\"select(option)\"\n    ></kms-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "kms-button", inputs: ["color", "type", "appearance", "loading", "label", "icon", "disabled", "rounded"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonToggleGroupComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'kms-button-toggle-group', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ButtonToggleGroupComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"kms-button-toggle-group\"\n  [class.kms-button-toggle-group--disabled]=\"disabled\"\n  [class.kms-button-toggle-group--rounded]=\"rounded\"\n>\n  @for (option of options; track option.Value) {\n    <kms-button\n      class=\"kms-button-toggle-group__item\"\n      [class.kms-button-toggle-group__item--active]=\"value === option.Value\"\n      [appearance]=\"ButtonAppearance.BASIC\"\n      [color]=\"StylingTheme.SECONDARY\"\n      [label]=\"option.Text\"\n      [icon]=\"option.Icon\"\n      [disabled]=\"disabled || option.Disabled\"\n      (buttonClick)=\"select(option)\"\n    ></kms-button>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
 class TooltipIconComponent {
     constructor() {
         this.tooltipText = input('', ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
@@ -2339,7 +2418,7 @@ class ColorInputComponent extends FormControlParentComponent {
                 useExisting: forwardRef(() => ColorInputComponent),
                 multi: true,
             },
-        ], 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$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", "icon"] }] }); }
+        ], 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.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", "icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -2524,7 +2603,7 @@ class DateInputComponent {
                 useExisting: forwardRef(() => DateInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (mode() === 'date') {\n<mat-form-field class=\"kms-date-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [id]=\"inputId\"\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"innerControl\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (dateChange)=\"onDateChanged($event.value)\"\n    (blur)=\"onTouched()\"\n    (click)=\"picker.open()\"\n    (keyup)=\"\n      ($event.key === 'Enter' || $event.key === 'Space') && picker.open()\n    \"\n  />\n  <mat-datepicker\n    #picker\n    [startView]=\"computedStartView()\"\n    (monthSelected)=\"onMonthSelected($event, picker)\"\n  ></mat-datepicker>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n    <kms-icon\n      class=\"kms-date-input__icon\"\n      icon=\"calendar\"\n      [color]=\"Color.SECONDARY\"\n      [size]=\"IconSizePx.XS\"\n      matDatepickerToggleIcon\n    ></kms-icon>\n  </mat-datepicker-toggle>\n  @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n} @if (mode() === 'range') {\n<mat-form-field class=\"kms-date-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"rangePicker\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"\n    (click)=\"rangePicker.open()\"\n    (keyup)=\"\n      ($event.key === 'Enter' || $event.key === 'Space') && rangePicker.open()\n    \"\n  >\n    <input\n      matStartDate\n      [formControl]=\"rangeGroup.controls.start\"\n      [placeholder]=\"placeholder() || startDateAriaLabel()\"\n      [attr.aria-label]=\"startDateAriaLabel()\"\n      [required]=\"required()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"\n        (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n      \"\n      (dateChange)=\"onRangeChanged()\"\n      (blur)=\"onTouched()\"\n    />\n    <input\n      matEndDate\n      [formControl]=\"rangeGroup.controls.end\"\n      [placeholder]=\"endDateAriaLabel()\"\n      [attr.aria-label]=\"endDateAriaLabel()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"\n        (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n      \"\n      (dateChange)=\"onRangeChanged()\"\n      (blur)=\"onTouched()\"\n    />\n  </mat-date-range-input>\n  <mat-date-range-picker #rangePicker></mat-date-range-picker>\n  <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n    <kms-icon\n      class=\"kms-date-input__icon\"\n      icon=\"calendar\"\n      [color]=\"Color.SECONDARY\"\n      [size]=\"IconSizePx.XS\"\n      matDatepickerToggleIcon\n    ></kms-icon>\n  </mat-datepicker-toggle>\n  @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i4.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (mode() === 'date') {\n<mat-form-field class=\"kms-date-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <input\n    [id]=\"inputId\"\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"innerControl\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (dateChange)=\"onDateChanged($event.value)\"\n    (blur)=\"onTouched()\"\n    (click)=\"picker.open()\"\n    (keyup)=\"\n      ($event.key === 'Enter' || $event.key === 'Space') && picker.open()\n    \"\n  />\n  <mat-datepicker\n    #picker\n    [startView]=\"computedStartView()\"\n    (monthSelected)=\"onMonthSelected($event, picker)\"\n  ></mat-datepicker>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n    <kms-icon\n      class=\"kms-date-input__icon\"\n      icon=\"calendar\"\n      [color]=\"Color.SECONDARY\"\n      [size]=\"IconSizePx.XS\"\n      matDatepickerToggleIcon\n    ></kms-icon>\n  </mat-datepicker-toggle>\n  @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n} @if (mode() === 'range') {\n<mat-form-field class=\"kms-date-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"rangePicker\"\n    [min]=\"minDate()\"\n    [max]=\"maxDate()\"\n    (click)=\"rangePicker.open()\"\n    (keyup)=\"\n      ($event.key === 'Enter' || $event.key === 'Space') && rangePicker.open()\n    \"\n  >\n    <input\n      matStartDate\n      [formControl]=\"rangeGroup.controls.start\"\n      [placeholder]=\"placeholder() || startDateAriaLabel()\"\n      [attr.aria-label]=\"startDateAriaLabel()\"\n      [required]=\"required()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"\n        (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n      \"\n      (dateChange)=\"onRangeChanged()\"\n      (blur)=\"onTouched()\"\n    />\n    <input\n      matEndDate\n      [formControl]=\"rangeGroup.controls.end\"\n      [placeholder]=\"endDateAriaLabel()\"\n      [attr.aria-label]=\"endDateAriaLabel()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"\n        (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n      \"\n      (dateChange)=\"onRangeChanged()\"\n      (blur)=\"onTouched()\"\n    />\n  </mat-date-range-input>\n  <mat-date-range-picker #rangePicker></mat-date-range-picker>\n  <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n    <kms-icon\n      class=\"kms-date-input__icon\"\n      icon=\"calendar\"\n      [color]=\"Color.SECONDARY\"\n      [size]=\"IconSizePx.XS\"\n      matDatepickerToggleIcon\n    ></kms-icon>\n  </mat-datepicker-toggle>\n  @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i4$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i4$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -3210,7 +3289,7 @@ class KMSAccordionItemComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", 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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: "20.3.16", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
             type: Component,
@@ -3416,7 +3495,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)\"\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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$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$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4$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"] }] }); }
+        ], 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
@@ -3499,57 +3578,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-var SalutationEnum;
-(function (SalutationEnum) {
-    SalutationEnum["NOT_SPECIFIED"] = "Keine Anrede";
-    SalutationEnum["MALE"] = "Herr";
-    SalutationEnum["FEMALE"] = "Frau";
-})(SalutationEnum || (SalutationEnum = {}));
-
-class SalutationDropdownComponent extends FormControlParentComponent {
-    constructor(renderer) {
-        super(renderer);
-        this.renderer = renderer;
-        //For view
-        this.SalutationEnum = SalutationEnum;
-        this.Object = Object;
-    }
-    ngOnInit() {
-        this.form = new UntypedFormGroup({
-            salut: new UntypedFormControl(''),
-        });
-        this.formInitialized = true;
-        //somehow for dropowns we have to set value manually with timeout for default value
-        setTimeout(() => {
-            this.form.controls['salut'].setValue(this.value ? this.value : '');
-        }, 1000);
-        this.form.valueChanges.subscribe((value) => {
-            this.onChange(value.salut);
-        });
-        super.ngOnInit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationDropdownComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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: 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: i2$1.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: i1$8.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
-            type: Component,
-            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: i0.Renderer2 }], propDecorators: { placeholder: [{
-                type: Input
-            }] } });
-
 /**
  * General Image Model
  */
@@ -3599,6 +3627,13 @@ class AttachedFileDTO {
  * @copyright KMS GmbH
  */
 
+var SalutationEnum;
+(function (SalutationEnum) {
+    SalutationEnum["NOT_SPECIFIED"] = "Keine Anrede";
+    SalutationEnum["MALE"] = "Herr";
+    SalutationEnum["FEMALE"] = "Frau";
+})(SalutationEnum || (SalutationEnum = {}));
+
 class SalutationRadiogroupComponent extends FormControlParentComponent {
     constructor(renderer) {
         super(renderer);
@@ -3712,7 +3747,7 @@ class TextInputComponent {
                 useExisting: forwardRef(() => TextInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field class=\"kms-text-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (prefixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__prefix\"\n    matIconPrefix\n    [icon]=\"prefixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (prefix()) {\n  <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n  }\n  <input\n    [id]=\"inputId\"\n    [type]=\"type()\"\n    matInput\n    [formControl]=\"innerControl\"\n    (input)=\"valueChanged($event)\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [attr.inputmode]=\"numericOnly() ? 'numeric' : null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (blur)=\"onTouched()\"\n  />\n  @if (suffixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__suffix\"\n    matIconSuffix\n    [icon]=\"suffixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (suffix()) {\n  <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n  } @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$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: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<mat-form-field class=\"kms-text-input__form-field\">\n  <mat-label>{{ label() }}</mat-label>\n  @if (prefixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__prefix\"\n    matIconPrefix\n    [icon]=\"prefixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (prefix()) {\n  <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n  }\n  <input\n    [id]=\"inputId\"\n    [type]=\"type()\"\n    matInput\n    [formControl]=\"innerControl\"\n    (input)=\"valueChanged($event)\"\n    [placeholder]=\"placeholder()\"\n    [required]=\"required()\"\n    [attr.inputmode]=\"numericOnly() ? 'numeric' : null\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [errorStateMatcher]=\"errorStateMatcher\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorMessage() ? true : null\"\n    [attr.aria-describedby]=\"\n      (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n    \"\n    (blur)=\"onTouched()\"\n  />\n  @if (suffixIcon()) {\n  <kms-icon\n    class=\"kms-text-input__suffix\"\n    matIconSuffix\n    [icon]=\"suffixIcon()\"\n    [size]=\"IconSizePx.XS\"\n  ></kms-icon>\n  } @else if (suffix()) {\n  <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n  } @if (hint()) {\n  <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n  }\n  <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -3805,7 +3840,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)=\"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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$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$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: i5$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", "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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: TimeDirective, selector: "[kmsTime]" }, { kind: "component", type: i5$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: i5$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", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeInputComponent, decorators: [{
             type: Component,
@@ -4756,7 +4791,7 @@ class FormFieldComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldComponent, isStandalone: false, selector: "kms-form-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, formErrorDisplay: { classPropertyName: "formErrorDisplay", publicName: "formErrorDisplay", isSignal: true, isRequired: false, transformFunction: null }, formDisabledConfig: { classPropertyName: "formDisabledConfig", publicName: "formDisabledConfig", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kms-form-field\"\n     [attr.data-field-key]=\"fieldConfig().key\"\n     [attr.data-test-id]=\"fieldConfig().testId\"\n     [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n     [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n  @if (fieldConfig().type === FieldType.OFFSET) {\n    <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n  } @else if (isNativeType()) {\n    <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        @if (isTextInputType() || isNumberInputType()) {\n          <!-- TEXT / NUMBER \u2014 delegates to kms-text-input CVA -->\n          <kms-text-input\n            [formControl]=\"control()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [numericOnly]=\"isNumberInputType()\"\n            [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n            [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n            [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n            [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n            [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-text-input>\n        } @else if (isDateType()) {\n          <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n          <kms-date-input\n            [formControl]=\"control()\"\n            [mode]=\"dateMode()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [minDate]=\"dateMin()\"\n            [maxDate]=\"dateMax()\"\n            [monthPicker]=\"isMonthPicker()\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-date-input>\n        } @else {\n          <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n          <mat-form-field class=\"kms-form-field__mat-field\">\n            @if (fieldConfig().label) {\n              <mat-label>{{ fieldConfig().label }}</mat-label>\n            }\n\n            @switch (fieldConfig().type) {\n              @case (FieldType.TEXTAREA) {\n                <textarea matInput\n                          [formControl]=\"control()\"\n                          [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                          [rows]=\"textareaRows()\"\n                          [attr.autocomplete]=\"resolvedAutocomplete()\"\n                          [attr.aria-required]=\"isRequired() ? true : null\"\n                          [attr.aria-describedby]=\"ariaDescribedBy()\"\n                          [errorStateMatcher]=\"errorMatcher()\">\n                </textarea>\n              }\n              @case (FieldType.AUTOCOMPLETE) {\n                <input matInput\n                       [formControl]=\"control()\"\n                       [matAutocomplete]=\"autoPanel\"\n                       [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                       [attr.autocomplete]=\"resolvedAutocomplete()\"\n                       [attr.aria-required]=\"isRequired() ? true : null\"\n                       [attr.aria-describedby]=\"ariaDescribedBy()\"\n                       [errorStateMatcher]=\"errorMatcher()\">\n                <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n                  @for (opt of filteredAutoOptions(); track opt.Value) {\n                    <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n                  }\n                </mat-autocomplete>\n              }\n            }\n\n            <!-- Prefix -->\n            @if (fieldConfig().prefix) {\n              @if (fieldConfig().prefix!.type === 'text') {\n                <span matTextPrefix>{{ fieldConfig().prefix!.value }}&nbsp;</span>\n              } @else {\n                <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Suffix -->\n            @if (fieldConfig().suffix) {\n              @if (fieldConfig().suffix!.type === 'text') {\n                <span matTextSuffix>&nbsp;{{ fieldConfig().suffix!.value }}</span>\n              } @else {\n                <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Errors -->\n            @for (msg of errorMessages(); track msg) {\n              <mat-error>{{ msg }}</mat-error>\n            }\n          </mat-form-field>\n        }\n      </div>\n\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n  } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n    <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n        </ng-container>\n      </div>\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  } @else {\n    <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n    @if (isGroupType()) {\n      <div class=\"kms-form-field__label-row\">\n        <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n        @if (fieldConfig().tooltip) {\n          <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n        }\n      </div>\n    }\n\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container kmsDynamicField\n                      [fieldConfig]=\"fieldConfig()\"\n                      [control]=\"control()\"\n                      (fieldTouched)=\"onFieldTouched()\">\n        </ng-container>\n      </div>\n\n      @if (!isGroupType() && fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$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: "component", type: i5$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: i5$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", "size", "dontUseSprite", "color"] }, { kind: "component", type: DateInputComponent, selector: "kms-date-input", inputs: ["mode", "disabled", "label", "placeholder", "required", "hint", "errorMessage", "minDate", "maxDate", "monthPicker", "startView"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[kmsDynamicField]", inputs: ["fieldConfig", "control"], outputs: ["fieldTouched"] }, { kind: "component", type: TextInputComponent, selector: "kms-text-input", inputs: ["disabled", "label", "placeholder", "type", "required", "hint", "errorMessage", "autocomplete", "prefix", "suffix", "numericOnly", "prefixIcon", "suffixIcon"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldComponent, isStandalone: false, selector: "kms-form-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, formErrorDisplay: { classPropertyName: "formErrorDisplay", publicName: "formErrorDisplay", isSignal: true, isRequired: false, transformFunction: null }, formDisabledConfig: { classPropertyName: "formDisabledConfig", publicName: "formDisabledConfig", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kms-form-field\"\n     [attr.data-field-key]=\"fieldConfig().key\"\n     [attr.data-test-id]=\"fieldConfig().testId\"\n     [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n     [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n  @if (fieldConfig().type === FieldType.OFFSET) {\n    <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n  } @else if (isNativeType()) {\n    <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        @if (isTextInputType() || isNumberInputType()) {\n          <!-- TEXT / NUMBER \u2014 delegates to kms-text-input CVA -->\n          <kms-text-input\n            [formControl]=\"control()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [numericOnly]=\"isNumberInputType()\"\n            [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n            [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n            [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n            [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n            [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-text-input>\n        } @else if (isDateType()) {\n          <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n          <kms-date-input\n            [formControl]=\"control()\"\n            [mode]=\"dateMode()\"\n            [label]=\"fieldConfig().label ?? ''\"\n            [placeholder]=\"fieldConfig().placeholder ?? ''\"\n            [required]=\"isRequired()\"\n            [minDate]=\"dateMin()\"\n            [maxDate]=\"dateMax()\"\n            [monthPicker]=\"isMonthPicker()\"\n            [errorMessage]=\"displayErrorMessage()\">\n          </kms-date-input>\n        } @else {\n          <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n          <mat-form-field class=\"kms-form-field__mat-field\">\n            @if (fieldConfig().label) {\n              <mat-label>{{ fieldConfig().label }}</mat-label>\n            }\n\n            @switch (fieldConfig().type) {\n              @case (FieldType.TEXTAREA) {\n                <textarea matInput\n                          [formControl]=\"control()\"\n                          [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                          [rows]=\"textareaRows()\"\n                          [attr.autocomplete]=\"resolvedAutocomplete()\"\n                          [attr.aria-required]=\"isRequired() ? true : null\"\n                          [attr.aria-describedby]=\"ariaDescribedBy()\"\n                          [errorStateMatcher]=\"errorMatcher()\">\n                </textarea>\n              }\n              @case (FieldType.AUTOCOMPLETE) {\n                <input matInput\n                       [formControl]=\"control()\"\n                       [matAutocomplete]=\"autoPanel\"\n                       [placeholder]=\"fieldConfig().placeholder ?? ''\"\n                       [attr.autocomplete]=\"resolvedAutocomplete()\"\n                       [attr.aria-required]=\"isRequired() ? true : null\"\n                       [attr.aria-describedby]=\"ariaDescribedBy()\"\n                       [errorStateMatcher]=\"errorMatcher()\">\n                <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n                  @for (opt of filteredAutoOptions(); track opt.Value) {\n                    <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n                  }\n                </mat-autocomplete>\n              }\n            }\n\n            <!-- Prefix -->\n            @if (fieldConfig().prefix) {\n              @if (fieldConfig().prefix!.type === 'text') {\n                <span matTextPrefix>{{ fieldConfig().prefix!.value }}&nbsp;</span>\n              } @else {\n                <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Suffix -->\n            @if (fieldConfig().suffix) {\n              @if (fieldConfig().suffix!.type === 'text') {\n                <span matTextSuffix>&nbsp;{{ fieldConfig().suffix!.value }}</span>\n              } @else {\n                <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n              }\n            }\n\n            <!-- Errors -->\n            @for (msg of errorMessages(); track msg) {\n              <mat-error>{{ msg }}</mat-error>\n            }\n          </mat-form-field>\n        }\n      </div>\n\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n  } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n    <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container\n          *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n        </ng-container>\n      </div>\n      @if (fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  } @else {\n    <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n    @if (isGroupType()) {\n      <div class=\"kms-form-field__label-row\">\n        <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n        @if (fieldConfig().tooltip) {\n          <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n        }\n      </div>\n    }\n\n    <div class=\"kms-form-field__row\">\n      <div class=\"kms-form-field__control\">\n        <ng-container kmsDynamicField\n                      [fieldConfig]=\"fieldConfig()\"\n                      [control]=\"control()\"\n                      (fieldTouched)=\"onFieldTouched()\">\n        </ng-container>\n      </div>\n\n      @if (!isGroupType() && fieldConfig().tooltip) {\n        <kms-tooltip-icon\n          class=\"kms-form-field__tooltip\"\n          [tooltipText]=\"fieldConfig().tooltip!\"\n          [attr.id]=\"tooltipId()\">\n        </kms-tooltip-icon>\n      }\n    </div>\n\n    @if (shouldShowErrors() && errorMessages().length) {\n      <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n        @for (msg of errorMessages(); track msg) {\n          <div class=\"kms-form-field__error\">{{ msg }}</div>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5$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: i5$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", "size", "dontUseSprite", "color"] }, { kind: "component", type: DateInputComponent, selector: "kms-date-input", inputs: ["mode", "disabled", "label", "placeholder", "required", "hint", "errorMessage", "minDate", "maxDate", "monthPicker", "startView"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[kmsDynamicField]", inputs: ["fieldConfig", "control"], outputs: ["fieldTouched"] }, { kind: "component", type: TextInputComponent, selector: "kms-text-input", inputs: ["disabled", "label", "placeholder", "type", "required", "hint", "errorMessage", "autocomplete", "prefix", "suffix", "numericOnly", "prefixIcon", "suffixIcon"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -5147,7 +5182,6 @@ class KmsUiPresentationalModule {
             MapComponent,
             RadioButtonComponent,
             RadioGroupComponent,
-            SalutationDropdownComponent,
             SalutationRadiogroupComponent,
             SlideToggleComponent,
             TimeInputComponent,
@@ -5157,6 +5191,7 @@ class KmsUiPresentationalModule {
             SliderComponent,
             CardComponent,
             ButtonComponent,
+            ButtonToggleGroupComponent,
             NumericInputComponent,
             GenericFormComponent,
             FormSectionComponent,
@@ -5212,7 +5247,6 @@ class KmsUiPresentationalModule {
             LoaderComponent,
             MapComponent,
             RadioButtonComponent,
-            SalutationDropdownComponent,
             SalutationRadiogroupComponent,
             SlideToggleComponent,
             TimeInputComponent,
@@ -5222,6 +5256,7 @@ class KmsUiPresentationalModule {
             SliderComponent,
             CardComponent,
             ButtonComponent,
+            ButtonToggleGroupComponent,
             NumericInputComponent,
             GenericFormComponent,
             FormSectionComponent,
@@ -5281,7 +5316,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MapComponent,
                         RadioButtonComponent,
                         RadioGroupComponent,
-                        SalutationDropdownComponent,
                         SalutationRadiogroupComponent,
                         SlideToggleComponent,
                         TimeInputComponent,
@@ -5291,6 +5325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SliderComponent,
                         CardComponent,
                         ButtonComponent,
+                        ButtonToggleGroupComponent,
                         NumericInputComponent,
                         GenericFormComponent,
                         FormSectionComponent,
@@ -5352,7 +5387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         LoaderComponent,
                         MapComponent,
                         RadioButtonComponent,
-                        SalutationDropdownComponent,
                         SalutationRadiogroupComponent,
                         SlideToggleComponent,
                         TimeInputComponent,
@@ -5362,6 +5396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         SliderComponent,
                         CardComponent,
                         ButtonComponent,
+                        ButtonToggleGroupComponent,
                         NumericInputComponent,
                         GenericFormComponent,
                         FormSectionComponent,
@@ -5460,5 +5495,5 @@ var FormLayout;
  * Generated bundle index. Do not edit.
  */
 
-export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, ImageUploadComponent, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsTabContentDirective, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TabGroupComponent, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
+export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, ButtonToggleGroupComponent, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, ImageUploadComponent, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KMS_SPRITE_URL, KeyValuePair, KmsTabContentDirective, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TabGroupComponent, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map