@i-cell/ids-angular 0.2.22 → 0.2.24

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, of, startWith } 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 {
 }
@@ -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() {
@@ -384,6 +171,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
+const IdsFormFieldVariant = {
+    SURFACE: 'surface',
+    LIGHT: 'light',
+};
+
 const IDS_FORM_FIELD_DEFAULT_CONFIG = new InjectionToken('IDS_FORM_FIELD_DEFAULT_CONFIG', {
     providedIn: 'root',
     factory: IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY,
@@ -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: "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,
+                }]
+        }] });
+
 class IdsPrefixDirective {
     constructor() {
         this.isLeadingIcon = false;
@@ -816,253 +620,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             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" }]
         }] });
 
-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" }] : []));
+        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 '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: "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();
         });
     }
-    _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);
+            }
         }
     }
-    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: [
+    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_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: "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_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: () => [] });
+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._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.ariaLabelClear = input('', ...(ngDevMode ? [{ debugName: "ariaLabelClear" }] : []));
+        this.ariaLabelLoading = input('', ...(ngDevMode ? [{ debugName: "ariaLabelLoading" }] : []));
+        this.multiSelect = input(false, ...(ngDevMode ? [{ debugName: "multiSelect", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
-        this.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.sortCompareFn = input((a, b) => a.viewValue.localeCompare(b.viewValue), ...(ngDevMode ? [{ debugName: "sortCompareFn" }] : []));
+        this.valueCompareFn = input((o1, o2) => JSON.stringify(o1) === JSON.stringify(o2), ...(ngDevMode ? [{ debugName: "valueCompareFn" }] : []));
+        this.trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
         this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+        this.panelOpen = model(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : []));
+        this.options = contentChildren(IdsOptionComponent, ...(ngDevMode ? [{ debugName: "options", descendants: true }] : [{ descendants: true }]));
+        this.optionGroups = contentChildren(IDS_OPTION_GROUP, ...(ngDevMode ? [{ debugName: "optionGroups", descendants: true }] : [{ descendants: true }]));
+        this.overlayPanel = viewChild('overlayPanel', ...(ngDevMode ? [{ debugName: "overlayPanel" }] : []));
+        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel", read: (ElementRef) }] : [{ read: (ElementRef) }]));
+        this.appearance = input(IdsIconButtonAppearance.STANDARD, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
         this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : []));
         this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : []));
-        this.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 = () => { };
+        this.spinnerVariant = input(IdsSpinnerVariant.SURFACE, ...(ngDevMode ? [{ debugName: "spinnerVariant" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this._parentFormField = inject(IdsFormFieldComponent);
+        // declarations of IdsFormFieldControl variables
+        this._defaultConfig = this._getDefaultConfig(defaultConfig$1, IDS_AUTOCOMPLETE_DEFAULT_CONFIG);
+        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
+        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
+        this._elementRef = inject(ElementRef);
         this._hostClasses = computed(() => this._getHostClasses([
             this.parentSize(),
-            this.parentVariant(),
             this.disabled() ? 'disabled' : null,
-            this.readonly() ? 'readonly' : null,
         ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
         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;
+        // #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();
-            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();
+            const overlayPanelOpen = this.overlayPanel()?.open() ?? false;
             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,276 +890,493 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         this._errorStateTracker?.updateErrorState();
         this._successStateTracker?.updateSuccessState();
     }
-    ngOnDestroy() {
-        this._keyManager?.destroy();
-    }
-    _initKeyManager() {
-        this._keyManager = new ActiveDescendantKeyManager(this.options())
-            .withTypeAhead(this.typeaheadDebounceInterval())
-            .withVerticalOrientation()
-            .withHorizontalOrientation('ltr')
-            .withHomeAndEnd()
-            .withPageUpDown()
-            .withAllowedModifierKeys(['shiftKey'])
-            .skipPredicate(this._skipPredicate);
-        this._keyManager.change.subscribe(() => {
-            if (this.overlayPanel().open() && this._panel()) {
-                this._scrollOptionIntoView(this._keyManager?.activeItemIndex || 0);
-            }
-        });
-    }
-    _subscribeOptionChanges() {
-        this.options().forEach((option) => {
-            option.onSelectionChange.subscribe((change) => {
-                this._handleOptionChange(change);
-            });
-        });
-    }
-    _handleOptionChange(change) {
-        const { source, selected, isUserInput } = change;
-        if (!this.multiSelect()) {
-            this._clearSelection();
-        }
-        source.selected.set(selected);
-        if (isUserInput) {
-            this._keyManager?.setActiveItem(source);
-        }
-        if (isUserInput && !this.multiSelect() && this.overlayPanel().open()) {
-            this.close();
-        }
-        if (this.multiSelect()) {
-            this._sortValues();
-        }
-        if (selected) {
-            this._selectionModel?.select(source.viewValue());
-            this._searchText.set(source.viewValue());
+    // #region ControlValueAccessor implementation
+    writeValue(value) {
+        if (value !== null) {
+            this._patchValue(value);
         }
         else {
-            this._selectionModel?.deselect(source.viewValue());
+            this.trigger()?.clear();
         }
-        this._handleChange();
-        this._onTouched();
-        this._inputElemment()?.nativeElement.blur();
-        this.overlayPanel().open.set(false);
+        this._value = value;
     }
-    _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);
-        }
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    _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);
-            }
-        }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    _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 isArrowKey = key === 'ArrowDown' || key === 'ArrowUp';
-        const isTyping = manager?.isTyping();
-        if (isArrowKey && event.altKey) {
-            event.preventDefault();
-            this.close();
-        }
-        else if (!isTyping && (key === 'Enter' || key === ' ') && manager?.activeItem && !hasModifierKey(event)) {
-            event.preventDefault();
-            manager.activeItem.selectViaInteraction();
+    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;
         }
-        else if (!isTyping && this.multiSelect() && key === 'a' && event.ctrlKey) {
-            event.preventDefault();
-            const hasDeselectedOptions = this.options().some((opt) => !opt.disabled && !opt.selected());
-            this.options().forEach((option) => {
-                if (!option.disabled) {
-                    hasDeselectedOptions ? option.select() : option.deselect();
+    }
+    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();
                 }
             });
-        }
-        else {
-            const previouslyFocusedIndex = manager?.activeItemIndex;
-            manager?.onKeydown(event);
-            if (this.multiSelect() &&
-                isArrowKey &&
-                event.shiftKey &&
-                manager?.activeItem &&
-                manager?.activeItemIndex !== previouslyFocusedIndex) {
-                manager?.activeItem.selectViaInteraction();
+        }, ...(ngDevMode ? [{ debugName: "patchEffect", injector: this._injector, manualCleanup: true }] : [{ injector: this._injector, manualCleanup: true }]));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClear: { classPropertyName: "ariaLabelClear", publicName: "ariaLabelClear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelLoading: { classPropertyName: "ariaLabelLoading", publicName: "ariaLabelLoading", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, spinnerVariant: { classPropertyName: "spinnerVariant", publicName: "spinnerVariant", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelOpen: "panelOpenChange" }, providers: [
+            { 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: "20.1.7", 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: () => [] });
+
+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", alias: 'idsAutocompleteTriggerFor' }] : [{ alias: 'idsAutocompleteTriggerFor' }]));
+        this._disabled = computed(() => this.autocomplete().disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        this._readonly = computed(() => this.autocomplete().readonly(), ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+        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();
+                    }
+                }
+            });
+        });
     }
