@kms-ngx-ui/presentational 20.8.0 → 20.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/kms-ngx-ui-presentational.mjs +43 -76
  2. package/fesm2022/kms-ngx-ui-presentational.mjs.map +1 -1
  3. package/index.d.ts +37 -38
  4. package/package.json +1 -1
  5. package/src/assets/llms.txt +0 -15
package/fesm2022/kms-ngx-ui-presentational.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
@@ -8,7 +8,7 @@ import * as i1$2 from '@angular/material/checkbox';
8
8
  import { MatCheckboxModule } from '@angular/material/checkbox';
9
9
  import * as i1$5 from '@angular/material/radio';
10
10
  import { MatRadioModule } from '@angular/material/radio';
11
- import * as i3$1 from '@angular/material/slide-toggle';
11
+ import * as i3 from '@angular/material/slide-toggle';
12
12
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
13
13
  import * as i1$1 from '@angular/platform-browser';
14
14
  import * as i1$6 from '@angular-slider/ngx-slider';
@@ -22,27 +22,27 @@ import * as i5$1 from '@angular/material/autocomplete';
22
22
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
23
23
  import * as i2$2 from '@angular/material/button';
24
24
  import { MatButtonModule } from '@angular/material/button';
25
- import * as i4$1 from '@angular/material/card';
25
+ import * as i4$2 from '@angular/material/card';
26
26
  import { MatCardModule } from '@angular/material/card';
27
27
  import { MatNativeDateModule } from '@angular/material/core';
28
- import * as i4 from '@angular/material/datepicker';
28
+ import * as i4$1 from '@angular/material/datepicker';
29
29
  import { MatDatepickerModule } from '@angular/material/datepicker';
30
30
  import * as i1$7 from '@angular/material/dialog';
31
31
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
32
- import * as i3$3 from '@angular/material/expansion';
32
+ import * as i3$2 from '@angular/material/expansion';
33
33
  import { MatExpansionModule } from '@angular/material/expansion';
34
34
  import * as i2$1 from '@angular/material/form-field';
35
35
  import { MatFormFieldModule } from '@angular/material/form-field';
36
- import * as i3$2 from '@angular/material/input';
36
+ import * as i3$1 from '@angular/material/input';
37
37
  import { MatInputModule } from '@angular/material/input';
38
- import * as i3$4 from '@angular/material/list';
38
+ import * as i3$3 from '@angular/material/list';
39
39
  import { MatListModule } from '@angular/material/list';
40
40
  import * as i2$3 from '@angular/material/menu';
41
41
  import { MatMenuModule } from '@angular/material/menu';
42
42
  import * as i1$3 from '@angular/material/progress-spinner';
43
43
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
44
- import * as i3 from '@angular/material/select';
45
- import { MatSelectModule } from '@angular/material/select';
44
+ import * as i4 from '@angular/material/select';
45
+ import { MAT_SELECT_CONFIG, MatSelectModule } from '@angular/material/select';
46
46
  import * as i5 from 'ngx-mat-select-search';
47
47
  import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
48
48
  import { MatTooltipModule } from '@angular/material/tooltip';
@@ -1356,12 +1356,25 @@ const IconSizesArr = [
1356
1356
  IconSizePx.XXL,
1357
1357
  ];
1358
1358
 
1359
+ /**
1360
+ * Base URL used by `kms-icon` to resolve the SVG sprite sheet referenced
1361
+ * by `<use xlink:href>`. Override this when the consuming app is loaded
1362
+ * from a different origin than the host page (e.g. an Angular Element
1363
+ * widget embedded in a third-party site), so the browser resolves the
1364
+ * sprite against the bundle's location instead of the host page.
1365
+ */
1366
+ const KMS_SPRITE_URL = new InjectionToken('KMS_SPRITE_URL', {
1367
+ providedIn: 'root',
1368
+ factory: () => 'assets/sprite.svg',
1369
+ });
1370
+
1359
1371
  /**
1360
1372
  * @copyright KMS GmbH
1361
1373
  */
