@i-cell/ids-angular 0.2.24 → 0.2.25

package/fesm2022/i-cell-ids-angular-forms.mjs

@@ -3,7 +3,7 @@ import { Injectable, InjectionToken, inject, Injector, signal, input, effect, bo
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NgControl, Validators, NG_VALUE_ACCESSOR, StatusChangeEvent } from '@angular/forms';
 import { ComponentBaseWithDefaults, IdsSize, ComponentBase, coerceBooleanAttribute, coerceNumberAttribute } from '@i-cell/ids-angular/core';
-import { Subject, observeOn, asapScheduler, tap, switchMap, of, startWith } from 'rxjs';
+import { Subject, observeOn, asapScheduler, tap, switchMap, startWith, of } from 'rxjs';
 import { IdsIconComponent } from '@i-cell/ids-angular/icon';
 import { hasModifierKey } from '@angular/cdk/keycodes';
 import { IdsIconButtonAppearance, IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
@@ -20,10 +20,10 @@ class ErrorStateMatcher extends AbstractErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control && control.invalid && (control.touched || (form && form.submitted)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -57,10 +57,10 @@ class SuccessStateMatcher extends AbstractSuccessStateMatcher {
     isSuccessState(control, form) {
         return !!(control && control.valid && (control.touched || (form && form.submitted)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SuccessStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SuccessStateMatcher, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SuccessStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -106,22 +106,22 @@ class IdsFormFieldControl extends ComponentBaseWithDefaults {
         this._injector = inject(Injector);
         this._parentForm = inject(NgForm, { optional: true });
         this._parentFormGroup = inject(FormGroupDirective, { optional: true });
-        this.ngControl = signal(null, ...(ngDevMode ? [{ debugName: "ngControl" }] : []));
+        this.ngControl = signal(null, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
         this.errorStateChanges = new Subject();
         this.successStateChanges = new Subject();
-        this.canHandleSuccessState = input(false, ...(ngDevMode ? [{ debugName: "canHandleSuccessState" }] : []));
-        this.hasErrorState = signal(false, ...(ngDevMode ? [{ debugName: "hasErrorState" }] : []));
-        this.hasSuccessState = signal(false, ...(ngDevMode ? [{ debugName: "hasSuccessState" }] : []));
+        this.canHandleSuccessState = input(false, ...(ngDevMode ? [{ debugName: "canHandleSuccessState" }] : /* istanbul ignore next */ []));
+        this.hasErrorState = signal(false, ...(ngDevMode ? [{ debugName: "hasErrorState" }] : /* istanbul ignore next */ []));
+        this.hasSuccessState = signal(false, ...(ngDevMode ? [{ debugName: "hasSuccessState" }] : /* istanbul ignore next */ []));
         this._canHandleSuccessStateEffect = effect(() => {
             this._setSuccessStateTracker(this.canHandleSuccessState());
-        }, ...(ngDevMode ? [{ debugName: "_canHandleSuccessStateEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_canHandleSuccessStateEffect" }] : /* istanbul ignore next */ []));
         /** Handles the `disabled` input binding */
-        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", transform: booleanAttribute, alias: 'disabled' }] : [{ transform: booleanAttribute, alias: 'disabled' }]));
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'disabled' });
         /** Stores the `disabled` state internally */
-        this._disabled = signal(this.disabledInput(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this._disabled = signal(this.disabledInput(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         /** The input's `disabled` state as a read-only signal (to enable/disable the contol programmatically, use the FormControl's related API) */
-        this.disabled = computed(() => this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = computed(() => this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** This effect is triggered if the `disabled` attribute binding changes and delegates the change to the underlying FormControl */
         this._disabledInputEffect = effect(() => {
             const enableOrDisable = this.disabledInput() ? 'disable' : 'enable';
@@ -130,9 +130,9 @@ class IdsFormFieldControl extends ComponentBaseWithDefaults {
             // (the FormControl's enable/disable method call will trigger a StatusChangeEvent and/or the ControlValueAccessor's setDisabledState() callback
             // so that we can update the `disabled` signal)
             queueMicrotask(() => controlDir?.control?.[enableOrDisable]());
-        }, ...(ngDevMode ? [{ debugName: "_disabledInputEffect" }] : []));
-        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_disabledInputEffect" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         // Get the NgControl reference as soon as we can
         queueMicrotask(() => {
             this.ngControl.set(this._injector.get(NgControl, null, { self: true }));
@@ -164,12 +164,12 @@ class IdsFormFieldControl extends ComponentBaseWithDefaults {
             this.hasSuccessState.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsFormFieldControl, isStandalone: true, inputs: { canHandleSuccessState: { classPropertyName: "canHandleSuccessState", publicName: "canHandleSuccessState", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsFormFieldControl, isStandalone: true, inputs: { canHandleSuccessState: { classPropertyName: "canHandleSuccessState", publicName: "canHandleSuccessState", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFormFieldControl, decorators: [{
             type: Directive
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { canHandleSuccessState: [{ type: i0.Input, args: [{ isSignal: true, alias: "canHandleSuccessState", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 const IdsFormFieldVariant = {
     SURFACE: 'surface',
@@ -190,10 +190,10 @@ function IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY() {
 const IDS_FORM_FIELD_CONTROL = new InjectionToken('IDS_FORM_FIELD_CONTROL');
 
 class IdsFormFieldActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsFormFieldActionDirective, isStandalone: true, selector: "[idsFormFieldAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsFormFieldActionDirective, isStandalone: true, selector: "[idsFormFieldAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsFormFieldAction]',
@@ -208,10 +208,10 @@ class IdsPrefixDirective {
     set idsLeadingIcon(value) {
         this.isLeadingIcon = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsPrefixDirective, isStandalone: true, selector: "[idsPrefix], [idsLeadingIcon]", inputs: { idsLeadingIcon: "idsLeadingIcon" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsPrefixDirective, isStandalone: true, selector: "[idsPrefix], [idsLeadingIcon]", inputs: { idsLeadingIcon: "idsLeadingIcon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsPrefix], [idsLeadingIcon]',
@@ -229,10 +229,10 @@ class IdsSuffixDirective {
     set idsTrailingIcon(value) {
         this.isTrailingIcon = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsSuffixDirective, isStandalone: true, selector: "[idsSuffix], [idsTrailingIcon]", inputs: { idsTrailingIcon: "idsTrailingIcon" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsSuffixDirective, isStandalone: true, selector: "[idsSuffix], [idsTrailingIcon]", inputs: { idsTrailingIcon: "idsTrailingIcon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsSuffix], [idsTrailingIcon]',
@@ -279,10 +279,10 @@ function IDS_FIELDSET_DEFAULT_CONFIG_FACTORY() {
 }
 
 class IdsFieldsetMessageDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsFieldsetMessageDirective, isStandalone: true, selector: "[idsFieldsetMessage]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFieldsetMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsFieldsetMessageDirective, isStandalone: true, selector: "[idsFieldsetMessage]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetMessageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFieldsetMessageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsFieldsetMessage]',
@@ -295,26 +295,26 @@ class IdsFieldsetComponent extends ComponentBaseWithDefaults {
     constructor() {
         super(...arguments);
         this._defaultConfig = this._getDefaultConfig(defaultConfig$4, IDS_FIELDSET_DEFAULT_CONFIG);
-        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-        this.legend = input('', ...(ngDevMode ? [{ debugName: "legend" }] : []));
-        this._fieldsetMessage = contentChildren(IdsFieldsetMessageDirective, ...(ngDevMode ? [{ debugName: "_fieldsetMessage" }] : []));
-        this._hasMessage = computed(() => this._fieldsetMessage().length > 0, ...(ngDevMode ? [{ debugName: "_hasMessage" }] : []));
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.legend = input('', ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
+        this._fieldsetMessage = contentChildren(IdsFieldsetMessageDirective, ...(ngDevMode ? [{ debugName: "_fieldsetMessage" }] : /* istanbul ignore next */ []));
+        this._hasMessage = computed(() => this._fieldsetMessage().length > 0, ...(ngDevMode ? [{ debugName: "_hasMessage" }] : /* istanbul ignore next */ []));
         this._hostClasses = computed(() => this._getHostClasses([
             this.size(),
             this.variant(),
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'fieldset';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsFieldsetComponent, isStandalone: true, selector: "fieldset[idsFieldset]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_fieldsetMessage", predicate: IdsFieldsetMessageDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsFieldsetComponent, isStandalone: true, selector: "fieldset[idsFieldset]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_fieldsetMessage", predicate: IdsFieldsetMessageDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fieldset[idsFieldset]', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n" }]
-        }] });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], _fieldsetMessage: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsFieldsetMessageDirective), { isSignal: true }] }] } });
 
 /**
  * Directive to map an error message to an error code for a form field.
@@ -350,7 +350,7 @@ class IdsErrorDefinitionDirective {
         /**
          * The validation error's identifier code
          */
-        this.code = input.required(...(ngDevMode ? [{ debugName: "code" }] : []));
+        this.code = input.required(...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
     }
     /**
@@ -371,21 +371,21 @@ class IdsErrorDefinitionDirective {
             message: () => self.errorMessage,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorDefinitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsErrorDefinitionDirective, isStandalone: true, selector: "ids-error-def", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsErrorDefinitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsErrorDefinitionDirective, isStandalone: true, selector: "ids-error-def", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorDefinitionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsErrorDefinitionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ids-error-def',
                 }]
-        }] });
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }] } });
 
 class IdsMessageSuffixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsMessageSuffixDirective, isStandalone: true, selector: "[idsMessageSuffix]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsMessageSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsMessageSuffixDirective, isStandalone: true, selector: "[idsMessageSuffix]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsMessageSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsMessageSuffix]',
@@ -419,30 +419,30 @@ class IdsMessageDirective extends ComponentBaseWithDefaults {
         super(...arguments);
         this._parent = inject(IDS_MESSAGE_PARENT_FORM_FIELD, { skipSelf: true, optional: true });
         this._defaultConfig = this._getDefaultConfig(defaultConfig$3, IDS_MESSAGE_DEFAULT_CONFIG);
-        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-        this._parentOrSelfSize = computed(() => this._parent?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "_parentOrSelfSize" }] : []));
-        this._parentOrSelfVariant = computed(() => this._parent?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "_parentOrSelfVariant" }] : []));
-        this._parentDisabled = computed(() => this._parent?.disabled(), ...(ngDevMode ? [{ debugName: "_parentDisabled" }] : []));
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this._parentOrSelfSize = computed(() => this._parent?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "_parentOrSelfSize" }] : /* istanbul ignore next */ []));
+        this._parentOrSelfVariant = computed(() => this._parent?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "_parentOrSelfVariant" }] : /* istanbul ignore next */ []));
+        this._parentDisabled = computed(() => this._parent?.disabled(), ...(ngDevMode ? [{ debugName: "_parentDisabled" }] : /* istanbul ignore next */ []));
         this._hostClasses = computed(() => this._getHostClasses([
             this._parentOrSelfSize(),
             this._parentOrSelfVariant(),
             this._parentDisabled() ? 'disabled' : null,
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'message';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsMessageDirective, isStandalone: true, selector: "[idsMessage]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsMessageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsMessageDirective, isStandalone: true, selector: "[idsMessage]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsMessageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsMessage]',
                     standalone: true,
                 }]
-        }] });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class IdsErrorMessageComponent extends ComponentBase {
     get _hostName() {
@@ -451,12 +451,12 @@ class IdsErrorMessageComponent extends ComponentBase {
     constructor() {
         super();
         this._parent = inject(IdsFormFieldComponent, { skipSelf: true });
-        this._control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : []));
-        this._errorDefDirs = contentChildren(IdsErrorDefinitionDirective, ...(ngDevMode ? [{ debugName: "_errorDefDirs" }] : []));
-        this._errorDefs = computed(() => this._errorDefDirs().map((errorDefDir) => errorDefDir.toErrorMessageMapping()), ...(ngDevMode ? [{ debugName: "_errorDefs" }] : []));
-        this._validationError = signal(null, ...(ngDevMode ? [{ debugName: "_validationError" }] : []));
-        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
-        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
+        this._control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : /* istanbul ignore next */ []));
+        this._errorDefDirs = contentChildren(IdsErrorDefinitionDirective, ...(ngDevMode ? [{ debugName: "_errorDefDirs" }] : /* istanbul ignore next */ []));
+        this._errorDefs = computed(() => this._errorDefDirs().map((errorDefDir) => errorDefDir.toErrorMessageMapping()), ...(ngDevMode ? [{ debugName: "_errorDefs" }] : /* istanbul ignore next */ []));
+        this._validationError = signal(null, ...(ngDevMode ? [{ debugName: "_validationError" }] : /* istanbul ignore next */ []));
+        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : /* istanbul ignore next */ []));
         toObservable(this._parent.controlDir).pipe(observeOn(asapScheduler), tap((controlDir) => this._control.set(controlDir?.control ?? null)), switchMap(() => this._control()?.statusChanges.pipe(startWith(this._control()?.status)) ?? of(null)), takeUntilDestroyed(this._destroyRef)).subscribe((status) => {
             if (status === 'INVALID') {
                 const nextError = this._selectMostImportantValidationError();
@@ -479,19 +479,19 @@ class IdsErrorMessageComponent extends ComponentBase {
     _getValidationErrorMessage(messageOrFn) {
         return messageOrFn instanceof Function ? messageOrFn() : messageOrFn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsErrorMessageComponent, isStandalone: true, selector: "ids-error-message", queries: [{ propertyName: "_errorDefDirs", predicate: IdsErrorDefinitionDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"alert-circle-outline\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsErrorMessageComponent, isStandalone: true, selector: "ids-error-message", queries: [{ propertyName: "_errorDefDirs", predicate: IdsErrorDefinitionDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"alert-circle-outline\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsErrorMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-error-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"alert-circle-outline\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { _errorDefDirs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsErrorDefinitionDirective), { isSignal: true }] }], suffixes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsMessageSuffixDirective), { isSignal: true }] }] } });
 
 class IdsMessagePrefixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessagePrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsMessagePrefixDirective, isStandalone: true, selector: "[idsMessagePrefix]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsMessagePrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsMessagePrefixDirective, isStandalone: true, selector: "[idsMessagePrefix]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessagePrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsMessagePrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsMessagePrefix]',
@@ -501,13 +501,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 
 class IdsHintMessageComponent {
     constructor() {
-        this.prefixes = contentChildren(IdsMessagePrefixDirective, ...(ngDevMode ? [{ debugName: "prefixes" }] : []));
-        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
+        this.prefixes = contentChildren(IdsMessagePrefixDirective, ...(ngDevMode ? [{ debugName: "prefixes" }] : /* istanbul ignore next */ []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsHintMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsHintMessageComponent, isStandalone: true, selector: "ids-hint-message", host: { classAttribute: "ids-hint-message" }, queries: [{ propertyName: "prefixes", predicate: IdsMessagePrefixDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], hostDirectives: [{ directive: IdsMessageDirective, inputs: ["size", "size", "variant", "variant"] }], ngImport: i0, template: "@if (prefixes().length) {\n  <div class=\"ids-message__prefix\">\n    <ng-content select=\"[idsMessagePrefix]\" />\n  </div>\n}\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsHintMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsHintMessageComponent, isStandalone: true, selector: "ids-hint-message", host: { classAttribute: "ids-hint-message" }, queries: [{ propertyName: "prefixes", predicate: IdsMessagePrefixDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], hostDirectives: [{ directive: IdsMessageDirective, inputs: ["size", "size", "variant", "variant"] }], ngImport: i0, template: "@if (prefixes().length) {\n  <div class=\"ids-message__prefix\">\n    <ng-content select=\"[idsMessagePrefix]\" />\n  </div>\n}\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsHintMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsHintMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-hint-message', imports: [], host: {
                         class: 'ids-hint-message',
@@ -520,26 +520,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             ],
                         },
                     ], encapsulation: ViewEncapsulation.None, template: "@if (prefixes().length) {\n  <div class=\"ids-message__prefix\">\n    <ng-content select=\"[idsMessagePrefix]\" />\n  </div>\n}\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
-        }] });
+        }], propDecorators: { prefixes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsMessagePrefixDirective), { isSignal: true }] }], suffixes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsMessageSuffixDirective), { isSignal: true }] }] } });
 
 class IdsSuccessMessageComponent extends ComponentBase {
     constructor() {
         super(...arguments);
         this._parent = inject(IDS_MESSAGE_PARENT_FORM_FIELD, { skipSelf: true, optional: true });
-        this._isDisabled = computed(() => this._parent?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
-        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
-        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
+        this._isDisabled = computed(() => this._parent?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'success-message';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    @if (_isDisabled()) {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" />\n    } @else {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n    }  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    @if (_isDisabled()) {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" />\n    } @else {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n    }  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-success-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    @if (_isDisabled()) {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" />\n    } @else {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n    }  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
-        }] });
+        }], propDecorators: { suffixes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsMessageSuffixDirective), { isSignal: true }] }] } });
 
 const defaultConfig$2 = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY();
 class IdsFormFieldComponent extends ComponentBaseWithDefaults {
@@ -550,34 +550,34 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
         this._defaultConfig = this._getDefaultConfig(defaultConfig$2, IDS_FORM_FIELD_DEFAULT_CONFIG);
         this._fieldWrapper = viewChild.required('fieldWrapper');
         this._child = contentChild.required(IDS_FORM_FIELD_CONTROL);
-        this._hintMessages = contentChildren(IdsHintMessageComponent, ...(ngDevMode ? [{ debugName: "_hintMessages", descendants: true }] : [{ descendants: true }]));
-        this._successMessages = contentChildren(IdsSuccessMessageComponent, ...(ngDevMode ? [{ debugName: "_successMessages", descendants: true }] : [{ descendants: true }]));
-        this._errorMessages = contentChildren(IdsErrorMessageComponent, ...(ngDevMode ? [{ debugName: "_errorMessages", descendants: true }] : [{ descendants: true }]));
-        this._actions = contentChildren(IdsFormFieldActionDirective, ...(ngDevMode ? [{ debugName: "_actions" }] : []));
-        this._prefixes = contentChildren(IdsPrefixDirective, ...(ngDevMode ? [{ debugName: "_prefixes" }] : []));
-        this._suffixes = contentChildren(IdsSuffixDirective, ...(ngDevMode ? [{ debugName: "_suffixes" }] : []));
-        this._hasActions = computed(() => Boolean(this._actions().length), ...(ngDevMode ? [{ debugName: "_hasActions" }] : []));
-        this._hasLeadingIcon = computed(() => Boolean(this._prefixes().filter((prefix) => prefix.isLeadingIcon).length), ...(ngDevMode ? [{ debugName: "_hasLeadingIcon" }] : []));
-        this._hasPrefix = computed(() => Boolean(this._prefixes().filter((prefix) => !prefix.isLeadingIcon).length), ...(ngDevMode ? [{ debugName: "_hasPrefix" }] : []));
-        this._hasSuffix = computed(() => Boolean(this._suffixes().filter((suffix) => !suffix.isTrailingIcon).length), ...(ngDevMode ? [{ debugName: "_hasSuffix" }] : []));
-        this._hasTrailingIcon = computed(() => Boolean(this._suffixes().filter((suffix) => suffix.isTrailingIcon).length), ...(ngDevMode ? [{ debugName: "_hasTrailingIcon" }] : []));
-        this._inputId = computed(() => this._child()?.id(), ...(ngDevMode ? [{ debugName: "_inputId" }] : []));
-        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-        this.parentOrSelfSize = computed(() => this._parentFieldset?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "parentOrSelfSize" }] : []));
-        this.parentOrSelfVariant = computed(() => this._parentFieldset?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "parentOrSelfVariant" }] : []));
-        this.controlDir = computed(() => this._child().ngControl(), ...(ngDevMode ? [{ debugName: "controlDir" }] : []));
-        this.disabled = computed(() => Boolean(this._child().disabled()), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.readonly = computed(() => Boolean(this._child().readonly()), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-        this._hasErrorState = computed(() => Boolean(this._child().hasErrorState()), ...(ngDevMode ? [{ debugName: "_hasErrorState" }] : []));
-        this._hasSuccessState = computed(() => Boolean(this._child().hasSuccessState()), ...(ngDevMode ? [{ debugName: "_hasSuccessState" }] : []));
+        this._hintMessages = contentChildren(IdsHintMessageComponent, { ...(ngDevMode ? { debugName: "_hintMessages" } : /* istanbul ignore next */ {}), descendants: true });
+        this._successMessages = contentChildren(IdsSuccessMessageComponent, { ...(ngDevMode ? { debugName: "_successMessages" } : /* istanbul ignore next */ {}), descendants: true });
+        this._errorMessages = contentChildren(IdsErrorMessageComponent, { ...(ngDevMode ? { debugName: "_errorMessages" } : /* istanbul ignore next */ {}), descendants: true });
+        this._actions = contentChildren(IdsFormFieldActionDirective, ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
+        this._prefixes = contentChildren(IdsPrefixDirective, ...(ngDevMode ? [{ debugName: "_prefixes" }] : /* istanbul ignore next */ []));
+        this._suffixes = contentChildren(IdsSuffixDirective, ...(ngDevMode ? [{ debugName: "_suffixes" }] : /* istanbul ignore next */ []));
+        this._hasActions = computed(() => Boolean(this._actions().length), ...(ngDevMode ? [{ debugName: "_hasActions" }] : /* istanbul ignore next */ []));
+        this._hasLeadingIcon = computed(() => Boolean(this._prefixes().filter((prefix) => prefix.isLeadingIcon).length), ...(ngDevMode ? [{ debugName: "_hasLeadingIcon" }] : /* istanbul ignore next */ []));
+        this._hasPrefix = computed(() => Boolean(this._prefixes().filter((prefix) => !prefix.isLeadingIcon).length), ...(ngDevMode ? [{ debugName: "_hasPrefix" }] : /* istanbul ignore next */ []));
+        this._hasSuffix = computed(() => Boolean(this._suffixes().filter((suffix) => !suffix.isTrailingIcon).length), ...(ngDevMode ? [{ debugName: "_hasSuffix" }] : /* istanbul ignore next */ []));
+        this._hasTrailingIcon = computed(() => Boolean(this._suffixes().filter((suffix) => suffix.isTrailingIcon).length), ...(ngDevMode ? [{ debugName: "_hasTrailingIcon" }] : /* istanbul ignore next */ []));
+        this._inputId = computed(() => this._child()?.id(), ...(ngDevMode ? [{ debugName: "_inputId" }] : /* istanbul ignore next */ []));
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.parentOrSelfSize = computed(() => this._parentFieldset?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "parentOrSelfSize" }] : /* istanbul ignore next */ []));
+        this.parentOrSelfVariant = computed(() => this._parentFieldset?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "parentOrSelfVariant" }] : /* istanbul ignore next */ []));
+        this.controlDir = computed(() => this._child().ngControl(), ...(ngDevMode ? [{ debugName: "controlDir" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => Boolean(this._child().disabled()), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.readonly = computed(() => Boolean(this._child().readonly()), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this._hasErrorState = computed(() => Boolean(this._child().hasErrorState()), ...(ngDevMode ? [{ debugName: "_hasErrorState" }] : /* istanbul ignore next */ []));
+        this._hasSuccessState = computed(() => Boolean(this._child().hasSuccessState()), ...(ngDevMode ? [{ debugName: "_hasSuccessState" }] : /* istanbul ignore next */ []));
         this._hostClasses = computed(() => this._getHostClasses([
             this.parentOrSelfSize(),
             this.parentOrSelfVariant(),
             this.disabled() ? 'disabled' : null,
             this._hasErrorState() ? 'invalid' : null,
             this._hasSuccessState() ? 'valid' : null,
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
         this._displayedMessages = computed(() => {
             if (this._errorMessages().length > 0 && this._hasErrorState()) {
                 return 'error';
@@ -589,7 +589,7 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
                 return 'hint';
             }
             return undefined;
-        }, ...(ngDevMode ? [{ debugName: "_displayedMessages" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_displayedMessages" }] : /* istanbul ignore next */ []));
         this.hasRequiredValidator = computed(() => {
             const control = this.controlDir()?.control;
             return this._child().required()
@@ -598,7 +598,7 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
                 || control?.hasValidator(IdsValidators.required)
                 || control?.hasValidator(IdsValidators.requiredTrue)
                 || control?.hasValidator(IdsValidators.requiredFalse);
-        }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'form-field';
@@ -612,13 +612,13 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
             containerClick(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsFormFieldComponent, isStandalone: true, selector: "ids-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_child", first: true, predicate: IDS_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_hintMessages", predicate: IdsHintMessageComponent, descendants: true, isSignal: true }, { propertyName: "_successMessages", predicate: IdsSuccessMessageComponent, descendants: true, isSignal: true }, { propertyName: "_errorMessages", predicate: IdsErrorMessageComponent, descendants: true, isSignal: true }, { propertyName: "_actions", predicate: IdsFormFieldActionDirective, isSignal: true }, { propertyName: "_prefixes", predicate: IdsPrefixDirective, isSignal: true }, { propertyName: "_suffixes", predicate: IdsSuffixDirective, isSignal: true }], viewQueries: [{ propertyName: "_fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"ids-form-field__label\" [for]=\"_inputId()\">\n  @if (hasRequiredValidator()) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\n  <ng-content select=\"ids-label\" />\n</label>\n\n<div #fieldWrapper class=\"ids-form-field__field-wrapper\">\n  <div class=\"ids-form-field__field-wrapper__container\" (click)=\"containerClick($event)\">\n    @if (_hasLeadingIcon()) {\n      <div class=\"ids-form-field__leading-icon\">\n        <ng-content select=\"ids-icon[idsLeadingIcon]\" />\n      </div>\n    }\n    @if (_hasPrefix()) {\n      <div class=\"ids-form-field__prefix\">\n        <ng-content select=\"[idsPrefix]\" />\n      </div>\n    }\n    <div class=\"ids-form-field__infix\">\n      <ng-content />\n    </div>\n    @if (_hasSuffix()) {\n      <div class=\"ids-form-field__suffix\">\n        <ng-content select=\"[idsSuffix]\" />\n      </div>\n    }\n    @if (_hasTrailingIcon()) {\n      <div class=\"ids-form-field__trailing-icon\">\n        <ng-content select=\"ids-icon[idsTrailingIcon]\" />\n      </div>\n    }\n  </div>\n  @if (_hasActions()) {\n    <div class=\"ids-form-field__field-wrapper__action\">\n      <ng-content select=\"[idsFormFieldAction]\" />\n    </div>\n  }\n</div>\n\n<div class=\"ids-form-field__subscript-wrapper\">\n  @let messages = _displayedMessages();\n  @if (messages) {\n    <div class=\"ids-form-field__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"success\") {\n          <ng-content select=\"ids-success-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsFormFieldComponent, isStandalone: true, selector: "ids-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_child", first: true, predicate: IDS_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_hintMessages", predicate: IdsHintMessageComponent, descendants: true, isSignal: true }, { propertyName: "_successMessages", predicate: IdsSuccessMessageComponent, descendants: true, isSignal: true }, { propertyName: "_errorMessages", predicate: IdsErrorMessageComponent, descendants: true, isSignal: true }, { propertyName: "_actions", predicate: IdsFormFieldActionDirective, isSignal: true }, { propertyName: "_prefixes", predicate: IdsPrefixDirective, isSignal: true }, { propertyName: "_suffixes", predicate: IdsSuffixDirective, isSignal: true }], viewQueries: [{ propertyName: "_fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"ids-form-field__label\" [for]=\"_inputId()\">\n  @if (hasRequiredValidator()) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\n  <ng-content select=\"ids-label\" />\n</label>\n\n<div #fieldWrapper class=\"ids-form-field__field-wrapper\">\n  <div class=\"ids-form-field__field-wrapper__container\" (click)=\"containerClick($event)\">\n    @if (_hasLeadingIcon()) {\n      <div class=\"ids-form-field__leading-icon\">\n        <ng-content select=\"ids-icon[idsLeadingIcon]\" />\n      </div>\n    }\n    @if (_hasPrefix()) {\n      <div class=\"ids-form-field__prefix\">\n        <ng-content select=\"[idsPrefix]\" />\n      </div>\n    }\n    <div class=\"ids-form-field__infix\">\n      <ng-content />\n    </div>\n    @if (_hasSuffix()) {\n      <div class=\"ids-form-field__suffix\">\n        <ng-content select=\"[idsSuffix]\" />\n      </div>\n    }\n    @if (_hasTrailingIcon()) {\n      <div class=\"ids-form-field__trailing-icon\">\n        <ng-content select=\"ids-icon[idsTrailingIcon]\" />\n      </div>\n    }\n  </div>\n  @if (_hasActions()) {\n    <div class=\"ids-form-field__field-wrapper__action\">\n      <ng-content select=\"[idsFormFieldAction]\" />\n    </div>\n  }\n</div>\n\n<div class=\"ids-form-field__subscript-wrapper\">\n  @let messages = _displayedMessages();\n  @if (messages) {\n    <div class=\"ids-form-field__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"success\") {\n          <ng-content select=\"ids-success-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-form-field', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ids-form-field__label\" [for]=\"_inputId()\">\n  @if (hasRequiredValidator()) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\n  <ng-content select=\"ids-label\" />\n</label>\n\n<div #fieldWrapper class=\"ids-form-field__field-wrapper\">\n  <div class=\"ids-form-field__field-wrapper__container\" (click)=\"containerClick($event)\">\n    @if (_hasLeadingIcon()) {\n      <div class=\"ids-form-field__leading-icon\">\n        <ng-content select=\"ids-icon[idsLeadingIcon]\" />\n      </div>\n    }\n    @if (_hasPrefix()) {\n      <div class=\"ids-form-field__prefix\">\n        <ng-content select=\"[idsPrefix]\" />\n      </div>\n    }\n    <div class=\"ids-form-field__infix\">\n      <ng-content />\n    </div>\n    @if (_hasSuffix()) {\n      <div class=\"ids-form-field__suffix\">\n        <ng-content select=\"[idsSuffix]\" />\n      </div>\n    }\n    @if (_hasTrailingIcon()) {\n      <div class=\"ids-form-field__trailing-icon\">\n        <ng-content select=\"ids-icon[idsTrailingIcon]\" />\n      </div>\n    }\n  </div>\n  @if (_hasActions()) {\n    <div class=\"ids-form-field__field-wrapper__action\">\n      <ng-content select=\"[idsFormFieldAction]\" />\n    </div>\n  }\n</div>\n\n<div class=\"ids-form-field__subscript-wrapper\">\n  @let messages = _displayedMessages();\n  @if (messages) {\n    <div class=\"ids-form-field__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"success\") {\n          <ng-content select=\"ids-success-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n" }]
-        }] });
+        }], propDecorators: { _fieldWrapper: [{ type: i0.ViewChild, args: ['fieldWrapper', { isSignal: true }] }], _child: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IDS_FORM_FIELD_CONTROL), { isSignal: true }] }], _hintMessages: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsHintMessageComponent), { ...{ descendants: true }, isSignal: true }] }], _successMessages: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsSuccessMessageComponent), { ...{ descendants: true }, isSignal: true }] }], _errorMessages: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsErrorMessageComponent), { ...{ descendants: true }, isSignal: true }] }], _actions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsFormFieldActionDirective), { isSignal: true }] }], _prefixes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsPrefixDirective), { isSignal: true }] }], _suffixes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsSuffixDirective), { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 const IDS_OPTION_GROUP = new InjectionToken('IdsOptionGroup');
 
@@ -644,26 +644,26 @@ class PseudoCheckboxComponent extends ComponentBase {
     constructor() {
         super(...arguments);
         this._parent = inject(IDS_PSEUDO_CHECKBOX_PARENT, { optional: true });
-        this.checkboxState = input(IdsPseudoCheckboxState.UNCHECKED, ...(ngDevMode ? [{ debugName: "checkboxState" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
-        this._isChecked = computed(() => this.checkboxState() === IdsPseudoCheckboxState.CHECKED, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
-        this._isIndeterminate = computed(() => this.checkboxState() === IdsPseudoCheckboxState.INDETERMINATE, ...(ngDevMode ? [{ debugName: "_isIndeterminate" }] : []));
+        this.checkboxState = input(IdsPseudoCheckboxState.UNCHECKED, ...(ngDevMode ? [{ debugName: "checkboxState" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
+        this._isChecked = computed(() => this.checkboxState() === IdsPseudoCheckboxState.CHECKED, ...(ngDevMode ? [{ debugName: "_isChecked" }] : /* istanbul ignore next */ []));
+        this._isIndeterminate = computed(() => this.checkboxState() === IdsPseudoCheckboxState.INDETERMINATE, ...(ngDevMode ? [{ debugName: "_isIndeterminate" }] : /* istanbul ignore next */ []));
         this._hostClasses = computed(() => this._getHostClasses([
             this._parent?.embeddedPseudoCheckboxSize(),
             this._parent?.embeddedPseudoCheckboxVariant(),
             this.disabled() ? 'disabled' : null,
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'pseudo-checkbox';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PseudoCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PseudoCheckboxComponent, isStandalone: true, selector: "ids-pseudo-checkbox", inputs: { checkboxState: { classPropertyName: "checkboxState", publicName: "checkboxState", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ids-pseudo-checkbox__input-wrapper\">\n  <input\n    type=\"checkbox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"_isIndeterminate() ? 'mixed' : null\"\n    [checked]=\"_isChecked()\"\n    [indeterminate]=\"_isIndeterminate()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-pseudo-checkbox__icon\" aria-hidden=\"true\">\n    @if (_isIndeterminate()) {\n      <ids-icon fontIcon=\"remove\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"done\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PseudoCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PseudoCheckboxComponent, isStandalone: true, selector: "ids-pseudo-checkbox", inputs: { checkboxState: { classPropertyName: "checkboxState", publicName: "checkboxState", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ids-pseudo-checkbox__input-wrapper\">\n  <input\n    type=\"checkbox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"_isIndeterminate() ? 'mixed' : null\"\n    [checked]=\"_isChecked()\"\n    [indeterminate]=\"_isIndeterminate()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-pseudo-checkbox__icon\" aria-hidden=\"true\">\n    @if (_isIndeterminate()) {\n      <ids-icon fontIcon=\"remove\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"done\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PseudoCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PseudoCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-pseudo-checkbox', imports: [IdsIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ids-pseudo-checkbox__input-wrapper\">\n  <input\n    type=\"checkbox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"_isIndeterminate() ? 'mixed' : null\"\n    [checked]=\"_isChecked()\"\n    [indeterminate]=\"_isIndeterminate()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-pseudo-checkbox__icon\" aria-hidden=\"true\">\n    @if (_isIndeterminate()) {\n      <ids-icon fontIcon=\"remove\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"done\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n" }]
-        }] });
+        }], propDecorators: { checkboxState: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxState", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class IdsOptionComponent extends ComponentBase {
     get _hostName() {
@@ -675,19 +675,19 @@ class IdsOptionComponent extends ComponentBase {
         this._element = inject(ElementRef);
         this.group = inject(IDS_OPTION_GROUP, { optional: true });
         this._textElement = viewChild.required('text');
-        this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-        this._active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
-        this.size = computed(() => this._parent.parentSize(), ...(ngDevMode ? [{ debugName: "size" }] : []));
-        this.variant = computed(() => this._parent.parentVariant(), ...(ngDevMode ? [{ debugName: "variant" }] : []));
-        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-        this.explicitViewValue = input(null, ...(ngDevMode ? [{ debugName: "explicitViewValue", alias: 'viewValue' }] : [{ alias: 'viewValue' }]));
-        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled', transform: coerceBooleanAttribute }] : [{ alias: 'disabled', transform: coerceBooleanAttribute }]));
+        this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this._active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+        this.size = computed(() => this._parent.parentSize(), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = computed(() => this._parent.parentVariant(), ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.explicitViewValue = input(null, { ...(ngDevMode ? { debugName: "explicitViewValue" } : /* istanbul ignore next */ {}), alias: 'viewValue' });
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: coerceBooleanAttribute });
         this.disabled = false; // Do not delete this class member, until ListKeyManagerOption requires: `disabled: boolean`
-        this._groupOrOptionIsDisabled = computed(() => this.group?.disabled() || this.disabledInput(), ...(ngDevMode ? [{ debugName: "_groupOrOptionIsDisabled" }] : []));
+        this._groupOrOptionIsDisabled = computed(() => this.group?.disabled() || this.disabledInput(), ...(ngDevMode ? [{ debugName: "_groupOrOptionIsDisabled" }] : /* istanbul ignore next */ []));
         this._multiSelect = Boolean(this._parent?.multiSelect());
         // eslint-disable-next-line @angular-eslint/no-output-on-prefix
         this.onSelectionChange = output();
-        this.viewValue = computed(() => this.explicitViewValue() || this._textElement().nativeElement.textContent || '', ...(ngDevMode ? [{ debugName: "viewValue" }] : []));
+        this.viewValue = computed(() => this.explicitViewValue() || this._textElement().nativeElement.textContent || '', ...(ngDevMode ? [{ debugName: "viewValue" }] : /* istanbul ignore next */ []));
         this._hostClasses = computed(() => this._getHostClasses([
             this.selected() ? 'selected' : null,
             this._active() ? 'active' : null,
@@ -695,10 +695,10 @@ class IdsOptionComponent extends ComponentBase {
             this._multiSelect ? 'multiselect' : null,
             this.size(),
             this.variant(),
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
-        this._pseudoCheckboxState = computed(() => (this.selected() ? IdsPseudoCheckboxState.CHECKED : IdsPseudoCheckboxState.UNCHECKED), ...(ngDevMode ? [{ debugName: "_pseudoCheckboxState" }] : []));
-        this.embeddedPseudoCheckboxSize = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "embeddedPseudoCheckboxSize" }] : []));
-        this.embeddedPseudoCheckboxVariant = signal(IdsFormFieldVariant.SURFACE, ...(ngDevMode ? [{ debugName: "embeddedPseudoCheckboxVariant" }] : []));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
+        this._pseudoCheckboxState = computed(() => (this.selected() ? IdsPseudoCheckboxState.CHECKED : IdsPseudoCheckboxState.UNCHECKED), ...(ngDevMode ? [{ debugName: "_pseudoCheckboxState" }] : /* istanbul ignore next */ []));
+        this.embeddedPseudoCheckboxSize = computed(() => this.size(), ...(ngDevMode ? [{ debugName: "embeddedPseudoCheckboxSize" }] : /* istanbul ignore next */ []));
+        this.embeddedPseudoCheckboxVariant = signal(IdsFormFieldVariant.SURFACE, ...(ngDevMode ? [{ debugName: "embeddedPseudoCheckboxVariant" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.disabled = this.disabledInput();
         });
@@ -761,15 +761,15 @@ class IdsOptionComponent extends ComponentBase {
             this.onSelectionChange.emit(new IdsOptionSelectionChange(this, selected, isUserInput));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsOptionComponent, isStandalone: true, selector: "ids-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, explicitViewValue: { classPropertyName: "explicitViewValue", publicName: "viewValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled.toString()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsOptionComponent, isStandalone: true, selector: "ids-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, explicitViewValue: { classPropertyName: "explicitViewValue", publicName: "viewValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled.toString()" } }, providers: [
             {
                 provide: IDS_PSEUDO_CHECKBOX_PARENT,
                 useExisting: IdsOptionComponent,
             },
         ], viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["text"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_multiSelect) {\n  <ids-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"_groupOrOptionIsDisabled()\" [checkboxState]=\"_pseudoCheckboxState()\" />\n}\n\n<div #text class=\"ids-option__text\"><ng-content /></div>\n\n@if (!_multiSelect && selected()) {\n  <ids-icon fontIcon=\"done\" />\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: PseudoCheckboxComponent, selector: "ids-pseudo-checkbox", inputs: ["checkboxState", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-option', imports: [
                         IdsIconComponent,
@@ -786,7 +786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         '(click)': 'selectViaInteraction()',
                         '(keydown)': '_handleKeydown($event)',
                     }, template: "@if (_multiSelect) {\n  <ids-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"_groupOrOptionIsDisabled()\" [checkboxState]=\"_pseudoCheckboxState()\" />\n}\n\n<div #text class=\"ids-option__text\"><ng-content /></div>\n\n@if (!_multiSelect && selected()) {\n  <ids-icon fontIcon=\"done\" />\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { _textElement: [{ type: i0.ViewChild, args: ['text', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], explicitViewValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewValue", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
 function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
     if (optionGroups.length) {
         let groupCounter = 0;
@@ -816,42 +816,42 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
     }
     constructor() {
         super();
-        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel", alias: 'aria-label' }] : [{ alias: 'aria-label' }]));
-        this.ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby", alias: 'aria-labelledby' }] : [{ alias: 'aria-labelledby' }]));
-        this.ariaLabelClear = input('', ...(ngDevMode ? [{ debugName: "ariaLabelClear" }] : []));
-        this.ariaLabelLoading = input('', ...(ngDevMode ? [{ debugName: "ariaLabelLoading" }] : []));
-        this.multiSelect = input(false, ...(ngDevMode ? [{ debugName: "multiSelect", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
-        this.sortCompareFn = input((a, b) => a.viewValue.localeCompare(b.viewValue), ...(ngDevMode ? [{ debugName: "sortCompareFn" }] : []));
-        this.valueCompareFn = input((o1, o2) => JSON.stringify(o1) === JSON.stringify(o2), ...(ngDevMode ? [{ debugName: "valueCompareFn" }] : []));
-        this.trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
-        this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
-        this.panelOpen = model(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : []));
-        this.options = contentChildren(IdsOptionComponent, ...(ngDevMode ? [{ debugName: "options", descendants: true }] : [{ descendants: true }]));
-        this.optionGroups = contentChildren(IDS_OPTION_GROUP, ...(ngDevMode ? [{ debugName: "optionGroups", descendants: true }] : [{ descendants: true }]));
-        this.overlayPanel = viewChild('overlayPanel', ...(ngDevMode ? [{ debugName: "overlayPanel" }] : []));
-        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel", read: (ElementRef) }] : [{ read: (ElementRef) }]));
-        this.appearance = input(IdsIconButtonAppearance.STANDARD, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-        this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : []));
-        this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : []));
-        this.spinnerVariant = input(IdsSpinnerVariant.SURFACE, ...(ngDevMode ? [{ debugName: "spinnerVariant" }] : []));
-        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        this.ariaLabelledby = input('', { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+        this.ariaLabelClear = input('', ...(ngDevMode ? [{ debugName: "ariaLabelClear" }] : /* istanbul ignore next */ []));
+        this.ariaLabelLoading = input('', ...(ngDevMode ? [{ debugName: "ariaLabelLoading" }] : /* istanbul ignore next */ []));
+        this.multiSelect = input(false, { ...(ngDevMode ? { debugName: "multiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: coerceNumberAttribute });
+        this.sortCompareFn = input((a, b) => a.viewValue.localeCompare(b.viewValue), ...(ngDevMode ? [{ debugName: "sortCompareFn" }] : /* istanbul ignore next */ []));
+        this.valueCompareFn = input((o1, o2) => JSON.stringify(o1) === JSON.stringify(o2), ...(ngDevMode ? [{ debugName: "valueCompareFn" }] : /* istanbul ignore next */ []));
+        this.trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+        this.panelOpen = model(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+        this.options = contentChildren(IdsOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+        this.optionGroups = contentChildren(IDS_OPTION_GROUP, { ...(ngDevMode ? { debugName: "optionGroups" } : /* istanbul ignore next */ {}), descendants: true });
+        this.overlayPanel = viewChild('overlayPanel', ...(ngDevMode ? [{ debugName: "overlayPanel" }] : /* istanbul ignore next */ []));
+        this.panel = viewChild('panel', { ...(ngDevMode ? { debugName: "panel" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+        this.appearance = input(IdsIconButtonAppearance.STANDARD, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : /* istanbul ignore next */ []));
+        this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : /* istanbul ignore next */ []));
+        this.spinnerVariant = input(IdsSpinnerVariant.SURFACE, ...(ngDevMode ? [{ debugName: "spinnerVariant" }] : /* istanbul ignore next */ []));
+        this.isLoading = input(false, { ...(ngDevMode ? { debugName: "isLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.onChange = () => { };
         this.onTouched = () => { };
         this._parentFormField = inject(IdsFormFieldComponent);
         // declarations of IdsFormFieldControl variables
         this._defaultConfig = this._getDefaultConfig(defaultConfig$1, IDS_AUTOCOMPLETE_DEFAULT_CONFIG);
-        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
-        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
+        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._hostClasses = computed(() => this._getHostClasses([
             this.parentSize(),
             this.disabled() ? 'disabled' : null,
-        ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
         this._panelClasses = computed(() => [
             'ids-autocomplete-overlay-panel',
             this.panelClasses(),
-        ].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
+        ].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : /* istanbul ignore next */ []));
         // #region IdsFormFieldControl implementation
         this.onContainerClick = (event) => {
             if (!this.readonly() && !this.disabled()) {
@@ -955,10 +955,10 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
                     patchEffect.destroy();
                 }
             });
-        }, ...(ngDevMode ? [{ debugName: "patchEffect", injector: this._injector, manualCleanup: true }] : [{ injector: this._injector, manualCleanup: true }]));
+        }, { ...(ngDevMode ? { debugName: "patchEffect" } : /* istanbul ignore next */ {}), injector: this._injector, manualCleanup: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClear: { classPropertyName: "ariaLabelClear", publicName: "ariaLabelClear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelLoading: { classPropertyName: "ariaLabelLoading", publicName: "ariaLabelLoading", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, spinnerVariant: { classPropertyName: "spinnerVariant", publicName: "spinnerVariant", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelOpen: "panelOpenChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClear: { classPropertyName: "ariaLabelClear", publicName: "ariaLabelClear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelLoading: { classPropertyName: "ariaLabelLoading", publicName: "ariaLabelLoading", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, spinnerVariant: { classPropertyName: "spinnerVariant", publicName: "spinnerVariant", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelOpen: "panelOpenChange" }, providers: [
             { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsAutocompleteComponent },
             { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsAutocompleteComponent },
             {
@@ -1026,7 +1026,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
     </span>
   `, isInline: true, dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled", "allowCustomContent"] }, { kind: "component", type: IdsOverlayPanelComponent, selector: "ids-overlay-panel", inputs: ["open", "origin", "positions", "appearance", "size", "variant", "panelClasses", "width"], outputs: ["openChange"] }, { kind: "component", type: IdsSpinnerComponent, selector: "ids-spinner", inputs: ["size", "sizeCollection", "variant", "isTrack", "aria-label"] }, { kind: "directive", type: IdsTooltipDirective, selector: "[idsTooltip]", inputs: ["idsTooltip", "idsTooltipPosition", "idsTooltipSize", "idsTooltipVariant", "idsTooltipShowDelay", "idsTooltipHideDelay", "idsTooltipDisabled", "idsTooltipTouchGestures", "idsTooltipTextAlign", "idsTooltipClass", "idsTooltipShowPointer", "idsTooltipIgnoreClipped"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ids-autocomplete',
@@ -1107,7 +1107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaLabelClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelClear", required: false }] }], ariaLabelLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelLoading", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], sortCompareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortCompareFn", required: false }] }], valueCompareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueCompareFn", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], panelClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClasses", required: false }] }], panelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOpen", required: false }] }, { type: i0.Output, args: ["panelOpenChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsOptionComponent), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IDS_OPTION_GROUP), { ...{ descendants: true }, isSignal: true }] }], overlayPanel: [{ type: i0.ViewChild, args: ['overlayPanel', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { ...{ read: (ElementRef) }, isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], spinnerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerVariant", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], successStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "successStateMatcher", required: false }] }] } });
 
 const LIVE_ANNOUNCER_DURATION = 10000;
 class IdsAutocompleteTriggerDirective {
@@ -1121,9 +1121,9 @@ class IdsAutocompleteTriggerDirective {
             .filter((option) => selectedValues.includes(option.value()));
     }
     constructor() {
-        this.autocomplete = input.required(...(ngDevMode ? [{ debugName: "autocomplete", alias: 'idsAutocompleteTriggerFor' }] : [{ alias: 'idsAutocompleteTriggerFor' }]));
-        this._disabled = computed(() => this.autocomplete().disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-        this._readonly = computed(() => this.autocomplete().readonly(), ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+        this.autocomplete = input.required({ ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), alias: 'idsAutocompleteTriggerFor' });
+        this._disabled = computed(() => this.autocomplete().disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        this._readonly = computed(() => this.autocomplete().readonly(), ...(ngDevMode ? [{ debugName: "_readonly" }] : /* istanbul ignore next */ []));
         this._inputElement = inject((ElementRef));
         this._liveAnnouncer = inject(LiveAnnouncer);
         this._renderer = inject(Renderer2);
@@ -1446,17 +1446,17 @@ class IdsAutocompleteTriggerDirective {
         this._renderer.setProperty(input, 'value', value);
         input.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsAutocompleteTriggerDirective, isStandalone: true, selector: "input[idsAutocompleteTriggerFor]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "idsAutocompleteTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.role": "_disabled() ? null : \"combobox\"", "attr.autocomplete": "_disabled() ? \"off\" : \"auto\"", "attr.aria-autocomplete": "_disabled() ? null : \"list\"", "attr.aria-activedescendant": "_getAriaActiveDescendant()", "attr.aria-owns": "autocomplete().panelOpen() ? autocomplete().id() + \"-panel\" : null", "attr.aria-expanded": "_disabled() ? null : autocomplete().panelOpen().toString()", "attr.aria-controls": "(_disabled() || !autocomplete().panelOpen()) ? null : autocomplete()?.id()", "attr.aria-haspopup": "_disabled() ? null : \"listbox\"", "attr.tabindex": "_disabled() ? -1 : autocomplete().tabIndex()", "attr.aria-required": "autocomplete().required().toString()", "attr.aria-disabled": "_disabled().toString()", "attr.aria-invalid": "autocomplete().hasErrorState()", "attr.readonly": "_readonly() ? \"true\" : null", "disabled": "_disabled()" }, classAttribute: "ids-form-field-control" }, exportAs: ["idsAutocompleteTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsAutocompleteTriggerDirective, isStandalone: true, selector: "input[idsAutocompleteTriggerFor]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "idsAutocompleteTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.role": "_disabled() ? null : \"combobox\"", "attr.autocomplete": "\"off\"", "attr.aria-autocomplete": "_disabled() ? null : \"list\"", "attr.aria-activedescendant": "_getAriaActiveDescendant()", "attr.aria-owns": "autocomplete().panelOpen() ? autocomplete().id() + \"-panel\" : null", "attr.aria-expanded": "_disabled() ? null : autocomplete().panelOpen().toString()", "attr.aria-controls": "(_disabled() || !autocomplete().panelOpen()) ? null : autocomplete()?.id()", "attr.aria-haspopup": "_disabled() ? null : \"listbox\"", "attr.tabindex": "_disabled() ? -1 : autocomplete().tabIndex()", "attr.aria-required": "autocomplete().required().toString()", "attr.aria-disabled": "_disabled().toString()", "attr.aria-invalid": "autocomplete().hasErrorState()", "attr.readonly": "_readonly() ? \"true\" : null", "disabled": "_disabled()" }, classAttribute: "ids-form-field-control" }, exportAs: ["idsAutocompleteTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[idsAutocompleteTriggerFor]',
                     host: {
                         class: 'ids-form-field-control',
                         '[attr.role]': '_disabled() ? null : "combobox"',
-                        '[attr.autocomplete]': '_disabled() ? "off" : "auto"',
+                        '[attr.autocomplete]': '"off"',
                         '[attr.aria-autocomplete]': '_disabled() ? null : "list"',
                         '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
                         '[attr.aria-owns]': 'autocomplete().panelOpen() ? autocomplete().id() + "-panel" : null',
@@ -1475,18 +1475,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                     },
                     exportAs: 'idsAutocompleteTrigger',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "idsAutocompleteTriggerFor", required: true }] }] } });
 
 class IdsAutocompleteChipListComponent {
     constructor() {
-        this.autocompleteTrigger = input.required(...(ngDevMode ? [{ debugName: "autocompleteTrigger", alias: 'for' }] : [{ alias: 'for' }]));
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-        this.appearance = input(IdsChipAppearance.OUTLINED, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-        this.size = input(IdsSize.COMPACT, ...(ngDevMode ? [{ debugName: "size" }] : []));
-        this.variant = input(IdsChipVariant.SURFACE, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteChipListComponent, isStandalone: true, selector: "ids-autocomplete-chip-list", inputs: { autocompleteTrigger: { classPropertyName: "autocompleteTrigger", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-autocomplete-chip-list" }, ngImport: i0, template: `
+        this.autocompleteTrigger = input.required({ ...(ngDevMode ? { debugName: "autocompleteTrigger" } : /* istanbul ignore next */ {}), alias: 'for' });
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.appearance = input(IdsChipAppearance.OUTLINED, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.size = input(IdsSize.COMPACT, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.variant = input(IdsChipVariant.SURFACE, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsAutocompleteChipListComponent, isStandalone: true, selector: "ids-autocomplete-chip-list", inputs: { autocompleteTrigger: { classPropertyName: "autocompleteTrigger", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-autocomplete-chip-list" }, ngImport: i0, template: `
     @for (option of autocompleteTrigger().selected; track $index) {
       <button
         idsChip
@@ -1503,7 +1503,7 @@ class IdsAutocompleteChipListComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: IdsChipComponent, selector: "ids-chip, button[idsChip]", inputs: ["removable", "appearance", "size", "variant", "disabled", "tabIndex"], outputs: ["removed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteChipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteChipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ids-autocomplete-chip-list',
@@ -1528,15 +1528,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
     }
   `,
                 }]
-        }] });
+        }], propDecorators: { autocompleteTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class IdsAutocompleteHintComponent {
     constructor() {
-        this.variant = input(IdsMessageVariant.SURFACE, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-        this.size = input(IdsSize.COMFORTABLE, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = input(IdsMessageVariant.SURFACE, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(IdsSize.COMFORTABLE, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: IdsAutocompleteHintComponent, isStandalone: true, selector: "ids-autocomplete-hint", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-autocomplete-hint" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: IdsAutocompleteHintComponent, isStandalone: true, selector: "ids-autocomplete-hint", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-autocomplete-hint" }, ngImport: i0, template: `
     <div class="ids-autocomplete-hint__wrapper">
       <ids-hint-message [size]="size()" [variant]="variant()">
         <ng-content />
@@ -1544,7 +1544,7 @@ class IdsAutocompleteHintComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: IdsHintMessageComponent, selector: "ids-hint-message" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteHintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteHintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ids-autocomplete-hint',
@@ -1560,20 +1560,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
     </div>
   `,
                 }]
-        }] });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class IdsFieldsetRowComponent extends ComponentBase {
     constructor() {
         super(...arguments);
-        this._hostClasses = signal(this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this._hostClasses = signal(this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'fieldset-row';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: IdsFieldsetRowComponent, isStandalone: true, selector: "ids-fieldset-row", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFieldsetRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: IdsFieldsetRowComponent, isStandalone: true, selector: "ids-fieldset-row", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsFieldsetRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-fieldset-row', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
         }] });
@@ -1607,19 +1607,19 @@ class IdsInputDirective extends IdsFormFieldControl {
         this._elementRef = inject(ElementRef);
         this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
         this._focused = false;
-        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
-        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
-        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
-        this._hostClasses = computed(() => this._getHostClasses([], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : /* istanbul ignore next */ []));
+        this._hostClasses = computed(() => this._getHostClasses([], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
         this._validateTypeEffect = effect(() => {
             this._validateType(this.type());
-        }, ...(ngDevMode ? [{ debugName: "_validateTypeEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_validateTypeEffect" }] : /* istanbul ignore next */ []));
         /**
          * Should be an arrow function in order to handle `this` outside of this class
          */
         this.onContainerClick = () => {
-            if (!this._focused && !this.readonly() && !this.disabled) {
+            if (!this._focused && !this.readonly() && !this.disabled()) {
                 this.focus();
             }
         };
@@ -1656,15 +1656,15 @@ class IdsInputDirective extends IdsFormFieldControl {
             this._disabled.set(event.status === 'DISABLED');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsInputDirective, isStandalone: true, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)" }, properties: { "attr.placeholder": "placeholder()", "attr.disabled": "disabled() ? \"\" : null", "attr.readonly": "readonly() ? \"\" : null" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsInputDirective, isStandalone: true, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)" }, properties: { "attr.placeholder": "placeholder()", "attr.disabled": "disabled() ? \"\" : null", "attr.readonly": "readonly() ? \"\" : null" } }, providers: [
             {
                 provide: IDS_FORM_FIELD_CONTROL,
                 useExisting: IdsInputDirective,
             },
         ], exportAs: ["idsInput"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[idsInput][ngModel]:not([formControl]):not([formControlName]),
@@ -1689,7 +1689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         '(blur)': '_focusChanged(false)',
                     },
                 }]
-        }] });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], successStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "successStateMatcher", required: false }] }] } });
 
 const Message = {
     HINT: 'hint',
@@ -1702,35 +1702,35 @@ class IdsOptionGroupComponent extends ComponentBase {
         super(...arguments);
         this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
         this._inert = this._parent?.inertGroups ?? false;
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
-        this._labelId = computed(() => `${this.id()}-label`, ...(ngDevMode ? [{ debugName: "_labelId" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
+        this._labelId = computed(() => `${this.id()}-label`, ...(ngDevMode ? [{ debugName: "_labelId" }] : /* istanbul ignore next */ []));
         this._hostClasses = computed(() => this._getHostClasses([
             this.disabled() ? 'disabled' : null,
             this._parent.parentSize(),
             this._parent.parentVariant(),
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
         return 'option-group';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: IdsOptionGroupComponent, isStandalone: true, selector: "ids-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled().toString()", "attr.aria-labelledby": "_inert ? null : _labelId()" } }, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], usesInheritance: true, ngImport: i0, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: IdsOptionGroupComponent, isStandalone: true, selector: "ids-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled().toString()", "attr.aria-labelledby": "_inert ? null : _labelId()" } }, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], usesInheritance: true, ngImport: i0, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsOptionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-option-group', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], host: {
                         '[attr.role]': '_inert ? null : "group"',
                         '[attr.aria-disabled]': '_inert ? null : disabled().toString()',
                         '[attr.aria-labelledby]': '_inert ? null : _labelId()',
                     }, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n" }]
-        }] });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class IdsLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsLabelDirective, isStandalone: true, selector: "ids-label", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsLabelDirective, isStandalone: true, selector: "ids-label", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ids-label',