@i-cell/ids-angular 0.2.23 → 0.2.25

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

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, viewChild, signal, output, effect, Directive, Injector, booleanAttribute, Input, contentChildren, ChangeDetectorRef, contentChild, isDevMode, viewChildren, model, untracked, forwardRef } from '@angular/core';
-import { ComponentBase, coerceBooleanAttribute, ComponentBaseWithDefaults, IdsSize, coerceNumberAttribute } from '@i-cell/ids-angular/core';
+import { Injectable, InjectionToken, inject, Injector, signal, input, effect, booleanAttribute, computed, Directive, Input, contentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, ChangeDetectorRef, viewChild, contentChild, output, model, untracked, forwardRef, Renderer2, afterNextRender, isDevMode } from '@angular/core';
+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, startWith, of } from 'rxjs';
 import { IdsIconComponent } from '@i-cell/ids-angular/icon';
 import { hasModifierKey } from '@angular/cdk/keycodes';
-import { takeUntilDestroyed, toObservable, rxResource } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { NgForm, FormGroupDirective, NgControl, Validators, StatusChangeEvent, ValueChangeEvent, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject, observeOn, asapScheduler, tap, switchMap, of, startWith, filter } from 'rxjs';
-import { LiveAnnouncer, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { SelectionModel } from '@angular/cdk/collections';
-import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
+import { IdsIconButtonAppearance, IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
 import { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
-import { IdsSpinnerComponent } from '@i-cell/ids-angular/spinner';
+import { IdsSpinnerVariant, IdsSpinnerComponent } from '@i-cell/ids-angular/spinner';
 import { IdsTooltipDirective } from '@i-cell/ids-angular/tooltip';
+import { LiveAnnouncer, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { SelectionModel } from '@angular/cdk/collections';
+import { IdsChipAppearance, IdsChipVariant, IdsChipComponent } from '@i-cell/ids-angular/chip';
 
 class AbstractErrorStateMatcher {
 }
@@ -21,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' }]
         }] });
@@ -58,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' }]
         }] });
@@ -95,223 +94,11 @@ const IDS_AUTOCOMPLETE_DEFAULT_CONFIG = new InjectionToken('IDS_AUTOCOMPLETE_DEF
 });
 function IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY() {
     return {
-        minChars: 1,
-        hintLoading: 'Loading...',
-        hintNoResults: 'No results found',
-        hintMinChars: 'Please provide at least 1 characters',
-        hintMaxLength: 'Too many results, please refine your search',
-        typeaheadDebounceInterval: 300,
+        errorStateMatcher: ErrorStateMatcher,
+        successStateMatcher: SuccessStateMatcher,
     };
 }
 
-const IDS_AUTOCOMPLETE_LOADER = new InjectionToken('IDS_AUTOCOMPLETE_LOADER');
-
-const IDS_OPTION_GROUP = new InjectionToken('IdsOptionGroup');
-
-const IDS_OPTION_PARENT_COMPONENT = new InjectionToken('IDS_OPTION_PARENT_COMPONENT');
-
-class IdsOptionSelectionChange {
-    constructor(source, selected, isUserInput = false) {
-        this.source = source;
-        this.selected = selected;
-        this.isUserInput = isUserInput;
-    }
-}
-
-const IdsFormFieldVariant = {
-    SURFACE: 'surface',
-    LIGHT: 'light',
-};
-
-const IDS_PSEUDO_CHECKBOX_PARENT = new InjectionToken('IDS_PSEUDO_CHECKBOX_PARENT');
-
-const IdsPseudoCheckboxState = {
-    UNCHECKED: 'unchecked',
-    CHECKED: 'checked',
-    INDETERMINATE: 'indeterminate',
-};
-
-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._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: "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 }); }
-}
-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=\"remove\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"done\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n" }]
-        }] });
-
-class IdsOptionComponent extends ComponentBase {
-    get _hostName() {
-        return 'option';
-    }
-    constructor() {
-        super();
-        this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
-        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.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._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._hostClasses = computed(() => this._getHostClasses([
-            this.selected() ? 'selected' : null,
-            this._active() ? 'active' : null,
-            this._groupOrOptionIsDisabled() ? 'disabled' : null,
-            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" }] : []));
-        effect(() => {
-            this.disabled = this.disabledInput();
-        });
-    }
-    ngOnInit() {
-        const parent = this._parent;
-        if (parent.isOptionPreSelectedByValue(this.value())) {
-            this.selected.set(true);
-        }
-    }
-    _handleKeydown(event) {
-        if ((event.key === 'ENTER' || event.key === ' ') && !hasModifierKey(event)) {
-            this.selectViaInteraction();
-            event.preventDefault();
-        }
-    }
-    selectViaInteraction() {
-        if (!this._groupOrOptionIsDisabled()) {
-            this._emitSelectionChangeEvent(!this.selected(), true);
-        }
-    }
-    getHostElement() {
-        return this._element.nativeElement;
-    }
-    select(emitEvent = true) {
-        if (!this.selected()) {
-            if (emitEvent) {
-                this._emitSelectionChangeEvent(true);
-            }
-        }
-    }
-    deselect(emitEvent = true) {
-        if (this.selected()) {
-            if (emitEvent) {
-                this._emitSelectionChangeEvent(false);
-            }
-        }
-    }
-    focus(_origin, options) {
-        const element = this._element.nativeElement;
-        if (typeof element.focus === 'function') {
-            element.focus(options);
-        }
-    }
-    setActiveStyles() {
-        if (!this._active()) {
-            this._active.set(true);
-        }
-    }
-    setInactiveStyles() {
-        if (this._active()) {
-            this._active.set(false);
-        }
-    }
-    getLabel() {
-        return this.viewValue();
-    }
-    _emitSelectionChangeEvent(selected, isUserInput = false) {
-        if (this._multiSelect || !this.selected()) {
-            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: [
-            {
-                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: [{
-            type: Component,
-            args: [{ selector: 'ids-option', imports: [
-                        IdsIconComponent,
-                        PseudoCheckboxComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: IDS_PSEUDO_CHECKBOX_PARENT,
-                            useExisting: IdsOptionComponent,
-                        },
-                    ], host: {
-                        'role': 'option',
-                        '[attr.aria-selected]': 'selected()',
-                        '[attr.aria-disabled]': 'disabled.toString()',
-                        '(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: () => [] });
-function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
-    if (optionGroups.length) {
-        let groupCounter = 0;
-        for (let i = 0; i < optionIndex + 1; i++) {
-            if (options[i].group && options[i].group === optionGroups[groupCounter]) {
-                groupCounter++;
-            }
-        }
-        return groupCounter;
-    }
-    return 0;
-}
-function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
-    if (optionOffset < currentScrollPosition) {
-        return optionOffset;
-    }
-    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
-        return Math.max(0, optionOffset - panelHeight + optionHeight);
-    }
-    return currentScrollPosition;
-}
-
-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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[idsFormFieldAction]',
-                    standalone: true,
-                }]
-        }] });
-
 const formFieldControlClass = 'ids-form-field-control';
 class IdsFormFieldControl extends ComponentBaseWithDefaults {
     constructor() {
@@ -319,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';
@@ -343,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 }));
@@ -377,12 +164,17 @@ 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',
+    LIGHT: 'light',
+};
 
 const IDS_FORM_FIELD_DEFAULT_CONFIG = new InjectionToken('IDS_FORM_FIELD_DEFAULT_CONFIG', {
     providedIn: 'root',
@@ -397,6 +189,18 @@ 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: "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: "21.2.5", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsFormFieldAction]',
+                    standalone: true,
+                }]
+        }] });
+
 class IdsPrefixDirective {
     constructor() {
         this.isLeadingIcon = false;
@@ -404,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]',
@@ -425,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]',
@@ -475,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]',
@@ -491,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.
@@ -546,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);
     }
     /**
@@ -567,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]',
@@ -615,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() {
@@ -647,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();
@@ -675,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]',
@@ -697,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',
@@ -716,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 {
@@ -746,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';
@@ -785,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()
@@ -794,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';
@@ -808,261 +612,273 @@ 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_INPUT_DEFAULT_CONFIG = new InjectionToken('IDS_INPUT_DEFAULT_CONFIG', {
-    providedIn: 'root',
-    factory: IDS_INPUT_DEFAULT_CONFIG_FACTORY,
-});
-function IDS_INPUT_DEFAULT_CONFIG_FACTORY() {
-    return {
-        errorStateMatcher: ErrorStateMatcher,
-        successStateMatcher: SuccessStateMatcher,
-    };
+const IDS_OPTION_GROUP = new InjectionToken('IdsOptionGroup');
+
+const IDS_OPTION_PARENT_COMPONENT = new InjectionToken('IDS_OPTION_PARENT_COMPONENT');
+
+class IdsOptionSelectionChange {
+    constructor(source, selected, isUserInput = false) {
+        this.source = source;
+        this.selected = selected;
+        this.isUserInput = isUserInput;
+    }
 }
 
-const defaultConfig$1 = IDS_INPUT_DEFAULT_CONFIG_FACTORY();
-const IDS_INPUT_INVALID_TYPES = [
-    'button',
-    'checkbox',
-    'file',
-    'hidden',
-    'image',
-    'radio',
-    'range',
-    'reset',
-    'submit',
-];
-class IdsInputDirective extends IdsFormFieldControl {
+const IDS_PSEUDO_CHECKBOX_PARENT = new InjectionToken('IDS_PSEUDO_CHECKBOX_PARENT');
+
+const IdsPseudoCheckboxState = {
+    UNCHECKED: 'unchecked',
+    CHECKED: 'checked',
+    INDETERMINATE: 'indeterminate',
+};
+
+class PseudoCheckboxComponent extends ComponentBase {
     constructor() {
         super(...arguments);
-        this._elementRef = inject(ElementRef);
-        this._defaultConfig = this._getDefaultConfig(defaultConfig$1, 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._validateTypeEffect = effect(() => {
-            this._validateType(this.type());
-        }, ...(ngDevMode ? [{ debugName: "_validateTypeEffect" }] : []));
-        /**
-         * Should be an arrow function in order to handle `this` outside of this class
-         */
-        this.onContainerClick = () => {
-            if (!this._focused && !this.readonly() && !this.disabled) {
-                this.focus();
-            }
-        };
+        this._parent = inject(IDS_PSEUDO_CHECKBOX_PARENT, { optional: true });
+        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" }] : /* istanbul ignore next */ []));
     }
     get _hostName() {
-        return 'input';
+        return 'pseudo-checkbox';
     }