1362
1374
  class IconComponent {
1363
1375
  constructor(sanitizer) {
1364
1376
  this.sanitizer = sanitizer;
1377
+ this.spriteUrl = inject(KMS_SPRITE_URL);
1365
1378
  /**
1366
1379
  * Required: Name of the SVG icon inside your sprite sheet file with name 'icons.svg'.
1367
1380
  * Pass 'none' if no icon should be rendered.
@@ -1377,11 +1390,11 @@ class IconComponent {
1377
1390
  this.Version = VERSION.full;
1378
1391
  }
1379
1392
  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 }); }
1380
- 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"] }] }); }
1393
+ 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"] }] }); }
1381
1394
  }
1382
1395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
1383
1396
  type: Component,
1384
- 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"] }]
1397
+ 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"] }]
1385
1398
  }], 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 }] }] } });
1386
1399
 
1387
1400
  /**
@@ -1869,7 +1882,8 @@ class DropdownFromDataComponent extends FormControlParentComponent {
1869
1882
  useExisting: forwardRef(() => DropdownFromDataComponent),
1870
1883
  multi: true,
1871
1884
  },
1872
- ], 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"] }] }); }
1885
+ { provide: MAT_SELECT_CONFIG, useValue: { panelWidth: 'auto' } },
1886
+ ], 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"] }] }); }
1873
1887
  }
1874
1888
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
1875
1889
  type: Component,
@@ -1879,6 +1893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1879
1893
  useExisting: forwardRef(() => DropdownFromDataComponent),
1880
1894
  multi: true,
1881
1895
  },
1896
+ { provide: MAT_SELECT_CONFIG, useValue: { panelWidth: 'auto' } },
1882
1897
  ], 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" }]
1883
1898
  }], 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 }] }] } });
1884
1899
 
@@ -2129,7 +2144,7 @@ class SlideToggleComponent {
2129
2144
  useExisting: forwardRef(() => SlideToggleComponent),
2130
2145
  multi: true,
2131
2146
  },
2132
- ], 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"] }] }); }
2147
+ ], 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"] }] }); }
2133
2148
  }
2134
2149
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideToggleComponent, decorators: [{
2135
2150
  type: Component,
@@ -2403,7 +2418,7 @@ class ColorInputComponent extends FormControlParentComponent {
2403
2418
  useExisting: forwardRef(() => ColorInputComponent),
2404
2419
  multi: true,
2405
2420
  },
2406
- ], 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"] }] }); }
2421
+ ], 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"] }] }); }
2407
2422
  }
2408
2423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorInputComponent, decorators: [{
2409
2424
  type: Component,
@@ -2588,7 +2603,7 @@ class DateInputComponent {
2588
2603
  useExisting: forwardRef(() => DateInputComponent),
2589
2604
  multi: true,
2590
2605
  },
2591
- ], 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 }); }
2606
+ ], 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 }); }
2592
2607
  }
2593
2608
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateInputComponent, decorators: [{
2594
2609
  type: Component,
@@ -3274,7 +3289,7 @@ class KMSAccordionItemComponent {
3274
3289
  }
3275
3290
  ngOnInit() { }
3276
3291
  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 }); }
3277
- 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"] }] }); }
3292
+ 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"] }] }); }
3278
3293
  }
3279
3294
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
3280
3295
  type: Component,
@@ -3480,7 +3495,7 @@ class PasswordComponent {
3480
3495
  useExisting: forwardRef(() => PasswordComponent),
3481
3496
  multi: true,
3482
3497
  },
3483
- ], 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"] }] }); }
3498
+ ], 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"] }] }); }
3484
3499
  }
3485
3500
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PasswordComponent, decorators: [{
3486
3501
  type: Component,
@@ -3563,57 +3578,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
3563
3578
  type: Input
3564
3579
  }] } });
3565
3580
 
3566
- var SalutationEnum;
3567
- (function (SalutationEnum) {
3568
- SalutationEnum["NOT_SPECIFIED"] = "Keine Anrede";
3569
- SalutationEnum["MALE"] = "Herr";
3570
- SalutationEnum["FEMALE"] = "Frau";
3571
- })(SalutationEnum || (SalutationEnum = {}));
3572
-
3573
- class SalutationDropdownComponent extends FormControlParentComponent {
3574
- constructor(renderer) {
3575
- super(renderer);
3576
- this.renderer = renderer;
3577
- //For view
3578
- this.SalutationEnum = SalutationEnum;
3579
- this.Object = Object;
3580
- }
3581
- ngOnInit() {
3582
- this.form = new UntypedFormGroup({
3583
- salut: new UntypedFormControl(''),
3584
- });
3585
- this.formInitialized = true;
3586
- //somehow for dropowns we have to set value manually with timeout for default value
3587
- setTimeout(() => {
3588
- this.form.controls['salut'].setValue(this.value ? this.value : '');
3589
- }, 1000);
3590
- this.form.valueChanges.subscribe((value) => {
3591
- this.onChange(value.salut);
3592
- });
3593
- super.ngOnInit();
3594
- }
3595
- 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 }); }
3596
- 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: [
3597
- {
3598
- provide: NG_VALUE_ACCESSOR,
3599
- useExisting: forwardRef(() => SalutationDropdownComponent),
3600
- multi: true,
3601
- },
3602
- ], 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" }] }); }
3603
- }
3604
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
3605
- type: Component,
3606
- args: [{ standalone: false, selector: 'kms-salutation-dropdown', providers: [
3607
- {
3608
- provide: NG_VALUE_ACCESSOR,
3609
- useExisting: forwardRef(() => SalutationDropdownComponent),
3610
- multi: true,
3611
- },
3612
- ], 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" }]
3613
- }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { placeholder: [{
3614
- type: Input
3615
- }] } });
3616
-
3617
3581
  /**
3618
3582
  * General Image Model
3619
3583
  */
@@ -3663,6 +3627,13 @@ class AttachedFileDTO {
3663
3627
  * @copyright KMS GmbH
3664
3628
  */
3665
3629
 
3630
+ var SalutationEnum;
3631
+ (function (SalutationEnum) {
3632
+ SalutationEnum["NOT_SPECIFIED"] = "Keine Anrede";
3633
+ SalutationEnum["MALE"] = "Herr";
3634
+ SalutationEnum["FEMALE"] = "Frau";
3635
+ })(SalutationEnum || (SalutationEnum = {}));
3636
+
3666
3637
  class SalutationRadiogroupComponent extends FormControlParentComponent {
3667
3638
  constructor(renderer) {
3668
3639
  super(renderer);
@@ -3776,7 +3747,7 @@ class TextInputComponent {
3776
3747
  useExisting: forwardRef(() => TextInputComponent),
3777
3748
  multi: true,
3778
3749
  },
3779
- ], 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 }); }
3750
+ ], 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 }); }
3780
3751
  }
