@kms-ngx-ui/presentational 20.2.2 → 20.3.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 (24) hide show
  1. package/fesm2022/kms-ngx-ui-presentational.mjs +53 -6
  2. package/fesm2022/kms-ngx-ui-presentational.mjs.map +1 -1
  3. package/index.d.ts +17 -4
  4. package/package.json +1 -1
  5. package/src/assets/llms.txt +8 -0
  6. package/src/lib/ui/atoms/card/card.component.scss +11 -11
  7. package/src/lib/ui/atoms/dropdown-from-data/dropdown-from-data.component.scss +2 -2
  8. package/src/lib/ui/molecules/button/button.component.scss +3 -3
  9. package/src/lib/ui/molecules/confirmation-dialog/confirmation-dialog.component.scss +3 -3
  10. package/src/lib/ui/molecules/inline-alert/inline-alert.component.scss +81 -0
  11. package/src/lib/ui/molecules/kms-accordion-item/kms-accordion-item.component.scss +2 -2
  12. package/src/lib/ui/molecules/numeric-input/numeric-input.component.scss +2 -2
  13. package/src/lib/ui/molecules/password/password.component.scss +1 -1
  14. package/src/lib/ui/molecules/radiogroup/radiogroup.component.scss +1 -1
  15. package/src/lib/ui/molecules/text-input/text-input.component.scss +2 -2
  16. package/src/lib/ui/molecules/time-input/time-input.component.scss +1 -1
  17. package/src/lib/ui/molecules/yes-no-radiogroup/yes-no-radiogroup.component.scss +2 -2
  18. package/src/lib/ui/organisms/generic-form/components/form-actions/form-actions.component.scss +3 -1
  19. package/src/lib/ui/organisms/generic-form/components/form-field/form-field.component.scss +9 -7
  20. package/src/lib/ui/organisms/generic-form/components/form-section/form-section.component.scss +4 -2
  21. package/src/styles/_tokens.scss +4 -0
  22. package/src/styles/default-values.scss +2 -7
  23. package/src/styles/styles.scss +3 -0
  24. package/src/styles/tooltip.scss +1 -1
@@ -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, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } 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, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
@@ -1253,6 +1253,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1253
1253
  type: Output
1254
1254
  }] } });
1255
1255
 
1256
+ /**
1257
+ * Token used by DynamicFieldDirective to provide the external FormControl
1258
+ * to dynamically created components. This allows CVA components to access
1259
+ * the parent control's validators and errors when NgControl is not available.
1260
+ */
1261
+ const EXTERNAL_FORM_CONTROL = new InjectionToken('EXTERNAL_FORM_CONTROL');
1262
+
1256
1263
  /**
1257
1264
  * @copyright KMS GmbH
1258
1265
  */
@@ -1291,6 +1298,10 @@ class FormControlParentComponent extends FormParentComponent {
1291
1298
  }
1292
1299
  return this._ngControl;
1293
1300
  }
1301
+ /** The external FormControl — from NgControl (template usage) or the injection token (dynamic creation). */
1302
+ get parentControl() {
1303
+ return this.ngControl?.control ?? this._externalControl ?? null;
1304
+ }
1294
1305
  constructor(renderer) {
1295
1306
  super();
1296
1307
  this.renderer = renderer;
@@ -1299,6 +1310,9 @@ class FormControlParentComponent extends FormParentComponent {
1299
1310
  this.internalValue = '';
1300
1311
  this.injector = inject(Injector);
1301
1312
  this._ngControl = undefined;
1313
+ this._externalControl = inject(EXTERNAL_FORM_CONTROL, {
1314
+ optional: true,
1315
+ });
1302
1316
  // eslint-disable-next-line @typescript-eslint/no-empty-function
1303
1317
  this.onChange = () => { };
1304
1318
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1310,7 +1324,10 @@ class FormControlParentComponent extends FormParentComponent {
1310
1324
  super.ngOnInit();
1311
1325
  }
1312
1326
  ngDoCheck() {
1313
- if (this.ngControl?.control?.touched) {
1327
+ const externalControl = this.parentControl;
1328
+ if (!externalControl)
1329
+ return;
1330
+ if (externalControl.touched) {
1314
1331
  this.form?.markAllAsTouched();
1315
1332
  }
1316
1333
  }
@@ -1379,6 +1396,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1379
1396
  * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
1380
1397
  */
1381
1398
  class DropdownFromDataComponent extends FormControlParentComponent {
1399
+ /** Derives required state from the explicit input OR the bound control's validators. */
1400
+ isRequired() {
1401
+ if (this.required())
1402
+ return true;
1403
+ const validator = this.parentControl?.validator;
1404
+ if (!validator)
1405
+ return false;
1406
+ return !!validator({ value: null })?.['required'];
1407
+ }
1382
1408
  resolveBaseKeysAndValues() {
1383
1409
  const plainArray = this.optionsPlainArray();
1384
1410
  if (plainArray)
@@ -1574,7 +1600,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
1574
1600
  useExisting: forwardRef(() => DropdownFromDataComponent),
1575
1601
  multi: true,
1576
1602
  },
1577
- ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [multiple]=\"multiple()\"\n [required]=\"required()\"\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"] }] }); }
1603
+ ], 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"] }] }); }
1578
1604
  }