-    _scrollOptionIntoView(index) {
-        const option = this.options()[index];
-        if (option) {
-            const panel = this._panel().nativeElement;
-            const element = option.getHostElement();
-            if (index === 0) {
-                panel.scrollTop = 0;
+    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 {
-                panel.scrollTop = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, panel.scrollTop, panel.offsetHeight);
+                this._updateInputValue(this.selected[0]?.viewValue);
             }
-        }
-    }
-    _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)));
-        }
+            this.autocomplete().handleChange(this.autocomplete().multiSelect() ? this.selected.map((option) => option.value) : (this.selected[0]?.value ?? null));
+            this.autocomplete().onTouched();
+        });
     }
-    _getOverlayWidth(preferredOrigin) {
-        const refToMeasure = preferredOrigin instanceof CdkOverlayOrigin ? preferredOrigin.elementRef : preferredOrigin || this._elementRef;
-        return refToMeasure.nativeElement.getBoundingClientRect().width;
+    ngOnDestroy() {
+        this._keyManager?.destroy();
     }
     toggle() {
-        this.overlayPanel().open() ? this.close() : this.open();
+        this.autocomplete().panelOpen() ? this.close() : this.open();
     }
     open() {
         if (!this._canOpen()) {
             return;
         }
-        if (this._parentFormField) {
-            this._preferredOverlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
-        }
-        this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
-        this.overlayPanel().open.set(true);
+        this.autocomplete().setPanelOpen();
         this._keyManager?.withHorizontalOrientation(null);
-        this._highlightCorrectOption();
-        this._changeDetectorRef.markForCheck();
+        // wait for opening panel...
+        afterNextRender(() => {
+            this._scrollOptionIntoView(this._keyManager?.activeItemIndex ?? 0);
+            this._highlightCorrectOption();
+        }, { injector: this._injector });
     }
     close() {
-        if (this.overlayPanel().open()) {
-            this.overlayPanel().open.set(false);
-            this._changeDetectorRef.markForCheck();
-            this._onTouched();
+        if (this.autocomplete().panelOpen()) {
+            this.autocomplete().panelOpen.set(false);
+            this._keyManager?.withHorizontalOrientation('ltr');
+            this.autocomplete().onTouched();
         }
     }
     clear() {
-        this._searchText.set('');
-    }
-    // #region ControlValueAccessor implementation
-    writeValue(value) {
-        this._setSelectionByValue(value);
+        this._clearSelection();
+        this._updateInputValue('');
     }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
+    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);
+        }
     }