-    ngAfterViewInit() {
-        queueMicrotask(() => {
-            const control = this.ngControl()?.control;
-            if (control) {
-                this._disabled.set(control.status === 'DISABLED');
-                control.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((event) => this.updateControlState(event));
-            }
+    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: "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() {
+        return 'option';
+    }
+    constructor() {
+        super();
+        this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
+        this._element = inject(ElementRef);
+        this.group = inject(IDS_OPTION_GROUP, { optional: true });
+        this._textElement = viewChild.required('text');
+        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" }] : /* 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" }] : /* istanbul ignore next */ []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.selected() ? 'selected' : null,
+            this._active() ? 'active' : null,
+            this._groupOrOptionIsDisabled() ? 'disabled' : null,
+            this._multiSelect ? 'multiselect' : null,
+            this.size(),
+            this.variant(),
+        ]), ...(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();
         });
     }
-    _validateType(type) {
-        if (isDevMode() && IDS_INPUT_INVALID_TYPES.indexOf(type) > -1) {
-            throw this._createHostError(`Input type ${type} is not supportedby idsInput`);
+    ngOnInit() {
+        const parent = this._parent;
+        if (parent.isOptionPreSelectedByValue(this.value())) {
+            this.selected.set(true);
         }
     }
-    focus(options) {
-        this._elementRef.nativeElement.focus(options);
+    _handleKeydown(event) {
+        if ((event.key === 'ENTER' || event.key === ' ') && !hasModifierKey(event)) {
+            this.selectViaInteraction();
+            event.preventDefault();
+        }
     }
-    _focusChanged(isFocused) {
-        if (isFocused !== this._focused) {
-            this._focused = isFocused;
+    selectViaInteraction() {
+        if (!this._groupOrOptionIsDisabled()) {
+            this._emitSelectionChangeEvent(!this.selected(), true);
         }
     }
-    updateControlState(event) {
-        this._errorStateTracker?.updateErrorState();
-        this._successStateTracker?.updateSuccessState();
-        if (event instanceof StatusChangeEvent) {
-            this._disabled.set(event.status === 'DISABLED');
+    getHostElement() {
+        return this._element.nativeElement;
+    }
+    select(emitEvent = true) {
+        if (!this.selected()) {
+            if (emitEvent) {
+                this._emitSelectionChangeEvent(true);
+            }
+        }
+    }
+    deselect(emitEvent = true) {
+        if (this.selected()) {
+            if (emitEvent) {
+                this._emitSelectionChangeEvent(false);
+            }
+        }
+    }
+    focus(_origin, options) {
+        const element = this._element.nativeElement;
+        if (typeof element.focus === 'function') {
+            element.focus(options);
+        }
+    }
+    setActiveStyles() {
+        if (!this._active()) {
+            this._active.set(true);
         }
     }
-    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: [
+    setInactiveStyles() {
+        if (this._active()) {
+            this._active.set(false);
+        }
+    }
+    getLabel() {
+        return this.viewValue();
+    }
+    _emitSelectionChangeEvent(selected, isUserInput = false) {
+        if (this._multiSelect || !this.selected()) {
+            this.onSelectionChange.emit(new IdsOptionSelectionChange(this, selected, isUserInput));
+        }
+    }
+    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_FORM_FIELD_CONTROL,
-                useExisting: IdsInputDirective,
+                provide: IDS_PSEUDO_CHECKBOX_PARENT,
+                useExisting: IdsOptionComponent,
             },
-        ], exportAs: ["idsInput"], usesInheritance: true, ngImport: i0 }); }
+        ], 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: IdsInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `input[idsInput][ngModel]:not([formControl]):not([formControlName]),
-             input[idsInput][formControl]:not([ngModel]):not([formControlName]),
-             input[idsInput][formControlName]:not([ngModel]):not([formControl]),
-             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),
-             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),
-             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])`,
-                    exportAs: 'idsInput',
-                    standalone: true,
-                    providers: [
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-option', imports: [
+                        IdsIconComponent,
+                        PseudoCheckboxComponent,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
-                            provide: IDS_FORM_FIELD_CONTROL,
-                            useExisting: IdsInputDirective,
+                            provide: IDS_PSEUDO_CHECKBOX_PARENT,
+                            useExisting: IdsOptionComponent,
                         },
-                    ],
-                    host: {
-                        '[attr.placeholder]': 'placeholder()',
-                        '[attr.disabled]': 'disabled() ? "" : null',
-                        '[attr.readonly]': 'readonly() ? "" : null',
-                        '(focus)': '_focusChanged(true)',
-                        '(blur)': '_focusChanged(false)',
-                    },
-                }]
-        }] });
+                    ], host: {
+                        'role': 'option',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '(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: () => [], 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;
+        for (let i = 0; i < optionIndex + 1; i++) {
+            if (options[i].group && options[i].group === optionGroups[groupCounter]) {
+                groupCounter++;
+            }
+        }
+        return groupCounter;
+    }
+    return 0;
+}
+function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
+    if (optionOffset < currentScrollPosition) {
+        return optionOffset;
+    }
+    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
+        return Math.max(0, optionOffset - panelHeight + optionHeight);
+    }
+    return currentScrollPosition;
+}
 