1579
1605
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
1580
1606
  type: Component,
@@ -1584,7 +1610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1584
1610
  useExisting: forwardRef(() => DropdownFromDataComponent),
1585
1611
  multi: true,
1586
1612
  },
1587
- ], standalone: false, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [multiple]=\"multiple()\"\n [required]=\"required()\"\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" }]
1613
+ ], 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" }]
1588
1614
  }], 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 }] }] } });
1589
1615
 
1590
1616
  class LoaderComponent {
@@ -2705,6 +2731,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2705
2731
  type: Output
2706
2732
  }] } });
2707
2733
 
2734
+ class InlineAlertComponent {
2735
+ constructor() {
2736
+ this.type = input('warning', ...(ngDevMode ? [{ debugName: "type" }] : []));
2737
+ this.icon = input('warning', ...(ngDevMode ? [{ debugName: "icon" }] : []));
2738
+ }
2739
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InlineAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2740
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: InlineAlertComponent, isStandalone: true, selector: "kms-inline-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"inline-alert inline-alert--{{ type() }}\"\n role=\"alert\"\n [attr.aria-live]=\"type() === 'error' ? 'assertive' : 'polite'\"\n>\n <kms-icon class=\"inline-alert__icon\" [icon]=\"icon()\"></kms-icon>\n <span class=\"inline-alert__content\">\n <ng-content></ng-content>\n </span>\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2741
+ }
2742
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InlineAlertComponent, decorators: [{
2743
+ type: Component,
2744
+ args: [{ selector: 'kms-inline-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "<div\n class=\"inline-alert inline-alert--{{ type() }}\"\n role=\"alert\"\n [attr.aria-live]=\"type() === 'error' ? 'assertive' : 'polite'\"\n>\n <kms-icon class=\"inline-alert__icon\" [icon]=\"icon()\"></kms-icon>\n <span class=\"inline-alert__content\">\n <ng-content></ng-content>\n </span>\n</div>\n" }]
2745
+ }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
2746
+
2708
2747
  /**
2709
2748
  * @copyright KMS GmbH
2710
2749
  */
@@ -3755,8 +3794,12 @@ class DynamicFieldDirective {
3755
3794
  const componentType = this.registry.resolve(config.type);
3756
3795
  if (!componentType)
3757
3796
  return;
3797
+ const injector = Injector.create({
3798
+ providers: [{ provide: EXTERNAL_FORM_CONTROL, useValue: control }],
3799
+ parent: this.vcr.injector,
3800
+ });
3758
3801
  this.vcr.clear();
3759
- this.componentRef = this.vcr.createComponent(componentType);
3802
+ this.componentRef = this.vcr.createComponent(componentType, { injector });
3760
3803
  this.bridgeCVA(control);
3761
3804
  this.mapInputs(config);
3762
3805
  }
@@ -4610,6 +4653,7 @@ class KmsUiPresentationalModule {
4610
4653
  MatDatepickerModule,
4611
4654
  MatNativeDateModule,
4612
4655
  IconComponent,
4656
+ InlineAlertComponent,
4613
4657
  DateInputComponent], exports: [BackToTopComponent,
4614
4658
  CheckboxComponent,
4615
4659
  ColorInputComponent,
@@ -4621,6 +4665,7 @@ class KmsUiPresentationalModule {
4621
4665
  ConfirmationDialogComponent,
4622
4666
  IconComponent,
4623
4667
  ImageSliderComponent,
4668
+ InlineAlertComponent,
4624
4669
  KMSAccordionItemComponent,
4625
4670
  KmsUiPresentationalComponent,
4626
4671
  LoaderComponent,
@@ -4738,6 +4783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4738
4783
  MatDatepickerModule,
4739
4784
  MatNativeDateModule,
4740
4785
  IconComponent,
4786
+ InlineAlertComponent,
4741
4787
  DateInputComponent,
4742
4788
  ],
4743
4789
  exports: [
@@ -4752,6 +4798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4752
4798
  ConfirmationDialogComponent,
4753
4799
  IconComponent,
4754
4800
  ImageSliderComponent,
4801
+ InlineAlertComponent,
4755
4802
  KMSAccordionItemComponent,
4756
4803
  KmsUiPresentationalComponent,
4757
4804
  LoaderComponent,
@@ -4956,5 +5003,5 @@ var FormLayout;
4956
5003
  * Generated bundle index. Do not edit.
4957
5004
  */
4958
5005
 
4959
- export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, 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, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
5006
+ export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, 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, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
4960
5007
  //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map