-    setDisabledState(isDisabled) {
-        this._disabled.set(isDisabled);
-        this._changeDetectorRef.markForCheck();
+    focus(options) {
+        this._inputElement.nativeElement.focus(options);
+        this.open();
     }
-    // #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) {
+    setSelectionByValue(value) {
+        if (this.autocomplete().multiSelect() && value !== null) {
             if (!Array.isArray(value)) {
-                throw this._createHostError('value must be an array in multiple-selection mode');
+                throw this.autocomplete().createHostError('value must be an array in multiple-selection mode');
+            }
+            else {
+                value.forEach((currentValue) => this._selectValue(currentValue));
             }
-            value.forEach((currentValue) => this._selectValue(currentValue));
-            this._sortValues();
         }
         else {
             const correspondingOption = this._selectValue(value);
             if (correspondingOption) {
                 this._keyManager?.updateActiveItem(correspondingOption);
             }
-            else if (!this.overlayPanel().open()) {
+            else if (!this.autocomplete().panelOpen()) {
                 this._keyManager?.updateActiveItem(-1);
             }
         }
     }
-    _selectValue(value) {
-        const valueCompareFn = this.valueCompareFn();
-        const correspondingOption = this.options().find((option) => {
-            if (this._selectionModel?.isSelected(option.viewValue())) {
-                return false;
-            }
-            try {
-                return valueCompareFn?.(option.value(), value);
-            }
-            catch (error) {
-                if (isDevMode()) {
-                    console.warn(error);
+    _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.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();
                 }
-                return false;
+                this.focus();
+                this.close();
+            }
+        });
+        this._keyManager.change.subscribe(() => {
+            if (this.autocomplete().panelOpen()) {
+                this._scrollOptionIntoView(this._keyManager?.activeItemIndex ?? 0);
             }
         });
-        if (correspondingOption) {
-            correspondingOption.selected.set(true);
-            this._selectionModel?.select(correspondingOption.viewValue());
+    }
+    _subscribeOptionChanges() {
+        this.autocomplete()
+            .options()
+            .forEach((option) => {
+            option.onSelectionChange.subscribe((change) => {
+                this._handleOptionChange(change);
+            });
+        });
+    }
+    _handleOptionChange(change) {
+        const { source, selected, isUserInput } = change;
+        if (!this.autocomplete().multiSelect()) {
+            this._clearSelection();
+        }
+        source.selected.set(selected);
+        if (isUserInput) {
+            this._keyManager?.setActiveItem(source);
+        }
+        if (isUserInput && !this.autocomplete().multiSelect() && this.autocomplete().panelOpen()) {
+            this.close();
+        }
+        const optionValue = this._getAsOptionValue(source);
+        if (selected) {
+            this._selectionModel?.select(optionValue);
+        }
+        else {
+            this._selectionModel?.deselect(optionValue);
         }
-        return correspondingOption;
     }
     _clearSelection() {
         this._selectionModel?.clear();
-        this.options().forEach((option) => {
+        this._clearOptionsSelection();
+    }
+    _clearOptionsSelection() {
+        this.autocomplete()
+            .options()
+            .forEach((option) => {
+            option.setInactiveStyles();
             option.selected.set(false);
         });
     }
-    _handleChange() {
-        const selectionModelValues = this._selectionModel?.selected;
-        if (this.multiSelect()) {
-            this._onChange(selectionModelValues);
+    _canOpen() {
+        return !this._readonly() && !this._disabled();
+    }
+    _handleOpenedPanelKeydown(event) {
+        const manager = this._keyManager;
+        const key = event.key;
+        const isArrowKey = key === 'ArrowDown' || key === 'ArrowUp';
+        const isTyping = manager !== undefined && manager.isTyping();
+        const isEscapeKey = key === 'Escape';
+        if ((isArrowKey && event.altKey) || isEscapeKey) {
+            event.preventDefault();
+            this.close();
+        }
+        else if (!isTyping && (key === 'Enter' || key === ' ') && manager?.activeItem && !hasModifierKey(event)) {
+            event.preventDefault();
+            manager.activeItem.selectViaInteraction();
+        }
+        else if (!isTyping && this.autocomplete().multiSelect() && key === 'a' && event.ctrlKey) {
+            event.preventDefault();
+            const hasDeselectedOptions = this.autocomplete()
+                .options()
+                .some((opt) => !opt.disabled && !opt.selected());
+            this.autocomplete()
+                .options()
+                .forEach((option) => {
+                if (!option.disabled) {
+                    hasDeselectedOptions ? option.select() : option.deselect();
+                }
+            });
         }
         else {
-            this._onChange(selectionModelValues?.[0]);
+            const previouslyFocusedIndex = manager?.activeItemIndex;
+            manager?.onKeydown(event);
+            this._scrollOptionIntoView(manager?.activeItemIndex ?? 0);
+            if (this.autocomplete().multiSelect() &&
+                isArrowKey &&
+                event.shiftKey &&
+                manager?.activeItem &&
+                manager?.activeItemIndex !== previouslyFocusedIndex) {
+                manager?.activeItem.selectViaInteraction();
+            }
+        }
+    }
+    _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();
+        }
+        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);
+            }
         }
-        this._changeDetectorRef.markForCheck();
     }
     _highlightCorrectOption() {
         if (this._keyManager) {
-            if (this._empty) {
+            if (this._selectionModel?.isEmpty() ?? true) {
                 let firstEnabledOptionIndex = -1;
-                for (let index = 0; index < this.options().length; index++) {
-                    const option = this.options()[index];
+                for (let index = 0; index < this.autocomplete().options().length; index++) {
+                    const option = this.autocomplete().options()[index];
                     if (!option.disabled) {
                         firstEnabledOptionIndex = index;
                         break;
@@ -1353,104 +1386,182 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             }
             else {
                 if (this._selectionModel) {
-                    const activeItem = this.options().find((option) => this._selectionModel?.isSelected(option.viewValue()));
-                    if (activeItem) {
-                        this._keyManager.setActiveItem(activeItem);
-                    }
+                    this._keyManager.setActiveItem(this.selectedOptions[0]);
                 }
             }
         }
     }
-    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);
+    _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 {
+                const newScrollPosition = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, this.autocomplete().getScrollTop(), this.autocomplete().panel()?.nativeElement.offsetHeight);
+                this.autocomplete().setScrollTop(newScrollPosition);
+            }
         }
     }
-    _onBlur() {
-        this._focused.set(false);
-        this._keyManager?.cancelTypeahead();
-        if (!this.disabled() && !this.overlayPanel().open()) {
-            this._onTouched();
-            this._changeDetectorRef.markForCheck();
+    _selectValue(value) {
+        const valueCompareFn = this.autocomplete().valueCompareFn();
+        const correspondingOption = this.autocomplete()
+            .options()
+            .find((option) => {
+            if (this._selectionModel && this._selectionModel.isSelected(this._getAsOptionValue(option))) {
+                return false;
+            }
+            try {
+                return valueCompareFn?.(option.value(), value);
+            }
+            catch (error) {
+                if (isDevMode()) {
+                    console.warn(error);
+                }
+                return false;
+            }
+        });
+        if (correspondingOption) {
+            correspondingOption.selected.set(true);
+            const correspondingOptionValue = this._getAsOptionValue(correspondingOption);
+            this._selectionModel?.select(correspondingOptionValue);
         }
+        return correspondingOption;
     }
-    _getAriaActiveDescendant() {
-        if (this.overlayPanel().open() && this._keyManager?.activeItem) {
-            return this._keyManager.activeItem.id();
-        }
-        return null;
+    _updateCurrentSelection() {
+        this._clearOptionsSelection();
+        this.selectedOptions.reverse().forEach((option) => {
+            option.selected.set(true);
+            option.setActiveStyles();
+            this._keyManager?.setActiveItem(option);
+        });
     }
-    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: "20.1.7", ngImport: i0, type: IdsAutocompleteTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsAutocompleteTriggerDirective, isStandalone: true, selector: "input[idsAutocompleteTriggerFor]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "idsAutocompleteTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.role": "_disabled() ? null : \"combobox\"", "attr.autocomplete": "_disabled() ? \"off\" : \"auto\"", "attr.aria-autocomplete": "_disabled() ? null : \"list\"", "attr.aria-activedescendant": "_getAriaActiveDescendant()", "attr.aria-owns": "autocomplete().panelOpen() ? autocomplete().id() + \"-panel\" : null", "attr.aria-expanded": "_disabled() ? null : autocomplete().panelOpen().toString()", "attr.aria-controls": "(_disabled() || !autocomplete().panelOpen()) ? null : autocomplete()?.id()", "attr.aria-haspopup": "_disabled() ? null : \"listbox\"", "attr.tabindex": "_disabled() ? -1 : autocomplete().tabIndex()", "attr.aria-required": "autocomplete().required().toString()", "attr.aria-disabled": "_disabled().toString()", "attr.aria-invalid": "autocomplete().hasErrorState()", "attr.readonly": "_readonly() ? \"true\" : null", "disabled": "_disabled()" }, classAttribute: "ids-form-field-control" }, exportAs: ["idsAutocompleteTrigger"], ngImport: i0 }); }
 }