-const defaultConfig = IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY();
-const LIVE_ANNOUNCE_DURATION_MS = 10000;
+const defaultConfig$1 = IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY();
 class IdsAutocompleteComponent extends IdsFormFieldControl {
     get _hostName() {
         return 'autocomplete';
     }
-    get _empty() {
-        return Boolean(this._selectionModel?.isEmpty());
-    }
-    get selected() {
-        return this.multiSelect() ? this._selectionModel?.selected : this._selectionModel?.selected?.[0];
-    }
-    get _triggerValue() {
-        if (this._empty) {
-            return '';
-        }
-        if (this.multiSelect()) {
-            const selectedOptions = this._selectionModel?.selected;
-            return selectedOptions?.join(', ') || '';
-        }
-        return this._selectionModel?.selected?.[0] || '';
-    }
     constructor() {
         super();
-        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_AUTOCOMPLETE_DEFAULT_CONFIG);
-        this._elementRef = inject(ElementRef);
-        this._changeDetectorRef = inject(ChangeDetectorRef);
-        this._liveAnnouncer = inject(LiveAnnouncer);
+        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);
-        this._overlayWidth = 0;
-        /**
-         * Minimum number of characters to initiate actual search.
-         * Warning is shown when input length is not met.
-         * (Resource loader/stream function needs to be adjusted accordingly!)
-         */
-        this.minChars = input(1, ...(ngDevMode ? [{ debugName: "minChars", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
-        /** Max length of options allowed to show. Warning is shown when available options is higher than this number  */
-        this.maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
-        this.multiSelect = input(false, ...(ngDevMode ? [{ debugName: "multiSelect" }] : []));
-        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.ariaLabelClearButton = input('Clear', ...(ngDevMode ? [{ debugName: "ariaLabelClearButton" }] : []));
-        this.ariaLabelToggleButton = input('Toggle', ...(ngDevMode ? [{ debugName: "ariaLabelToggleButton" }] : []));
-        this.valueCompareFn = input((o1, o2) => o1 === o2, ...(ngDevMode ? [{ debugName: "valueCompareFn" }] : []));
-        this.sortCompareFn = input(...(ngDevMode ? [undefined, { debugName: "sortCompareFn" }] : []));
-        this.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
-        this.typeaheadDebounceInterval = input(this._defaultConfig.typeaheadDebounceInterval, ...(ngDevMode ? [{ debugName: "typeaheadDebounceInterval", transform: coerceNumberAttribute }] : [{
-                transform: coerceNumberAttribute,
-            }]));
-        this.hintLoading = input(this._defaultConfig.hintLoading, ...(ngDevMode ? [{ debugName: "hintLoading" }] : []));
-        this.hintNoResults = input(this._defaultConfig.hintNoResults, ...(ngDevMode ? [{ debugName: "hintNoResults" }] : []));
-        this.hintMinChars = input(this._defaultConfig.hintMinChars, ...(ngDevMode ? [{ debugName: "hintMinChars" }] : []));
-        this.hintMaxLength = input(this._defaultConfig.hintMaxLength, ...(ngDevMode ? [{ debugName: "hintMaxLength" }] : []));
-        this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
-        this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : []));
-        this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : []));
-        this.errorStateMatcher = signal(inject(ErrorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
-        this.successStateMatcher = signal(inject(SuccessStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
-        this.options = viewChildren(IdsOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
-        this.overlayPanel = viewChild.required(IdsOverlayPanelComponent);
-        this.onContainerClick = () => { };
+        // declarations of IdsFormFieldControl variables
+        this._defaultConfig = this._getDefaultConfig(defaultConfig$1, IDS_AUTOCOMPLETE_DEFAULT_CONFIG);
+        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.parentVariant(),
             this.disabled() ? 'disabled' : null,
-            this.readonly() ? 'readonly' : null,
-        ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
         this._panelClasses = computed(() => [
-            'ids-overlay-panel__autocomplete-panel',
+            'ids-autocomplete-overlay-panel',
             this.panelClasses(),
-        ].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
-        this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
-        this._canOpen = computed(() => !this.overlayPanel().open() && !this.disabled() && !this.readonly() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "_canOpen" }] : []));
-        this._panel = viewChild('overlay', ...(ngDevMode ? [{ debugName: "_panel", read: (ElementRef) }] : [{ read: (ElementRef) }]));
-        this._inputElemment = viewChild('fallbackOverlayOrigin', ...(ngDevMode ? [{ debugName: "_inputElemment", read: (ElementRef) }] : [{ read: (ElementRef) }]));
-        this._resource = rxResource({
-            defaultValue: [],
-            params: () => ({ search: this._searchText() }),
-            stream: inject(IDS_AUTOCOMPLETE_LOADER),
-        });
-        this._onChange = () => { };
-        this._onTouched = () => { };
-        this._searchText = model('', ...(ngDevMode ? [{ debugName: "_searchText" }] : []));
-        this._skipPredicate = (option) => {
-            if (this.overlayPanel().open()) {
-                return false;
+        ].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : /* istanbul ignore next */ []));
+        // #region IdsFormFieldControl implementation
+        this.onContainerClick = (event) => {
+            if (!this.readonly() && !this.disabled()) {
+                const target = event.target;
+                // 'clear' button should not trigger focus on the input
+                if (target.parentElement?.tagName === 'BUTTON' || (target.tagName === 'IDS-ICON' && target.parentElement?.tagName === 'BUTTON')) {
+                    return;
+                }
+                this.trigger().focus();
             }
-            return option.disabledInput();
         };
         effect(() => {
-            this._keyManager?.withTypeAhead(this.typeaheadDebounceInterval());
-        });
-        effect(() => {
-            const options = this.options();
+            const overlayPanelOpen = this.overlayPanel()?.open() ?? false;
             untracked(() => {
-                if (options.length > 0) {
-                    this._initKeyManager();
-                    this.options().forEach((option) => {
-                        if (this._selectionModel?.selected.includes(option.viewValue())) {
-                            option.selected.set(true);
-                        }
-                    });
-                    this._subscribeOptionChanges();
-                }
-            });
-        });
-        effect(() => {
-            const searchText = this._searchText();
-            untracked(() => {
-                const control = this.ngControl()?.control;
-                const controlValue = control?.value;
-                if (controlValue && searchText !== controlValue) {
-                    control.setValue(null);
-                    this._clearSelection();
+                if (!overlayPanelOpen && this.panelOpen()) {
+                    this.panelOpen.set(false);
                 }
             });
         });
     }
     ngOnInit() {
         if (!this._parentFormField) {
-            throw this._createHostError('Select must be in a form field');
+            throw this.createHostError('Select must be in a form field');
         }
-        this._selectionModel = new SelectionModel(this.multiSelect(), undefined, false, this.valueCompareFn());
-        queueMicrotask(() => {
-            const control = this.ngControl()?.control;
-            if (control) {
-                control.events
-                    .pipe(filter((event) => event instanceof ValueChangeEvent), takeUntilDestroyed(this._destroyRef))
-                    .subscribe(() => this._changeDetectorRef.markForCheck());
-            }
-        });
-        this._initErrorStateTracker();
     }
     ngAfterViewInit() {
+        this._initErrorStateTracker();
         queueMicrotask(() => {
             const controlDir = this.ngControl();
             if (controlDir?.control) {
@@ -1074,26 +890,388 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         this._errorStateTracker?.updateErrorState();
         this._successStateTracker?.updateSuccessState();
     }
+    // #region ControlValueAccessor implementation
+    writeValue(value) {
+        if (value !== null) {
+            this._patchValue(value);
+        }
+        else {
+            this.trigger()?.clear();
+        }
+        this._value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    // #endregion
+    handleChange(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    // #endregion
+    // #region required as `IDS_OPTION_PARENT`, but not used here as it cannot handle option content changes.
+    // Selection is handled by `_updateCurrentSelection` method of `AutocompleteTriggerDirective`
+    isOptionPreSelectedByValue() {
+        return false;
+    }
+    // #endregion
+    setScrollTop(scrollTop) {
+        if (this.panel()) {
+            this.panel().nativeElement.scrollTop = scrollTop;
+        }
+    }
+    getScrollTop() {
+        return this.panel() ? this.panel()?.nativeElement.scrollTop : 0;
+    }
+    setPanelOpen() {
+        this._overlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
+        this.overlayPanel()?.overlayDir()?.overlayRef?.updateSize({ width: this._overlayOrigin.nativeElement.getBoundingClientRect().width });
+        this._observeOverlayOrigin();
+        this.panelOpen.set(true);
+    }
+    createHostError(message) {
+        throw this._createHostError(message);
+    }
+    _observeOverlayOrigin() {
+        const observer = new ResizeObserver(() => {
+            this.overlayPanel()?.overlayDir()?.overlayRef?.updatePosition();
+            this.overlayPanel()?.overlayDir()?.overlayRef?.updateSize({ width: this._overlayOrigin.nativeElement.getBoundingClientRect().width });
+        });
+        observer.observe(this._overlayOrigin.nativeElement);
+    }
+    // "async" way to patch value to ensure options are loaded before setting selection
+    _patchValue(value) {
+        const patchEffect = effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options.length > 0) {
+                    this.trigger().setSelectionByValue(value);
+                    patchEffect.destroy();
+                }
+            });
+        }, { ...(ngDevMode ? { debugName: "patchEffect" } : /* istanbul ignore next */ {}), injector: this._injector, manualCleanup: true });
+    }
+    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 },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IdsAutocompleteComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: IDS_OPTION_GROUP, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["overlayPanel"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["idsAutocomplete"], usesInheritance: true, ngImport: i0, template: `
+    @if (panelOpen()) {
+      <ids-overlay-panel
+        #overlayPanel
+        appearance="elevated"
+        [origin]="_overlayOrigin"
+        [open]="panelOpen()"
+        [size]="parentSize()"
+        [panelClasses]="_panelClasses()"
+      >
+        <div
+          #panel
+          class="ids-autocomplete-panel"
+          role="listbox"
+          [id]="id() + '-panel'"
+          [attr.aria-multiselectable]="multiSelect()"
+          [attr.aria-label]="ariaLabel() || null"
+          [attr.aria-labelledby]="ariaLabelledby() || null"
+        >
+          <ng-content />
+        </div>
+      </ids-overlay-panel>
+    }
+    <span class="ids-autocomplete-suffix">
+      @if (trigger().selected.length > 0) {
+        <button
+          type="button"
+          idsIconButton
+          [appearance]="appearance()"
+          [variant]="parentVariant()"
+          [size]="parentSize()"
+          [disabled]="disabled()"
+          [ariaLabel]="ariaLabelClear()"
+          [idsTooltip]="ariaLabelClear()"
+          [idsTooltipDisabled]="!ariaLabelClear()"
+          [idsTooltipIgnoreClipped]="true"
+          (click)="trigger().clear()"
+        >
+          <ids-icon alt="" aria-hidden="true" fontIcon="close" />
+        </button>
+      }
+      @if (isLoading()) {
+        <ids-spinner
+          sizeCollection="small"
+          [size]="parentSize()"
+          [variant]="spinnerVariant()"
+          [isTrack]="true"
+          [aria-label]="ariaLabelLoading()"
+        />
+      } @else {
+        <ids-icon
+          alt=""
+          aria-hidden="true"
+          [size]="parentSize()"
+          [fontIcon]="trigger().autocomplete().panelOpen() ? 'chevron-up' : 'chevron-down'"
+        />
+      }
+    </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: "21.2.5", ngImport: i0, type: IdsAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ids-autocomplete',
+                    imports: [
+                        IdsIconComponent,
+                        IdsIconButtonComponent,
+                        IdsOverlayPanelComponent,
+                        IdsSpinnerComponent,
+                        IdsTooltipDirective,
+                    ],
+                    template: `
+    @if (panelOpen()) {
+      <ids-overlay-panel
+        #overlayPanel
+        appearance="elevated"
+        [origin]="_overlayOrigin"
+        [open]="panelOpen()"
+        [size]="parentSize()"
+        [panelClasses]="_panelClasses()"
+      >
+        <div
+          #panel
+          class="ids-autocomplete-panel"
+          role="listbox"
+          [id]="id() + '-panel'"
+          [attr.aria-multiselectable]="multiSelect()"
+          [attr.aria-label]="ariaLabel() || null"
+          [attr.aria-labelledby]="ariaLabelledby() || null"
+        >
+          <ng-content />
+        </div>
+      </ids-overlay-panel>
+    }
+    <span class="ids-autocomplete-suffix">
+      @if (trigger().selected.length > 0) {
+        <button
+          type="button"
+          idsIconButton
+          [appearance]="appearance()"
+          [variant]="parentVariant()"
+          [size]="parentSize()"
+          [disabled]="disabled()"
+          [ariaLabel]="ariaLabelClear()"
+          [idsTooltip]="ariaLabelClear()"
+          [idsTooltipDisabled]="!ariaLabelClear()"
+          [idsTooltipIgnoreClipped]="true"
+          (click)="trigger().clear()"
+        >
+          <ids-icon alt="" aria-hidden="true" fontIcon="close" />
+        </button>
+      }
+      @if (isLoading()) {
+        <ids-spinner
+          sizeCollection="small"
+          [size]="parentSize()"
+          [variant]="spinnerVariant()"
+          [isTrack]="true"
+          [aria-label]="ariaLabelLoading()"
+        />
+      } @else {
+        <ids-icon
+          alt=""
+          aria-hidden="true"
+          [size]="parentSize()"
+          [fontIcon]="trigger().autocomplete().panelOpen() ? 'chevron-up' : 'chevron-down'"
+        />
+      }
+    </span>
+  `,
+                    exportAs: 'idsAutocomplete',
+                    providers: [
+                        { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsAutocompleteComponent },
+                        { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsAutocompleteComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IdsAutocompleteComponent),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], 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 {
+    get selected() {
+        return this._selectionModel?.selected ?? [];
+    }
+    get selectedOptions() {
+        const selectedValues = this.selected.map((option) => option.value) ?? [];
+        return this.autocomplete()
+            .options()
+            .filter((option) => selectedValues.includes(option.value()));
+    }
+    constructor() {
+        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);
+        this._injector = inject(Injector);
+        this._skipPredicate = (option) => {
+            if (this.autocomplete().panelOpen()) {
+                return false;
+            }
+            return option.disabledInput();
+        };
+        effect(() => {
+            const options = this.autocomplete().options();
+            untracked(() => {
+                if (options.length > 0) {
+                    this._initKeyManager();
+                    this._subscribeOptionChanges();
+                    this._liveAnnouncer.announce(options.length.toString(), LIVE_ANNOUNCER_DURATION);
+                    if (!this._selectionModel.isEmpty()) {
+                        this._updateCurrentSelection();
+                    }
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        this._selectionModel = new SelectionModel(true, undefined, true, this.autocomplete().valueCompareFn());
+        this._selectionModel.changed.subscribe(() => {
+            if (this.autocomplete().multiSelect()) {
+                this._selectionModel?.sort(this.autocomplete().sortCompareFn());
+            }
+            else {
+                this._updateInputValue(this.selected[0]?.viewValue);
+            }
+            this.autocomplete().handleChange(this.autocomplete().multiSelect() ? this.selected.map((option) => option.value) : (this.selected[0]?.value ?? null));
+            this.autocomplete().onTouched();
+        });
+    }
     ngOnDestroy() {
         this._keyManager?.destroy();
     }
+    toggle() {
+        this.autocomplete().panelOpen() ? this.close() : this.open();
+    }
+    open() {
+        if (!this._canOpen()) {
+            return;
+        }
+        this.autocomplete().setPanelOpen();
+        this._keyManager?.withHorizontalOrientation(null);
+        // wait for opening panel...
+        afterNextRender(() => {
+            this._scrollOptionIntoView(this._keyManager?.activeItemIndex ?? 0);
+            this._highlightCorrectOption();
+        }, { injector: this._injector });
+    }
+    close() {
+        if (this.autocomplete().panelOpen()) {
+            this.autocomplete().panelOpen.set(false);
+            this._keyManager?.withHorizontalOrientation('ltr');
+            this.autocomplete().onTouched();
+        }
+    }
+    clear() {
+        this._clearSelection();
+        this._updateInputValue('');
+    }
+    removeOption(optionValue) {
+        const option = this.autocomplete()
+            .options()
+            .find((opt) => opt.value() === optionValue.value);
+        if (option) {
+            this._handleOptionChange({
+                source: option,
+                selected: false,
+                isUserInput: true,
+            });
+        }
+        else {
+            // item to be removed is NOT the current option list, but present in selection model --> deselect directly
+            this._selectionModel?.deselect(optionValue);
+        }
+    }
+    focus(options) {
+        this._inputElement.nativeElement.focus(options);
+        this.open();
+    }
+    setSelectionByValue(value) {
+        if (this.autocomplete().multiSelect() && value !== null) {
+            if (!Array.isArray(value)) {
+                throw this.autocomplete().createHostError('value must be an array in multiple-selection mode');
+            }
+            else {
+                value.forEach((currentValue) => this._selectValue(currentValue));
+            }
+        }
+        else {
+            const correspondingOption = this._selectValue(value);
+            if (correspondingOption) {
+                this._keyManager?.updateActiveItem(correspondingOption);
+            }
+            else if (!this.autocomplete().panelOpen()) {
+                this._keyManager?.updateActiveItem(-1);
+            }
+        }
+    }
+    _handleKeydown(event) {
+        if (!this._disabled() && !this._readonly()) {
+            this.autocomplete().panelOpen() ? this._handleOpenedPanelKeydown(event) : this._handleClosedPanelKeydown(event);
+        }
+    }
+    _onBlur() {
+        if (!this._disabled()) {
+            this.autocomplete().onTouched();
+        }
+    }
+    _getAriaActiveDescendant() {
+        if (this.autocomplete().panelOpen() && this._keyManager?.activeItem) {
+            return this._keyManager.activeItem.id();
+        }
+        return null;
+    }
     _initKeyManager() {
-        this._keyManager = new ActiveDescendantKeyManager(this.options())
-            .withTypeAhead(this.typeaheadDebounceInterval())
+        this._keyManager = new ActiveDescendantKeyManager(this.autocomplete().options())
             .withVerticalOrientation()
             .withHorizontalOrientation('ltr')
             .withHomeAndEnd()
             .withPageUpDown()
             .withAllowedModifierKeys(['shiftKey'])
             .skipPredicate(this._skipPredicate);
+        this._keyManager.tabOut.subscribe(() => {
+            if (this.autocomplete().panelOpen()) {
+                if (!this.autocomplete().multiSelect() && this._keyManager?.activeItem) {
+                    this._keyManager.activeItem.selectViaInteraction();
+                }
+                this.focus();
+                this.close();
+            }
+        });
         this._keyManager.change.subscribe(() => {
-            if (this.overlayPanel().open() && this._panel()) {
-                this._scrollOptionIntoView(this._keyManager?.activeItemIndex || 0);
+            if (this.autocomplete().panelOpen()) {
+                this._scrollOptionIntoView(this._keyManager?.activeItemIndex ?? 0);
             }
         });
     }
     _subscribeOptionChanges() {
-        this.options().forEach((option) => {
+        this.autocomplete()
+            .options()
+            .forEach((option) => {
             option.onSelectionChange.subscribe((change) => {
                 this._handleOptionChange(change);
             });
@@ -1101,85 +1279,46 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
     }
     _handleOptionChange(change) {
         const { source, selected, isUserInput } = change;
-        if (!this.multiSelect()) {
+        if (!this.autocomplete().multiSelect()) {
             this._clearSelection();
         }
         source.selected.set(selected);
         if (isUserInput) {
             this._keyManager?.setActiveItem(source);
         }
-        if (isUserInput && !this.multiSelect() && this.overlayPanel().open()) {
+        if (isUserInput && !this.autocomplete().multiSelect() && this.autocomplete().panelOpen()) {
             this.close();
         }
-        if (this.multiSelect()) {
-            this._sortValues();
-        }
+        const optionValue = this._getAsOptionValue(source);
         if (selected) {
-            this._selectionModel?.select(source.viewValue());
-            this._searchText.set(source.viewValue());
+            this._selectionModel?.select(optionValue);
         }
         else {
-            this._selectionModel?.deselect(source.viewValue());
+            this._selectionModel?.deselect(optionValue);
         }
-        this._handleChange();
-        this._onTouched();
-        this._inputElemment()?.nativeElement.blur();
-        this.overlayPanel().open.set(false);
     }
-    _handleKeydown(event) {
-        if (!this.disabled() && !this.readonly()) {
-            this.overlayPanel().open() ? this._handleOpenedPanelKeydown(event) : this._handleClosedPanelKeydown(event);
-            // announce number of options when a key is pressed
-            this._liveAnnouncer.announce(this.options()
-                .filter((option) => !option.disabled)
-                .length.toString(), LIVE_ANNOUNCE_DURATION_MS);
-        }
+    _clearSelection() {
+        this._selectionModel?.clear();
+        this._clearOptionsSelection();
     }
-    _handleClosedPanelKeydown(event) {
-        const key = event.key;
-        const targetElement = event.target;
-        const isButtonTarget = targetElement.localName === 'button';
-        if (isButtonTarget && (key === 'Enter' || key === ' ')) {
-            event.preventDefault();
-            targetElement.click();
-            targetElement.blur();
-            return;
-        }
-        const manager = this._keyManager;
-        const isArrowKey = key === 'ArrowDown' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowRight';
-        const isOpenKey = key === 'Enter' || key === ' ';
-        if ((!manager?.isTyping() && isOpenKey && !hasModifierKey(event)) ||
-            isArrowKey ||
-            this.options().length > 0 ||
-            this._resource.value().length > 0) {
-            if (isArrowKey || isOpenKey) {
-                event.preventDefault();
-            }
-            this.open();
-        }
-        else if (!this.multiSelect()) {
-            const previouslySelectedOption = this.selected;
-            manager?.onKeydown(event);
-            const selectedOption = this.selected;
-            if (selectedOption && previouslySelectedOption !== selectedOption) {
-                this._liveAnnouncer.announce(selectedOption, LIVE_ANNOUNCE_DURATION_MS);
-            }
-        }
+    _clearOptionsSelection() {
+        this.autocomplete()
+            .options()
+            .forEach((option) => {
+            option.setInactiveStyles();
+            option.selected.set(false);
+        });
+    }
+    _canOpen() {
+        return !this._readonly() && !this._disabled();
     }
     _handleOpenedPanelKeydown(event) {
-        const key = event.key;
-        const targetElement = event.target;
-        const isButtonTarget = targetElement.localName === 'button';
-        if (isButtonTarget && (key === 'Enter' || key === ' ')) {
-            event.preventDefault();
-            targetElement.click();
-            targetElement.blur();
-            return;
-        }
         const manager = this._keyManager;
+        const key = event.key;
         const isArrowKey = key === 'ArrowDown' || key === 'ArrowUp';
-        const isTyping = manager?.isTyping();
-        if (isArrowKey && event.altKey) {
+        const isTyping = manager !== undefined && manager.isTyping();
+        const isEscapeKey = key === 'Escape';
+        if ((isArrowKey && event.altKey) || isEscapeKey) {
             event.preventDefault();
             this.close();
         }
@@ -1187,10 +1326,14 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             event.preventDefault();
             manager.activeItem.selectViaInteraction();
         }
-        else if (!isTyping && this.multiSelect() && key === 'a' && event.ctrlKey) {
+        else if (!isTyping && this.autocomplete().multiSelect() && key === 'a' && event.ctrlKey) {
             event.preventDefault();
-            const hasDeselectedOptions = this.options().some((opt) => !opt.disabled && !opt.selected());
-            this.options().forEach((option) => {
+            const hasDeselectedOptions = this.autocomplete()
+                .options()
+                .some((opt) => !opt.disabled && !opt.selected());
+            this.autocomplete()
+                .options()
+                .forEach((option) => {
                 if (!option.disabled) {
                     hasDeselectedOptions ? option.select() : option.deselect();
                 }
@@ -1199,7 +1342,8 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         else {
             const previouslyFocusedIndex = manager?.activeItemIndex;
             manager?.onKeydown(event);
-            if (this.multiSelect() &&
+            this._scrollOptionIntoView(manager?.activeItemIndex ?? 0);
+            if (this.autocomplete().multiSelect() &&
                 isArrowKey &&
                 event.shiftKey &&
                 manager?.activeItem &&
@@ -1208,102 +1352,65 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             }
         }
     }
-    _scrollOptionIntoView(index) {
-        const option = this.options()[index];
-        if (option) {
-            const panel = this._panel().nativeElement;
-            const element = option.getHostElement();
-            if (index === 0) {
-                panel.scrollTop = 0;
-            }
-            else {
-                panel.scrollTop = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, panel.scrollTop, panel.offsetHeight);
-            }
-        }
-    }
-    _sortValues() {
-        if (this.multiSelect()) {
-            const options = this.options().map((option) => option.viewValue());
-            const sortComparator = this.sortCompareFn();
-            this._selectionModel?.sort((a, b) => (sortComparator ? sortComparator(a, b, options) : options.indexOf(a) - options.indexOf(b)));
-        }
-    }
-    _getOverlayWidth(preferredOrigin) {
-        const refToMeasure = preferredOrigin instanceof CdkOverlayOrigin ? preferredOrigin.elementRef : preferredOrigin || this._elementRef;
-        return refToMeasure.nativeElement.getBoundingClientRect().width;
-    }
-    toggle() {
-        this.overlayPanel().open() ? this.close() : this.open();
-    }
-    open() {
-        if (!this._canOpen()) {
-            return;
-        }
-        if (this._parentFormField) {
-            this._preferredOverlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
+    _handleClosedPanelKeydown(event) {
+        const manager = this._keyManager;
+        const key = event.key;
+        const isArrowKey = key === 'ArrowDown' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowRight';
+        const isOpenKey = key === 'Enter' || key === ' ';
+        const isEscapeKey = key === 'Escape';
+        if ((manager && !manager.isTyping() && isOpenKey && !hasModifierKey(event)) || isArrowKey) {
+            event.preventDefault();
+            this.open();
         }
-        this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
-        this.overlayPanel().open.set(true);
-        this._keyManager?.withHorizontalOrientation(null);
-        this._highlightCorrectOption();
-        this._changeDetectorRef.markForCheck();
-    }
-    close() {
-        if (this.overlayPanel().open()) {
-            this.overlayPanel().open.set(false);
-            this._changeDetectorRef.markForCheck();
-            this._onTouched();
+        else if (!this.autocomplete().multiSelect() && !isEscapeKey) {
+            const previouslySelectedOption = this.selectedOptions[0];
+            manager?.onKeydown(event);
+            const selectedOption = this.selectedOptions[0];
+            if (selectedOption?.viewValue() && previouslySelectedOption !== selectedOption) {
+                this._liveAnnouncer.announce(selectedOption.viewValue(), LIVE_ANNOUNCER_DURATION);
+            }
         }
     }
-    clear() {
-        this._searchText.set('');
-    }
-    // #region ControlValueAccessor implementation
-    writeValue(value) {
-        this._setSelectionByValue(value);
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
-        this._changeDetectorRef.markForCheck();
-    }
-    // #endregion
-    _setSelectionByValue(value) {
-        this.options().forEach((option) => {
-            option.setInactiveStyles();
-            option.selected.set(false);
-        });
-        this._selectionModel?.clear();
-        this._rawValue = value;
-        if (this.options().length === 0) {
-            return;
-        }
-        if (this.multiSelect() && value) {
-            if (!Array.isArray(value)) {
-                throw this._createHostError('value must be an array in multiple-selection mode');
+    _highlightCorrectOption() {
+        if (this._keyManager) {
+            if (this._selectionModel?.isEmpty() ?? true) {
+                let firstEnabledOptionIndex = -1;
+                for (let index = 0; index < this.autocomplete().options().length; index++) {
+                    const option = this.autocomplete().options()[index];
+                    if (!option.disabled) {
+                        firstEnabledOptionIndex = index;
+                        break;
+                    }
+                }
+                this._keyManager.setActiveItem(firstEnabledOptionIndex);
+            }
+            else {
+                if (this._selectionModel) {
+                    this._keyManager.setActiveItem(this.selectedOptions[0]);
+                }
             }
-            value.forEach((currentValue) => this._selectValue(currentValue));
-            this._sortValues();
         }
-        else {
-            const correspondingOption = this._selectValue(value);
-            if (correspondingOption) {
-                this._keyManager?.updateActiveItem(correspondingOption);
+    }
+    _scrollOptionIntoView(index) {
+        const option = this.autocomplete().options()[index];
+        if (option !== undefined) {
+            const labelCount = _countGroupLabelsBeforeOption(index, this.autocomplete().options(), this.autocomplete().optionGroups());
+            const element = option.getHostElement();
+            if (index === 0 || (index === 0 && labelCount === 1)) {
+                this.autocomplete().setScrollTop(0);
             }
-            else if (!this.overlayPanel().open()) {
-                this._keyManager?.updateActiveItem(-1);
+            else {
+                const newScrollPosition = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, this.autocomplete().getScrollTop(), this.autocomplete().panel()?.nativeElement.offsetHeight);
+                this.autocomplete().setScrollTop(newScrollPosition);
             }
         }
     }
     _selectValue(value) {
-        const valueCompareFn = this.valueCompareFn();
-        const correspondingOption = this.options().find((option) => {
-            if (this._selectionModel?.isSelected(option.viewValue())) {
+        const valueCompareFn = this.autocomplete().valueCompareFn();
+        const correspondingOption = this.autocomplete()
+            .options()
+            .find((option) => {
+            if (this._selectionModel && this._selectionModel.isSelected(this._getAsOptionValue(option))) {
                 return false;
             }
             try {
@@ -1318,155 +1425,272 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         });
         if (correspondingOption) {
             correspondingOption.selected.set(true);
-            this._selectionModel?.select(correspondingOption.viewValue());
+            const correspondingOptionValue = this._getAsOptionValue(correspondingOption);
+            this._selectionModel?.select(correspondingOptionValue);
         }
         return correspondingOption;
     }
-    _clearSelection() {
-        this._selectionModel?.clear();
-        this.options().forEach((option) => {
-            option.selected.set(false);
+    _updateCurrentSelection() {
+        this._clearOptionsSelection();
+        this.selectedOptions.reverse().forEach((option) => {
+            option.selected.set(true);
+            option.setActiveStyles();
+            this._keyManager?.setActiveItem(option);
         });
     }
-    _handleChange() {
-        const selectionModelValues = this._selectionModel?.selected;
-        if (this.multiSelect()) {
-            this._onChange(selectionModelValues);
-        }
-        else {
-            this._onChange(selectionModelValues?.[0]);
-        }
-        this._changeDetectorRef.markForCheck();
-    }
-    _highlightCorrectOption() {
-        if (this._keyManager) {
-            if (this._empty) {
-                let firstEnabledOptionIndex = -1;
-                for (let index = 0; index < this.options().length; index++) {
-                    const option = this.options()[index];
-                    if (!option.disabled) {
-                        firstEnabledOptionIndex = index;
-                        break;
-                    }
-                }
-                this._keyManager.setActiveItem(firstEnabledOptionIndex);
-            }
-            else {
-                if (this._selectionModel) {
-                    const activeItem = this.options().find((option) => this._selectionModel?.isSelected(option.viewValue()));
-                    if (activeItem) {
-                        this._keyManager.setActiveItem(activeItem);
-                    }
-                }
-            }
-        }
-    }
-    isOptionPreSelectedByValue(optionValue) {
-        if (this._rawValue === undefined) {
-            return false;
-        }
-        if (this.multiSelect() && Array.isArray(this._rawValue)) {
-            return this._rawValue.some((value) => optionValue != null && value === optionValue);
-        }
-        return optionValue === this._rawValue;
-    }
-    _onFocus() {
-        if (!this.disabled()) {
-            this._focused.set(true);
-        }
-    }
-    _onBlur() {
-        this._focused.set(false);
-        this._keyManager?.cancelTypeahead();
-        if (!this.disabled() && !this.overlayPanel().open()) {
-            this._onTouched();
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    _getAriaActiveDescendant() {
-        if (this.overlayPanel().open() && this._keyManager?.activeItem) {
-            return this._keyManager.activeItem.id();
-        }
-        return null;
-    }
-    focus(options) {
-        this._elementRef.nativeElement.focus(options);
+    _getAsOptionValue(option) {
+        return { value: option.value(), viewValue: option.viewValue() };
     }
-    _onInputClick() {
-        if (!this._focused() && !this.readonly() && !this.disabled() && this._searchText().length) {
-            this.open();
-        }
+    _updateInputValue(value) {
+        const input = this._inputElement.nativeElement;
+        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: 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[ngModel]:not([formControl]):not([formControlName]),\n              ids-autocomplete[formControl]:not([ngModel]):not([formControlName]),\n              ids-autocomplete[formControlName]:not([ngModel]):not([formControl])", inputs: { minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClearButton: { classPropertyName: "ariaLabelClearButton", publicName: "ariaLabelClearButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelToggleButton: { classPropertyName: "ariaLabelToggleButton", publicName: "ariaLabelToggleButton", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounceInterval: { classPropertyName: "typeaheadDebounceInterval", publicName: "typeaheadDebounceInterval", isSignal: true, isRequired: false, transformFunction: null }, hintLoading: { classPropertyName: "hintLoading", publicName: "hintLoading", isSignal: true, isRequired: false, transformFunction: null }, hintNoResults: { classPropertyName: "hintNoResults", publicName: "hintNoResults", isSignal: true, isRequired: false, transformFunction: null }, hintMinChars: { classPropertyName: "hintMinChars", publicName: "hintMinChars", isSignal: true, isRequired: false, transformFunction: null }, hintMaxLength: { classPropertyName: "hintMaxLength", publicName: "hintMaxLength", isSignal: true, isRequired: false, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, _searchText: { classPropertyName: "_searchText", publicName: "_searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _searchText: "_searchTextChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : tabIndex()", "attr.aria-controls": "overlayPanel().open() ? id() + \"-panel\" : null", "attr.aria-owns": "overlayPanel().open() ? id() + \"-panel\" : null", "attr.aria-expanded": "overlayPanel().open()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-required": "required().toString()", "attr.aria-disabled": "disabled().toString()", "attr.aria-invalid": "hasErrorState()", "attr.aria-activedescendant": "_getAriaActiveDescendant()" } }, providers: [
-            { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsAutocompleteComponent },
-            { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsAutocompleteComponent },
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => IdsAutocompleteComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "overlayPanel", first: true, predicate: IdsOverlayPanelComponent, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["overlay"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_inputElemment", first: true, predicate: ["fallbackOverlayOrigin"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  idsInput\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"false\"\n  [(ngModel)]=\"_searchText\"\n  (click)=\"_onInputClick()\"\n  (blur)=\"_onBlur()\"\n/>\n@if (_searchText().length > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelClearButton()\"\n      [idsTooltip]=\"ariaLabelClearButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n    </button>\n  </div>\n}\n@if (!isLoading && optionsLength > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelToggleButton()\"\n      [idsTooltip]=\"ariaLabelToggleButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"overlay.open() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n  </div>\n}\n@if (isLoading) {\n  <div idsFormFieldAction>\n    <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n  </div>\n}\n<ids-overlay-panel\n  #overlay\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IdsFormFieldActionDirective, selector: "[idsFormFieldAction]" }, { kind: "directive", type: IdsInputDirective, 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", "type", "errorStateMatcher", "successStateMatcher"], exportAs: ["idsInput"] }, { 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: IdsOptionComponent, selector: "ids-option", inputs: ["value", "viewValue", "disabled"], outputs: ["onSelectionChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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: IdsAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `ids-autocomplete[ngModel]:not([formControl]):not([formControlName]),
-              ids-autocomplete[formControl]:not([ngModel]):not([formControlName]),
-              ids-autocomplete[formControlName]:not([ngModel]):not([formControl])`, imports: [
-                        CdkOverlayOrigin,
-                        FormsModule,
-                        IdsFormFieldActionDirective,
-                        IdsInputDirective,
-                        IdsIconComponent,
-                        IdsIconButtonComponent,
-                        IdsOverlayPanelComponent,
-                        IdsOptionComponent,
-                        IdsSpinnerComponent,
-                        IdsTooltipDirective,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsAutocompleteComponent },
-                        { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsAutocompleteComponent },
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => IdsAutocompleteComponent),
-                            multi: true,
-                        },
-                    ], host: {
-                        role: 'combobox',
-                        'aria-autocomplete': 'list',
-                        'aria-haspopup': 'listbox',
-                        '[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
-                        '[attr.aria-controls]': 'overlayPanel().open() ? id() + "-panel" : null',
-                        '[attr.aria-owns]': 'overlayPanel().open() ? id() + "-panel" : null',
-                        '[attr.aria-expanded]': 'overlayPanel().open()',
-                        '[attr.aria-label]': 'ariaLabel() || null',
-                        '[attr.aria-labelledby]': 'ariaLabelledby() || null',
-                        '[attr.aria-required]': 'required().toString()',
-                        '[attr.aria-disabled]': 'disabled().toString()',
-                        '[attr.aria-invalid]': 'hasErrorState()',
+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]': '"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()',
                         '(keydown)': '_handleKeydown($event)',
                         '(focus)': 'focus()',
                         '(blur)': '_onBlur()',
-                    }, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  idsInput\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"false\"\n  [(ngModel)]=\"_searchText\"\n  (click)=\"_onInputClick()\"\n  (blur)=\"_onBlur()\"\n/>\n@if (_searchText().length > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelClearButton()\"\n      [idsTooltip]=\"ariaLabelClearButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n    </button>\n  </div>\n}\n@if (!isLoading && optionsLength > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelToggleButton()\"\n      [idsTooltip]=\"ariaLabelToggleButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"overlay.open() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n  </div>\n}\n@if (isLoading) {\n  <div idsFormFieldAction>\n    <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n  </div>\n}\n<ids-overlay-panel\n  #overlay\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n" }]
-        }], ctorParameters: () => [] });
+                    },
+                    exportAs: 'idsAutocompleteTrigger',
+                }]
+        }], ctorParameters: () => [], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "idsAutocompleteTriggerFor", required: true }] }] } });
+
+class IdsAutocompleteChipListComponent {
+    constructor() {
+        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
+        type="button"
+        [appearance]="appearance()"
+        [size]="size()"
+        [variant]="variant()"
+        [disabled]="autocompleteTrigger().autocomplete().disabled()"
+        [removable]="true"
+        (removed)="autocompleteTrigger().removeOption(option)"
+      >
+        {{ option.viewValue }}
+      </button>
+    }
+  `, 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: "21.2.5", ngImport: i0, type: IdsAutocompleteChipListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ids-autocomplete-chip-list',
+                    host: {
+                        class: 'ids-autocomplete-chip-list',
+                    },
+                    imports: [IdsChipComponent],
+                    template: `
+    @for (option of autocompleteTrigger().selected; track $index) {
+      <button
+        idsChip
+        type="button"
+        [appearance]="appearance()"
+        [size]="size()"
+        [variant]="variant()"
+        [disabled]="autocompleteTrigger().autocomplete().disabled()"
+        [removable]="true"
+        (removed)="autocompleteTrigger().removeOption(option)"
+      >
+        {{ option.viewValue }}
+      </button>
+    }
+  `,
+                }]
+        }], 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" }] : /* istanbul ignore next */ []));
+        this.size = input(IdsSize.COMFORTABLE, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    }
+    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 />
+      </ids-hint-message>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: IdsHintMessageComponent, selector: "ids-hint-message" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsAutocompleteHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ids-autocomplete-hint',
+                    host: {
+                        class: 'ids-autocomplete-hint',
+                    },
+                    imports: [IdsHintMessageComponent],
+                    template: `
+    <div class="ids-autocomplete-hint__wrapper">
+      <ids-hint-message [size]="size()" [variant]="variant()">
+        <ng-content />
+      </ids-hint-message>
+    </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" }]
         }] });
 
+const IDS_INPUT_DEFAULT_CONFIG = new InjectionToken('IDS_INPUT_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_INPUT_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_INPUT_DEFAULT_CONFIG_FACTORY() {
+    return {
+        errorStateMatcher: ErrorStateMatcher,
+        successStateMatcher: SuccessStateMatcher,
+    };
+}
+
+const defaultConfig = IDS_INPUT_DEFAULT_CONFIG_FACTORY();
+const IDS_INPUT_INVALID_TYPES = [
+    'button',
+    'checkbox',
+    'file',
+    'hidden',
+    'image',
+    'radio',
+    'range',
+    'reset',
+    'submit',
+];
+class IdsInputDirective extends IdsFormFieldControl {
+    constructor() {
+        super(...arguments);
+        this._elementRef = inject(ElementRef);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
+        this._focused = false;
+        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" }] : /* 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()) {
+                this.focus();
+            }
+        };
+    }
+    get _hostName() {
+        return 'input';
+    }
+    ngAfterViewInit() {
+        queueMicrotask(() => {
+            const control = this.ngControl()?.control;
+            if (control) {
+                this._disabled.set(control.status === 'DISABLED');
+                control.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((event) => this.updateControlState(event));
+            }
+        });
+    }
+    _validateType(type) {
+        if (isDevMode() && IDS_INPUT_INVALID_TYPES.indexOf(type) > -1) {
+            throw this._createHostError(`Input type ${type} is not supportedby idsInput`);
+        }
+    }
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+    }
+    _focusChanged(isFocused) {
+        if (isFocused !== this._focused) {
+            this._focused = isFocused;
+        }
+    }
+    updateControlState(event) {
+        this._errorStateTracker?.updateErrorState();
+        this._successStateTracker?.updateSuccessState();
+        if (event instanceof StatusChangeEvent) {
+            this._disabled.set(event.status === 'DISABLED');
+        }
+    }
+    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: "21.2.5", ngImport: i0, type: IdsInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[idsInput][ngModel]:not([formControl]):not([formControlName]),
+             input[idsInput][formControl]:not([ngModel]):not([formControlName]),
+             input[idsInput][formControlName]:not([ngModel]):not([formControl]),
+             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),
+             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),
+             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])`,
+                    exportAs: 'idsInput',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: IDS_FORM_FIELD_CONTROL,
+                            useExisting: IdsInputDirective,
+                        },
+                    ],
+                    host: {
+                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.readonly]': 'readonly() ? "" : null',
+                        '(focus)': '_focusChanged(true)',
+                        '(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',
     ERROR: 'error',
