@i-cell/ids-angular 0.1.13 → 0.2.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, input, contentChildren, computed, inject, Injector, effect, booleanAttribute, Input, ElementRef, ChangeDetectorRef, viewChild, contentChild, isDevMode, output } from '@angular/core';
+import { Injectable, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, Directive, input, contentChildren, computed, inject, Injector, effect, booleanAttribute, Input, ElementRef, ChangeDetectorRef, viewChild, contentChild, isDevMode, output } from '@angular/core';
 import { ComponentBase, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { NgForm, FormGroupDirective, NgControl, Validators, StatusChangeEvent } from '@angular/forms';
-import { Subject, observeOn, asapScheduler, tap, switchMap, startWith, of } from 'rxjs';
+import { Subject, observeOn, asapScheduler, tap, switchMap, of, startWith } from 'rxjs';
 import { IdsIconComponent } from '@i-cell/ids-angular/icon';
 import { hasModifierKey } from '@angular/cdk/keycodes';
 
@@ -13,10 +13,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: "19.1.2", ngImport: i0, type: ErrorStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -50,10 +50,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: "19.1.2", ngImport: i0, type: SuccessStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: SuccessStateMatcher, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: SuccessStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -84,15 +84,15 @@ class SuccessStateTracker {
 class IdsFieldsetRowComponent extends ComponentBase {
     constructor() {
         super(...arguments);
-        this._hostClasses = signal(this._getHostClasses([]));
+        this._hostClasses = signal(this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
     get _hostName() {
         return 'fieldset-row';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-fieldset-row', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
         }] });
@@ -114,10 +114,10 @@ function IDS_FIELDSET_DEFAULT_CONFIG_FACTORY() {
 }
 
 class IdsFieldsetMessageDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsFieldsetMessageDirective, isStandalone: true, selector: "[idsFieldsetMessage]", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetMessageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetMessageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsFieldsetMessage]',
@@ -130,23 +130,23 @@ class IdsFieldsetComponent extends ComponentBaseWithDefaults {
     constructor() {
         super(...arguments);
         this._defaultConfig = this._getDefaultConfig(defaultConfig$3, IDS_FIELDSET_DEFAULT_CONFIG);
-        this.size = input(this._defaultConfig.size);
-        this.variant = input(this._defaultConfig.variant);
-        this.legend = input('');
-        this._fieldsetMessage = contentChildren(IdsFieldsetMessageDirective);
-        this._hasMessage = computed(() => this._fieldsetMessage().length > 0);
+        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._hostClasses = computed(() => this._getHostClasses([
             this.size(),
             this.variant(),
-        ]));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
     get _hostName() {
         return 'fieldset';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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" }]
         }] });
@@ -160,22 +160,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);
+        this.ngControl = signal(null, ...(ngDevMode ? [{ debugName: "ngControl" }] : []));
         this.errorStateChanges = new Subject();
         this.successStateChanges = new Subject();
-        this.canHandleSuccessState = input(false);
-        this.hasErrorState = signal(false);
-        this.hasSuccessState = signal(false);
+        this.canHandleSuccessState = input(false, ...(ngDevMode ? [{ debugName: "canHandleSuccessState" }] : []));
+        this.hasErrorState = signal(false, ...(ngDevMode ? [{ debugName: "hasErrorState" }] : []));
+        this.hasSuccessState = signal(false, ...(ngDevMode ? [{ debugName: "hasSuccessState" }] : []));
         this._canHandleSuccessStateEffect = effect(() => {
             this._setSuccessStateTracker(this.canHandleSuccessState());
-        });
+        }, ...(ngDevMode ? [{ debugName: "_canHandleSuccessStateEffect" }] : []));
         /** Handles the `disabled` input binding */
-        this.disabledInput = input(false, { transform: booleanAttribute, alias: 'disabled' });
+        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", transform: booleanAttribute, alias: 'disabled' }] : [{ transform: booleanAttribute, alias: 'disabled' }]));
         /** Stores the `disabled` state internally */