-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: "20.1.7", ngImport: i0, type: IdsAutocompleteTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[idsAutocompleteTriggerFor]',
+                    host: {
+                        class: 'ids-form-field-control',
+                        '[attr.role]': '_disabled() ? null : "combobox"',
+                        '[attr.autocomplete]': '_disabled() ? "off" : "auto"',
+                        '[attr.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" }]
+                    },
+                    exportAs: 'idsAutocompleteTrigger',
+                }]
         }], ctorParameters: () => [] });
 
+class IdsAutocompleteChipListComponent {
+    constructor() {
+        this.autocompleteTrigger = input.required(...(ngDevMode ? [{ debugName: "autocompleteTrigger", alias: 'for' }] : [{ alias: 'for' }]));
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.appearance = input(IdsChipAppearance.OUTLINED, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        this.size = input(IdsSize.COMPACT, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = input(IdsChipVariant.SURFACE, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteChipListComponent, isStandalone: true, selector: "ids-autocomplete-chip-list", inputs: { autocompleteTrigger: { classPropertyName: "autocompleteTrigger", publicName: "for", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-autocomplete-chip-list" }, ngImport: i0, template: `
+    @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: "20.1.7", 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>
+    }
+  `,
+                }]
+        }] });
+
+class IdsAutocompleteHintComponent {
+    constructor() {
+        this.variant = input(IdsMessageVariant.SURFACE, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.size = input(IdsSize.COMFORTABLE, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: IdsAutocompleteHintComponent, isStandalone: true, selector: "ids-autocomplete-hint", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-autocomplete-hint" }, ngImport: i0, template: `
+    <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: "20.1.7", 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>
+  `,
+                }]
+        }] });
+
 class IdsFieldsetRowComponent extends ComponentBase {
     constructor() {
         super(...arguments);
@@ -1467,6 +1578,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             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" }] : []));
+        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();
+            }
+        };
+    }
+    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: "20.1.7", ngImport: i0, type: IdsInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsInputDirective, isStandalone: true, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)" }, properties: { "attr.placeholder": "placeholder()", "attr.disabled": "disabled() ? \"\" : null", "attr.readonly": "readonly() ? \"\" : null" } }, providers: [
+            {
+                provide: IDS_FORM_FIELD_CONTROL,
+                useExisting: IdsInputDirective,
+            },
+        ], exportAs: ["idsInput"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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: [
+                        {
+                            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)',
+                    },
+                }]
+        }] });
+
 const Message = {
     HINT: 'hint',
     ERROR: 'error',
@@ -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