@@ -1478,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',
@@ -1518,5 +1742,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractErrorStateMatcher, AbstractSuccessStateMatcher, ErrorStateMatcher, ErrorStateTracker, IDS_AUTOCOMPLETE_DEFAULT_CONFIG, IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY, IDS_AUTOCOMPLETE_LOADER, IDS_FIELDSET_DEFAULT_CONFIG, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY, IDS_FORM_FIELD_CONTROL, IDS_FORM_FIELD_DEFAULT_CONFIG, IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IDS_INPUT_DEFAULT_CONFIG, IDS_INPUT_DEFAULT_CONFIG_FACTORY, IDS_MESSAGE_DEFAULT_CONFIG, IDS_MESSAGE_DEFAULT_CONFIG_FACTORY, IDS_OPTION_GROUP, IDS_OPTION_PARENT_COMPONENT, IDS_PSEUDO_CHECKBOX_PARENT, IdsAutocompleteComponent, IdsErrorDefinitionDirective, IdsErrorMessageComponent, IdsFieldsetComponent, IdsFieldsetMessageDirective, IdsFieldsetRowComponent, IdsFormFieldActionDirective, IdsFormFieldComponent, IdsFormFieldControl, IdsFormFieldVariant, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective, IdsMessageDirective, IdsMessagePrefixDirective, IdsMessageSuffixDirective, IdsMessageVariant, IdsOptionComponent, IdsOptionGroupComponent, IdsOptionSelectionChange, IdsPrefixDirective, IdsPseudoCheckboxState, IdsSuccessMessageComponent, IdsSuffixDirective, IdsValidators, Message, PseudoCheckboxComponent, SuccessStateMatcher, SuccessStateTracker, _countGroupLabelsBeforeOption, _getOptionScrollPosition, formFieldControlClass, requiredFalseValidator, requiredTrueValidator, requiredValidator };
+export { AbstractErrorStateMatcher, AbstractSuccessStateMatcher, ErrorStateMatcher, ErrorStateTracker, IDS_AUTOCOMPLETE_DEFAULT_CONFIG, IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY, IDS_FIELDSET_DEFAULT_CONFIG, IDS_FIELDSET_DEFAULT_CONFIG_FACTORY, IDS_FORM_FIELD_CONTROL, IDS_FORM_FIELD_DEFAULT_CONFIG, IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY, IDS_INPUT_DEFAULT_CONFIG, IDS_INPUT_DEFAULT_CONFIG_FACTORY, IDS_MESSAGE_DEFAULT_CONFIG, IDS_MESSAGE_DEFAULT_CONFIG_FACTORY, IDS_OPTION_GROUP, IDS_OPTION_PARENT_COMPONENT, IDS_PSEUDO_CHECKBOX_PARENT, IdsAutocompleteChipListComponent, IdsAutocompleteComponent, IdsAutocompleteHintComponent, IdsAutocompleteTriggerDirective, IdsErrorDefinitionDirective, IdsErrorMessageComponent, IdsFieldsetComponent, IdsFieldsetMessageDirective, IdsFieldsetRowComponent, IdsFormFieldActionDirective, IdsFormFieldComponent, IdsFormFieldControl, IdsFormFieldVariant, IdsHintMessageComponent, IdsInputDirective, IdsLabelDirective, IdsMessageDirective, IdsMessagePrefixDirective, IdsMessageSuffixDirective, IdsMessageVariant, IdsOptionComponent, IdsOptionGroupComponent, IdsOptionSelectionChange, IdsPrefixDirective, IdsPseudoCheckboxState, IdsSuccessMessageComponent, IdsSuffixDirective, IdsValidators, Message, PseudoCheckboxComponent, SuccessStateMatcher, SuccessStateTracker, _countGroupLabelsBeforeOption, _getOptionScrollPosition, formFieldControlClass, requiredFalseValidator, requiredTrueValidator, requiredValidator };
 //# sourceMappingURL=i-cell-ids-angular-forms.mjs.map