-        this._disabled = signal(this.disabledInput());
+        this._disabled = signal(this.disabledInput(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
         /** 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());
-        this.readonly = input(false, { transform: booleanAttribute });
+        this.disabled = computed(() => this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ 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';
@@ -184,9 +184,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]());
-        });
-        this.required = input(false, { transform: booleanAttribute });
-        this.placeholder = input('');
+        }, ...(ngDevMode ? [{ debugName: "_disabledInputEffect" }] : []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         // Get the NgControl reference as soon as we can
         queueMicrotask(() => {
             this.ngControl.set(this._injector.get(NgControl, null, { self: true }));
@@ -218,10 +218,10 @@ class IdsFormFieldControl extends ComponentBaseWithDefaults {
             this.hasSuccessState.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldControl, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -237,10 +237,10 @@ function IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY() {
 }
 
 class IdsFormFieldActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsFormFieldActionDirective, isStandalone: true, selector: "[idsFormFieldAction]", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsFormFieldAction]',
@@ -255,10 +255,10 @@ class IdsPrefixDirective {
     set idsLeadingIcon(value) {
         this.isLeadingIcon = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsPrefixDirective, isStandalone: true, selector: "[idsPrefix], [idsLeadingIcon]", inputs: { idsLeadingIcon: "idsLeadingIcon" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsPrefix], [idsLeadingIcon]',
@@ -276,10 +276,10 @@ class IdsSuffixDirective {
     set idsTrailingIcon(value) {
         this.isTrailingIcon = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsSuffixDirective, isStandalone: true, selector: "[idsSuffix], [idsTrailingIcon]", inputs: { idsTrailingIcon: "idsTrailingIcon" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsSuffix], [idsTrailingIcon]',
@@ -348,7 +348,7 @@ class IdsErrorDefinitionDirective {
         /**
          * The validation error's identifier code
          */
-        this.code = input.required();
+        this.code = input.required(...(ngDevMode ? [{ debugName: "code" }] : []));
         this._elementRef = inject(ElementRef);
     }
     /**
@@ -369,10 +369,10 @@ class IdsErrorDefinitionDirective {
             message: () => self.errorMessage,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorDefinitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorDefinitionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorDefinitionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ids-error-def',
@@ -380,10 +380,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
         }] });
 
 class IdsMessageSuffixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsMessageSuffixDirective, isStandalone: true, selector: "[idsMessageSuffix]", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsMessageSuffix]',
@@ -417,24 +417,24 @@ class IdsMessageDirective extends ComponentBaseWithDefaults {
         super(...arguments);
         this._parent = inject(IDS_MESSAGE_PARENT_FORM_FIELD, { skipSelf: true, optional: true });
         this._defaultConfig = this._getDefaultConfig(defaultConfig$2, IDS_MESSAGE_DEFAULT_CONFIG);
-        this.size = input(this._defaultConfig.size);
-        this.variant = input(this._defaultConfig.variant);
-        this._parentOrSelfSize = computed(() => this._parent?.size() ?? this.size());
-        this._parentOrSelfVariant = computed(() => this._parent?.variant() ?? this.variant());
-        this._parentDisabled = computed(() => this._parent?.disabled());
+        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._hostClasses = computed(() => this._getHostClasses([
             this._parentOrSelfSize(),
             this._parentOrSelfVariant(),
             this._parentDisabled() ? 'disabled' : null,
-        ]));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
     get _hostName() {
         return 'message';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsMessage]',
@@ -449,12 +449,12 @@ class IdsErrorMessageComponent extends ComponentBase {
     constructor() {
         super();
         this._parent = inject(IdsFormFieldComponent, { skipSelf: true });
-        this._control = signal(null);
-        this._errorDefDirs = contentChildren(IdsErrorDefinitionDirective);
-        this._errorDefs = computed(() => this._errorDefDirs().map((errorDefDir) => errorDefDir.toErrorMessageMapping()));
-        this._validationError = signal(null);
-        this._hostClasses = computed(() => this._getHostClasses([]));
-        this.suffixes = contentChildren(IdsMessageSuffixDirective);
+        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" }] : []));
         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();
@@ -477,19 +477,19 @@ class IdsErrorMessageComponent extends ComponentBase {
     _getValidationErrorMessage(messageOrFn) {
         return messageOrFn instanceof Function ? messageOrFn() : messageOrFn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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=\"exclamation-circle\" 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: "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=\"exclamation-circle\" 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: "19.1.2", ngImport: i0, type: IdsErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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=\"exclamation-circle\" 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: () => [] });
 
 class IdsMessagePrefixDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessagePrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsMessagePrefixDirective, isStandalone: true, selector: "[idsMessagePrefix]", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessagePrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessagePrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[idsMessagePrefix]',
@@ -499,13 +499,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
 
 class IdsHintMessageComponent {
     constructor() {
-        this.prefixes = contentChildren(IdsMessagePrefixDirective);
-        this.suffixes = contentChildren(IdsMessageSuffixDirective);
+        this.prefixes = contentChildren(IdsMessagePrefixDirective, ...(ngDevMode ? [{ debugName: "prefixes" }] : []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsHintMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsHintMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsHintMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-hint-message', imports: [], host: {
                         class: 'ids-hint-message',
@@ -523,16 +523,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
 class IdsSuccessMessageComponent extends ComponentBase {
     constructor() {
         super(...arguments);
-        this._hostClasses = computed(() => this._getHostClasses([]));
-        this.suffixes = contentChildren(IdsMessageSuffixDirective);
+        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
     }
     get _hostName() {
         return 'success-message';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" 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: "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    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" 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: "19.1.2", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" 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" }]
         }] });
@@ -546,34 +546,34 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
         this._defaultConfig = this._getDefaultConfig(defaultConfig$1, IDS_FORM_FIELD_DEFAULT_CONFIG);
         this._fieldWrapper = viewChild.required('fieldWrapper');
         this._child = contentChild.required(IDS_FORM_FIELD_CONTROL);
-        this._hintMessages = contentChildren(IdsHintMessageComponent, { descendants: true });
-        this._successMessages = contentChildren(IdsSuccessMessageComponent, { descendants: true });
-        this._errorMessages = contentChildren(IdsErrorMessageComponent, { descendants: true });
-        this._actions = contentChildren(IdsFormFieldActionDirective);
-        this._prefixes = contentChildren(IdsPrefixDirective);
-        this._suffixes = contentChildren(IdsSuffixDirective);
-        this._hasActions = computed(() => Boolean(this._actions().length));
-        this._hasLeadingIcon = computed(() => Boolean(this._prefixes().filter((prefix) => prefix.isLeadingIcon).length));
-        this._hasPrefix = computed(() => Boolean(this._prefixes().filter((prefix) => !prefix.isLeadingIcon).length));
-        this._hasSuffix = computed(() => Boolean(this._suffixes().filter((suffix) => !suffix.isTrailingIcon).length));
-        this._hasTrailingIcon = computed(() => Boolean(this._suffixes().filter((suffix) => suffix.isTrailingIcon).length));
-        this._inputId = computed(() => this._child()?.id());
-        this.size = input(this._defaultConfig.size);
-        this.variant = input(this._defaultConfig.variant);
-        this.parentOrSelfSize = computed(() => this._parentFieldset?.size() ?? this.size());
-        this.parentOrSelfVariant = computed(() => this._parentFieldset?.variant() ?? this.variant());
-        this.controlDir = computed(() => this._child().ngControl());
-        this.disabled = computed(() => Boolean(this._child().disabled()));
-        this.readonly = computed(() => Boolean(this._child().readonly()));
-        this._hasErrorState = computed(() => Boolean(this._child().hasErrorState()));
-        this._hasSuccessState = computed(() => Boolean(this._child().hasSuccessState()));
+        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._hostClasses = computed(() => this._getHostClasses([
             this.parentOrSelfSize(),
             this.parentOrSelfVariant(),
             this.disabled() ? 'disabled' : null,
             this._hasErrorState() ? 'invalid' : null,
             this._hasSuccessState() ? 'valid' : null,
-        ]));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
         this._displayedMessages = computed(() => {
             if (this._errorMessages().length > 0 && this._hasErrorState()) {
                 return 'error';
@@ -585,7 +585,7 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
                 return 'hint';
             }
             return undefined;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_displayedMessages" }] : []));
         this.hasRequiredValidator = computed(() => {
             const control = this.controlDir()?.control;
             return this._child().required()
@@ -594,7 +594,7 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
                 || control?.hasValidator(IdsValidators.required)
                 || control?.hasValidator(IdsValidators.requiredTrue)
                 || control?.hasValidator(IdsValidators.requiredFalse);
-        });
+        }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
     }
     get _hostName() {
         return 'form-field';
@@ -608,10 +608,10 @@ class IdsFormFieldComponent extends ComponentBaseWithDefaults {
             containerClick(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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" }]
         }] });
@@ -645,14 +645,14 @@ class IdsInputDirective extends IdsFormFieldControl {
         this._elementRef = inject(ElementRef);
         this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
         this._focused = false;
-        this.name = input();
-        this.type = input('text');
-        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher));
-        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher));
-        this._hostClasses = computed(() => this._getHostClasses([], [formFieldControlClass]));
+        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._validateTypeEffect = effect(() => {
             this._validateType(this.type());
-        });
+        }, ...(ngDevMode ? [{ debugName: "_validateTypeEffect" }] : []));
         /**
          * Should be an arrow function in order to handle `this` outside of this class
          */
@@ -694,15 +694,15 @@ class IdsInputDirective extends IdsFormFieldControl {
             this._disabled.set(event.status === 'DISABLED');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", 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: "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: [
             {
                 provide: IDS_FORM_FIELD_CONTROL,
                 useExisting: IdsInputDirective,
             },
         ], exportAs: ["idsInput"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[idsInput][ngModel]:not([formControl]):not([formControlName]),
@@ -752,22 +752,22 @@ class IdsOptionGroupComponent extends ComponentBase {
         super(...arguments);
         this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
         this._inert = this._parent?.inertGroups ?? false;
-        this.label = input();
-        this.disabled = input(false, { transform: coerceBooleanAttribute });
-        this._labelId = computed(() => `${this.id()}-label`);
+        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._hostClasses = computed(() => this._getHostClasses([
             this.disabled() ? 'disabled' : null,
             this._parent.parentSize(),
             this._parent.parentVariant(),
-        ]));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
     get _hostName() {
         return 'option-group';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsOptionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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"',
@@ -788,23 +788,23 @@ class PseudoCheckboxComponent extends ComponentBase {
     constructor() {
         super(...arguments);
         this._parent = inject(IDS_PSEUDO_CHECKBOX_PARENT, { optional: true });
-        this.checkboxState = input(IdsPseudoCheckboxState.UNCHECKED);
-        this.disabled = input(false, { transform: coerceBooleanAttribute });
-        this._isChecked = computed(() => this.checkboxState() === IdsPseudoCheckboxState.CHECKED);
-        this._isIndeterminate = computed(() => this.checkboxState() === IdsPseudoCheckboxState.INDETERMINATE);
+        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._hostClasses = computed(() => this._getHostClasses([
             this._parent?.embeddedPseudoCheckboxSize(),
             this._parent?.embeddedPseudoCheckboxVariant(),
             this.disabled() ? 'disabled' : null,
-        ]));
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
     get _hostName() {
         return 'pseudo-checkbox';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: PseudoCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"check\" 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: "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=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"check\" 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: "19.1.2", ngImport: i0, type: PseudoCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"check\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n" }]
         }] });
@@ -819,18 +819,18 @@ 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);
-        this._active = signal(false);
-        this.size = computed(() => this._parent.parentSize());
-        this.variant = computed(() => this._parent.parentVariant());
-        this.value = input();
-        this.explicitViewValue = input(null, { alias: 'viewValue' });
-        this.disabledInput = input(false, { alias: 'disabled', transform: coerceBooleanAttribute });
+        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.disabled = false; // Do not delete this class member, until ListKeyManagerOption requires: `disabled: boolean`
-        this._groupOrOptionIsDisabled = computed(() => this.group?.disabled() || this.disabledInput());
+        this._groupOrOptionIsDisabled = computed(() => this.group?.disabled() || this.disabledInput(), ...(ngDevMode ? [{ debugName: "_groupOrOptionIsDisabled" }] : []));
         this._multiSelect = Boolean(this._parent?.multiSelect());
         this.onSelectionChange = output();
-        this.viewValue = computed(() => this._textElement().nativeElement.textContent || this.explicitViewValue() || '');
+        this.viewValue = computed(() => this._textElement().nativeElement.textContent || this.explicitViewValue() || '', ...(ngDevMode ? [{ debugName: "viewValue" }] : []));
         this._hostClasses = computed(() => this._getHostClasses([
             this.selected() ? 'selected' : null,
             this._active() ? 'active' : null,
@@ -838,10 +838,10 @@ class IdsOptionComponent extends ComponentBase {
             this._multiSelect ? 'multiselect' : null,
             this.size(),
             this.variant(),
-        ]));
-        this._pseudoCheckboxState = computed(() => (this.selected() ? IdsPseudoCheckboxState.CHECKED : IdsPseudoCheckboxState.UNCHECKED));
-        this.embeddedPseudoCheckboxSize = computed(() => this.size());
-        this.embeddedPseudoCheckboxVariant = signal(IdsFormFieldVariant.SURFACE);
+        ]), ...(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" }] : []));
         effect(() => {
             this.disabled = this.disabledInput();
         });
@@ -904,15 +904,15 @@ class IdsOptionComponent extends ComponentBase {
             this.onSelectionChange.emit(new IdsOptionSelectionChange(this, selected, isUserInput));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", 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: "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: [
             {
                 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=\"check\" />\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: "19.1.2", ngImport: i0, type: IdsOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ids-option', imports: [
                         IdsIconComponent,
@@ -953,10 +953,10 @@ function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosit
 }
 
 class IdsLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsLabelDirective, isStandalone: true, selector: "ids-label", ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ids-label',