3781
3752
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextInputComponent, decorators: [{
3782
3753
  type: Component,
@@ -3869,7 +3840,7 @@ class TimeInputComponent {
3869
3840
  useExisting: TimeInputComponent,
3870
3841
  multi: true,
3871
3842
  },
3872
- ], 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"] }] }); }
3843
+ ], 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"] }] }); }
3873
3844
  }
3874
3845
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeInputComponent, decorators: [{
3875
3846
  type: Component,
@@ -4820,7 +4791,7 @@ class FormFieldComponent {
4820
4791
  });
4821
4792
  }
4822
4793
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4823
- 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 }); }
4794
+ 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 }); }
4824
4795
  }
4825
4796
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, decorators: [{
4826
4797
  type: Component,
@@ -5211,7 +5182,6 @@ class KmsUiPresentationalModule {
5211
5182
  MapComponent,
5212
5183
  RadioButtonComponent,
5213
5184
  RadioGroupComponent,
5214
- SalutationDropdownComponent,
5215
5185
  SalutationRadiogroupComponent,
5216
5186
  SlideToggleComponent,
5217
5187
  TimeInputComponent,
@@ -5277,7 +5247,6 @@ class KmsUiPresentationalModule {
5277
5247
  LoaderComponent,
5278
5248
  MapComponent,
5279
5249
  RadioButtonComponent,
5280
- SalutationDropdownComponent,
5281
5250
  SalutationRadiogroupComponent,
5282
5251
  SlideToggleComponent,
5283
5252
  TimeInputComponent,
@@ -5347,7 +5316,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5347
5316
  MapComponent,
5348
5317
  RadioButtonComponent,
5349
5318
  RadioGroupComponent,
5350
- SalutationDropdownComponent,
5351
5319
  SalutationRadiogroupComponent,
5352
5320
  SlideToggleComponent,
5353
5321
  TimeInputComponent,
@@ -5419,7 +5387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5419
5387
  LoaderComponent,
5420
5388
  MapComponent,
5421
5389
  RadioButtonComponent,
5422
- SalutationDropdownComponent,
5423
5390
  SalutationRadiogroupComponent,
5424
5391
  SlideToggleComponent,
5425
5392
  TimeInputComponent,
@@ -5528,5 +5495,5 @@ var FormLayout;
5528
5495
  * Generated bundle index. Do not edit.
5529
5496
  */
5530
5497
 
5531
- 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, 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 };
5498
+ 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 };
5532
5499
  //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map