@i-cell/ids-angular 0.2.16 → 0.2.18

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

@@ -1,11 +1,19 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, Directive, input, contentChildren, computed, inject, Injector, effect, booleanAttribute, Input, ElementRef, ChangeDetectorRef, viewChild, contentChild, isDevMode, output } from '@angular/core';
-import { ComponentBase, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import { NgForm, FormGroupDirective, NgControl, Validators, StatusChangeEvent } from '@angular/forms';
-import { Subject, observeOn, asapScheduler, tap, switchMap, of, startWith } from 'rxjs';
+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 { 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 { IdsOverlayPanelComponent } from '@i-cell/ids-angular/overlay-panel';
+import { IdsSpinnerComponent } from '@i-cell/ids-angular/spinner';
+import { IdsTooltipDirective } from '@i-cell/ids-angular/tooltip';
 
 class AbstractErrorStateMatcher {
 }
@@ -81,77 +89,228 @@ class SuccessStateTracker {
     }
 }
 
-class IdsFieldsetRowComponent extends ComponentBase {
-    constructor() {
-        super(...arguments);
-        this._hostClasses = signal(this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
-    }
-    get _hostName() {
-        return 'fieldset-row';
+const IDS_AUTOCOMPLETE_DEFAULT_CONFIG = new InjectionToken('IDS_AUTOCOMPLETE_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY,
+});
+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,
+    };
+}
+
+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;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: IdsFieldsetRowComponent, isStandalone: true, selector: "ids-fieldset-row", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ids-fieldset-row', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
-        }] });
 
 const IdsFormFieldVariant = {
     SURFACE: 'surface',
     LIGHT: 'light',
 };
 
-const IDS_FIELDSET_DEFAULT_CONFIG = new InjectionToken('IDS_FIELDSET_DEFAULT_CONFIG', {
-    providedIn: 'root',
-    factory: IDS_FIELDSET_DEFAULT_CONFIG_FACTORY,
-});
-function IDS_FIELDSET_DEFAULT_CONFIG_FACTORY() {
-    return {
-        size: IdsSize.COMPACT,
-        variant: IdsFormFieldVariant.SURFACE,
-    };
-}
+const IDS_PSEUDO_CHECKBOX_PARENT = new InjectionToken('IDS_PSEUDO_CHECKBOX_PARENT');
 
-class IdsFieldsetMessageDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsFieldsetMessageDirective, isStandalone: true, selector: "[idsFieldsetMessage]", ngImport: i0 }); }
+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: IdsFieldsetMessageDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[idsFieldsetMessage]',
-                    standalone: true,
-                }]
+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" }]
         }] });
 
-const defaultConfig$3 = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY();
-class IdsFieldsetComponent extends ComponentBaseWithDefaults {
+class IdsOptionComponent extends ComponentBase {
+    get _hostName() {
+        return 'option';
+    }
     constructor() {
-        super(...arguments);
-        this._defaultConfig = this._getDefaultConfig(defaultConfig$3, IDS_FIELDSET_DEFAULT_CONFIG);
-        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
-        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
-        this.legend = input('', ...(ngDevMode ? [{ debugName: "legend" }] : []));
-        this._fieldsetMessage = contentChildren(IdsFieldsetMessageDirective, ...(ngDevMode ? [{ debugName: "_fieldsetMessage" }] : []));
-        this._hasMessage = computed(() => this._fieldsetMessage().length > 0, ...(ngDevMode ? [{ debugName: "_hasMessage" }] : []));
+        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._textElement().nativeElement.textContent || this.explicitViewValue() || '', ...(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();
+        });
     }
-    get _hostName() {
-        return 'fieldset';
+    ngOnInit() {
+        const parent = this._parent;
+        if (parent.isOptionPreSelectedByValue(this.value())) {
+            this.selected.set(true);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsFieldsetComponent, isStandalone: true, selector: "fieldset[idsFieldset]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_fieldsetMessage", predicate: IdsFieldsetMessageDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _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: IdsFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fieldset[idsFieldset]', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n" }]
-        }] });
+            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;
+}
 
-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,
+                }]
+        }] });
 
 const formFieldControlClass = 'ids-form-field-control';
 class IdsFormFieldControl extends ComponentBaseWithDefaults {
@@ -236,17 +395,7 @@ function IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY() {
     };
 }
 
-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 IDS_FORM_FIELD_CONTROL = new InjectionToken('IDS_FORM_FIELD_CONTROL');
 
 class IdsPrefixDirective {
     constructor() {
@@ -314,13 +463,62 @@ function requiredFalseValidator(control) {
     return control.value === false ? null : { requiredFalse: true };
 }
 
-/**
- * Directive to map an error message to an error code for a form field.
- * Mappings must be defined between the directive element's tags ordered by priority (descending from top to bottom).
- * The error code is provided as an attribute, while the error message will be this directive's text content.
- * The latter can be a plain string literal or even an interpolated string value.
- *
- * @example
+const IDS_FIELDSET_DEFAULT_CONFIG = new InjectionToken('IDS_FIELDSET_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_FIELDSET_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_FIELDSET_DEFAULT_CONFIG_FACTORY() {
+    return {
+        size: IdsSize.COMPACT,
+        variant: IdsFormFieldVariant.SURFACE,
+    };
+}
+
+class IdsFieldsetMessageDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsFieldsetMessageDirective, isStandalone: true, selector: "[idsFieldsetMessage]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetMessageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsFieldsetMessage]',
+                    standalone: true,
+                }]
+        }] });
+
+const defaultConfig$4 = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY();
+class IdsFieldsetComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig$4, IDS_FIELDSET_DEFAULT_CONFIG);
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.legend = input('', ...(ngDevMode ? [{ debugName: "legend" }] : []));
+        this._fieldsetMessage = contentChildren(IdsFieldsetMessageDirective, ...(ngDevMode ? [{ debugName: "_fieldsetMessage" }] : []));
+        this._hasMessage = computed(() => this._fieldsetMessage().length > 0, ...(ngDevMode ? [{ debugName: "_hasMessage" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.size(),
+            this.variant(),
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    get _hostName() {
+        return 'fieldset';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsFieldsetComponent, isStandalone: true, selector: "fieldset[idsFieldset]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_fieldsetMessage", predicate: IdsFieldsetMessageDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fieldset[idsFieldset]', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n" }]
+        }] });
+
+/**
+ * Directive to map an error message to an error code for a form field.
+ * Mappings must be defined between the directive element's tags ordered by priority (descending from top to bottom).
+ * The error code is provided as an attribute, while the error message will be this directive's text content.
+ * The latter can be a plain string literal or even an interpolated string value.
+ *
+ * @example
  * ```html
  * <ids-form-field>
  *   <ids-label>Input field</ids-label>
@@ -411,12 +609,12 @@ function IDS_MESSAGE_DEFAULT_CONFIG_FACTORY() {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const IDS_MESSAGE_PARENT_FORM_FIELD = new InjectionToken('IDS_MESSAGE_PARENT_FORM_FIELD');
 
-const defaultConfig$2 = IDS_MESSAGE_DEFAULT_CONFIG_FACTORY();
+const defaultConfig$3 = IDS_MESSAGE_DEFAULT_CONFIG_FACTORY();
 class IdsMessageDirective extends ComponentBaseWithDefaults {
     constructor() {
         super(...arguments);
         this._parent = inject(IDS_MESSAGE_PARENT_FORM_FIELD, { skipSelf: true, optional: true });
-        this._defaultConfig = this._getDefaultConfig(defaultConfig$2, IDS_MESSAGE_DEFAULT_CONFIG);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig$3, IDS_MESSAGE_DEFAULT_CONFIG);
         this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
         this._parentOrSelfSize = computed(() => this._parent?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "_parentOrSelfSize" }] : []));
@@ -523,6 +721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 class IdsSuccessMessageComponent extends ComponentBase {
     constructor() {
         super(...arguments);
+        this._parent = inject(IDS_MESSAGE_PARENT_FORM_FIELD, { skipSelf: true, optional: true });
+        this._isDisabled = computed(() => this._parent?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : []));
         this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
         this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
     }
@@ -530,20 +730,20 @@ class IdsSuccessMessageComponent extends ComponentBase {
         return 'success-message';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    @if (_isDisabled()) {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" />\n    } @else {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n    }  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ids-success-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
+            args: [{ selector: 'ids-success-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    @if (_isDisabled()) {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" />\n    } @else {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"done\" variant=\"success\" />\n    }  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
         }] });
 
-const defaultConfig$1 = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY();
+const defaultConfig$2 = IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY();
 class IdsFormFieldComponent extends ComponentBaseWithDefaults {
     constructor() {
         super(...arguments);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._parentFieldset = inject(IdsFieldsetComponent, { optional: true });
-        this._defaultConfig = this._getDefaultConfig(defaultConfig$1, IDS_FORM_FIELD_DEFAULT_CONFIG);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig$2, IDS_FORM_FIELD_DEFAULT_CONFIG);
         this._fieldWrapper = viewChild.required('fieldWrapper');
         this._child = contentChild.required(IDS_FORM_FIELD_CONTROL);
         this._hintMessages = contentChildren(IdsHintMessageComponent, ...(ngDevMode ? [{ debugName: "_hintMessages", descendants: true }] : [{ descendants: true }]));
@@ -627,7 +827,7 @@ function IDS_INPUT_DEFAULT_CONFIG_FACTORY() {
     };
 }
 
-const defaultConfig = IDS_INPUT_DEFAULT_CONFIG_FACTORY();
+const defaultConfig$1 = IDS_INPUT_DEFAULT_CONFIG_FACTORY();
 const IDS_INPUT_INVALID_TYPES = [
     'button',
     'checkbox',
@@ -643,7 +843,7 @@ class IdsInputDirective extends IdsFormFieldControl {
     constructor() {
         super(...arguments);
         this._elementRef = inject(ElementRef);
-        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
+        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" }] : []));
@@ -729,229 +929,579 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }] });
 
-const Message = {
-    HINT: 'hint',
-    ERROR: 'error',
-    SUCCESS: 'success',
-};
-
-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;
-    }
-}
-
-class IdsOptionGroupComponent extends ComponentBase {
-    constructor() {
-        super(...arguments);
-        this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
-        this._inert = this._parent?.inertGroups ?? false;
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
-        this._labelId = computed(() => `${this.id()}-label`, ...(ngDevMode ? [{ debugName: "_labelId" }] : []));
-        this._hostClasses = computed(() => this._getHostClasses([
-            this.disabled() ? 'disabled' : null,
-            this._parent.parentSize(),
-            this._parent.parentVariant(),
-        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
-    }
+const defaultConfig = IDS_AUTOCOMPLETE_DEFAULT_CONFIG_FACTORY();
+const LIVE_ANNOUNCE_DURATION_MS = 10000;
+class IdsAutocompleteComponent extends IdsFormFieldControl {
     get _hostName() {
-        return 'option-group';
+        return 'autocomplete';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: IdsOptionGroupComponent, isStandalone: true, selector: "ids-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled().toString()", "attr.aria-labelledby": "_inert ? null : _labelId()" } }, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], usesInheritance: true, ngImport: i0, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ids-option-group', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], host: {
-                        '[attr.role]': '_inert ? null : "group"',
-                        '[attr.aria-disabled]': '_inert ? null : disabled().toString()',
-                        '[attr.aria-labelledby]': '_inert ? null : _labelId()',
-                    }, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n" }]
-        }] });
-
-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 _empty() {
+        return Boolean(this._selectionModel?.isEmpty());
     }
-    get _hostName() {
-        return 'pseudo-checkbox';
+    get selected() {
+        return this.multiSelect() ? this._selectionModel?.selected : this._selectionModel?.selected?.[0];
     }
-    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';
+    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._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._textElement().nativeElement.textContent || this.explicitViewValue() || '', ...(ngDevMode ? [{ debugName: "viewValue" }] : []));
+        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.tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex", transform: coerceNumberAttribute }] : [{ transform: coerceNumberAttribute }]));
+        this.typeaheadDebounceInterval = input(this._defaultConfig.typeaheadDebounceInterval, ...(ngDevMode ? [{ debugName: "typeaheadDebounceInterval", transform: coerceNumberAttribute }] : [{
+                transform: coerceNumberAttribute,
+            }]));
+        this.hintLoading = input(this._defaultConfig.hintLoading, ...(ngDevMode ? [{ debugName: "hintLoading" }] : []));
+        this.hintNoResults = input(this._defaultConfig.hintNoResults, ...(ngDevMode ? [{ debugName: "hintNoResults" }] : []));
+        this.hintMinChars = input(this._defaultConfig.hintMinChars, ...(ngDevMode ? [{ debugName: "hintMinChars" }] : []));
+        this.hintMaxLength = input(this._defaultConfig.hintMaxLength, ...(ngDevMode ? [{ debugName: "hintMaxLength" }] : []));
+        this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+        this.isPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelOpen" }] : []));
+        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.onContainerClick = () => { };
         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" }] : []));
+            this.parentSize(),
+            this.parentVariant(),
+            this.disabled() ? 'disabled' : null,
+            this.readonly() ? 'readonly' : null,
+        ], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this._panelClasses = computed(() => [
+            'ids-overlay-panel__autocomplete-panel',
+            this.panelClasses(),
+        ].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
+        this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
+        this._canOpen = computed(() => !this.isPanelOpen() && !this.disabled() && !this.readonly() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "_canOpen" }] : []));
+        this._panel = viewChild('overlayPanel', ...(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.isPanelOpen()) {
+                return false;
+            }
+            return option.disabledInput();
+        };
         effect(() => {
-            this.disabled = this.disabledInput();
+            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();
+            untracked(() => {
+                const control = this.ngControl();
+                if (control?.value && searchText !== control?.value) {
+                    control?.reset();
+                    this._clearSelection();
+                }
+            });
         });
     }
     ngOnInit() {
-        const parent = this._parent;
-        if (parent.isOptionPreSelectedByValue(this.value())) {
-            this.selected.set(true);
+        if (!this._parentFormField) {
+            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() {
+        queueMicrotask(() => {
+            const controlDir = this.ngControl();
+            if (controlDir?.control) {
+                controlDir.control.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.updateErrorAndSuccessState());
+            }
+        });
+    }
+    updateErrorAndSuccessState() {
+        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.isPanelOpen() && 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.isPanelOpen()) {
+            this.close();
+        }
+        if (this.multiSelect()) {
+            this._sortValues();
         }
+        if (selected) {
+            this._selectionModel?.select(source.viewValue());
+            this._searchText.set(source.viewValue());
+        }
+        else {
+            this._selectionModel?.deselect(source.viewValue());
+        }
+        this._handleChange();
+        this._onTouched();
+        this._inputElemment()?.nativeElement.blur();
+        this.isPanelOpen.set(false);
     }
     _handleKeydown(event) {
-        if ((event.key === 'ENTER' || event.key === ' ') && !hasModifierKey(event)) {
-            this.selectViaInteraction();
+        if (!this.disabled() && !this.readonly()) {
+            this.isPanelOpen() ? 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);
+        }
+    }
+    _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);
+            }
         }
     }
-    selectViaInteraction() {
-        if (!this._groupOrOptionIsDisabled()) {
-            this._emitSelectionChangeEvent(!this.selected(), true);
+    _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();
+        }
+        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();
+                }
+            });
+        }
+        else {
+            const previouslyFocusedIndex = manager?.activeItemIndex;
+            manager?.onKeydown(event);
+            if (this.multiSelect() &&
+                isArrowKey &&
+                event.shiftKey &&
+                manager?.activeItem &&
+                manager?.activeItemIndex !== previouslyFocusedIndex) {
+                manager?.activeItem.selectViaInteraction();
+            }
         }
     }
-    getHostElement() {
-        return this._element.nativeElement;
+    _scrollOptionIntoView(index) {
+        const option = this.options()[index];
+        if (option) {
+            const panel = this._panel().nativeElement;
+            const element = option.getHostElement();
+            if (index === 0) {
+                panel.scrollTop = 0;
+            }
+            else {
+                panel.scrollTop = _getOptionScrollPosition(element.offsetTop, element.offsetHeight, panel.scrollTop, panel.offsetHeight);
+            }
+        }
     }
-    select(emitEvent = true) {
-        if (!this.selected()) {
-            if (emitEvent) {
-                this._emitSelectionChangeEvent(true);
+    _sortValues() {
+        if (this.multiSelect()) {
+            const options = this.options().map((option) => option.viewValue());
+            const sortComparator = this.sortCompareFn();
+            this._selectionModel?.sort((a, b) => (sortComparator ? sortComparator(a, b, options) : options.indexOf(a) - options.indexOf(b)));
+        }
+    }
+    _getOverlayWidth(preferredOrigin) {
+        const refToMeasure = preferredOrigin instanceof CdkOverlayOrigin ? preferredOrigin.elementRef : preferredOrigin || this._elementRef;
+        return refToMeasure.nativeElement.getBoundingClientRect().width;
+    }
+    toggle() {
+        this.isPanelOpen() ? this.close() : this.open();
+    }
+    open() {
+        if (!this._canOpen()) {
+            return;
+        }
+        if (this._parentFormField) {
+            this._preferredOverlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
+        }
+        this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
+        this.isPanelOpen.set(true);
+        this._keyManager?.withHorizontalOrientation(null);
+        this._highlightCorrectOption();
+        this._changeDetectorRef.markForCheck();
+    }
+    close() {
+        if (this.isPanelOpen()) {
+            this.isPanelOpen.set(false);
+            this._changeDetectorRef.markForCheck();
+            this._onTouched();
+        }
+    }
+    clear() {
+        this.ngControl()?.control?.reset();
+        this._searchText.set('');
+        this._clearSelection();
+    }
+    // #region ControlValueAccessor implementation
+    writeValue(value) {
+        this._setSelectionByValue(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this._changeDetectorRef.markForCheck();
+    }
+    // #endregion
+    _setSelectionByValue(value) {
+        this.options().forEach((option) => {
+            option.setInactiveStyles();
+            option.selected.set(false);
+        });
+        this._selectionModel?.clear();
+        this._rawValue = value;
+        if (this.options().length === 0) {
+            return;
+        }
+        if (this.multiSelect() && value) {
+            if (!Array.isArray(value)) {
+                throw this._createHostError('value must be an array in multiple-selection mode');
+            }
+            value.forEach((currentValue) => this._selectValue(currentValue));
+            this._sortValues();
+        }
+        else {
+            const correspondingOption = this._selectValue(value);
+            if (correspondingOption) {
+                this._keyManager?.updateActiveItem(correspondingOption);
+            }
+            else if (!this.isPanelOpen()) {
+                this._keyManager?.updateActiveItem(-1);
             }
         }
     }
-    deselect(emitEvent = true) {
-        if (this.selected()) {
-            if (emitEvent) {
-                this._emitSelectionChangeEvent(false);
+    _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);
+                }
+                return false;
+            }
+        });
+        if (correspondingOption) {
+            correspondingOption.selected.set(true);
+            this._selectionModel?.select(correspondingOption.viewValue());
         }
+        return correspondingOption;
     }
-    focus(_origin, options) {
-        const element = this._element.nativeElement;
-        if (typeof element.focus === 'function') {
-            element.focus(options);
+    _clearSelection() {
+        this._selectionModel?.clear();
+        this.options().forEach((option) => {
+            option.selected.set(false);
+        });
+    }
+    _handleChange() {
+        const selectionModelValues = this._selectionModel?.selected;
+        if (this.multiSelect()) {
+            this._onChange(selectionModelValues);
+        }
+        else {
+            this._onChange(selectionModelValues?.[0]);
+        }
+        this._changeDetectorRef.markForCheck();
+    }
+    _highlightCorrectOption() {
+        if (this._keyManager) {
+            if (this._empty) {
+                let firstEnabledOptionIndex = -1;
+                for (let index = 0; index < this.options().length; index++) {
+                    const option = this.options()[index];
+                    if (!option.disabled) {
+                        firstEnabledOptionIndex = index;
+                        break;
+                    }
+                }
+                this._keyManager.setActiveItem(firstEnabledOptionIndex);
+            }
+            else {
+                if (this._selectionModel) {
+                    const activeItem = this.options().find((option) => this._selectionModel?.isSelected(option.viewValue()));
+                    if (activeItem) {
+                        this._keyManager.setActiveItem(activeItem);
+                    }
+                }
+            }
         }
     }
-    setActiveStyles() {
-        if (!this._active()) {
-            this._active.set(true);
+    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;
     }
-    setInactiveStyles() {
-        if (this._active()) {
-            this._active.set(false);
+    _onFocus() {
+        if (!this.disabled()) {
+            this._focused.set(true);
         }
     }
-    getLabel() {
-        return this.viewValue();
+    _onBlur() {
+        this._focused.set(false);
+        this._keyManager?.cancelTypeahead();
+        if (!this.disabled() && !this.isPanelOpen()) {
+            this._onTouched();
+            this._changeDetectorRef.markForCheck();
+        }
     }
-    _emitSelectionChangeEvent(selected, isUserInput = false) {
-        if (this._multiSelect || !this.selected()) {
-            this.onSelectionChange.emit(new IdsOptionSelectionChange(this, selected, isUserInput));
+    _getAriaActiveDescendant() {
+        if (this.isPanelOpen() && this._keyManager?.activeItem) {
+            return this._keyManager.activeItem.id();
         }
+        return null;
     }
-    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: [
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+    }
+    _onInputClick() {
+        if (!this._focused() && !this.readonly() && !this.disabled() && this._searchText().length) {
+            this.open();
+        }
+    }
+    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": "isPanelOpen() ? id() + \"-panel\" : null", "attr.aria-owns": "isPanelOpen() ? id() + \"-panel\" : null", "attr.aria-expanded": "isPanelOpen()", "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: IDS_PSEUDO_CHECKBOX_PARENT,
-                useExisting: IdsOptionComponent,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => IdsAutocompleteComponent),
+                multi: true,
             },
-        ], 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 }); }
+        ], viewQueries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["overlayPanel"], 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/>\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]=\"isPanelOpen() ? '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  #overlayPanel\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [open]=\"isPanelOpen()\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n  (closed)=\"isPanelOpen.set(false)\"\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"] }, { kind: "component", type: IdsOverlayPanelComponent, selector: "ids-overlay-panel", inputs: ["open", "origin", "positions", "appearance", "size", "variant", "panelClasses", "width"], outputs: ["closed"] }, { 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ids-option', imports: [
+            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,
-                        PseudoCheckboxComponent,
+                        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: IDS_PSEUDO_CHECKBOX_PARENT,
-                            useExisting: IdsOptionComponent,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => IdsAutocompleteComponent),
+                            multi: true,
                         },
                     ], host: {
-                        'role': 'option',
-                        '[attr.aria-selected]': 'selected()',
-                        '[attr.aria-disabled]': 'disabled.toString()',
-                        '(click)': 'selectViaInteraction()',
+                        role: 'combobox',
+                        'aria-autocomplete': 'list',
+                        'aria-haspopup': 'listbox',
+                        '[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
+                        '[attr.aria-controls]': 'isPanelOpen() ? id() + "-panel" : null',
+                        '[attr.aria-owns]': 'isPanelOpen() ? id() + "-panel" : null',
+                        '[attr.aria-expanded]': 'isPanelOpen()',
+                        '[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()',
                         '(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" }]
+                        '(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/>\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]=\"isPanelOpen() ? '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  #overlayPanel\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [open]=\"isPanelOpen()\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n  (closed)=\"isPanelOpen.set(false)\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n" }]
         }], ctorParameters: () => [] });
-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;
+
+class IdsFieldsetRowComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this._hostClasses = signal(this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
-    return 0;
+    get _hostName() {
+        return 'fieldset-row';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: IdsFieldsetRowComponent, isStandalone: true, selector: "ids-fieldset-row", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
-    if (optionOffset < currentScrollPosition) {
-        return optionOffset;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFieldsetRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-fieldset-row', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n" }]
+        }] });
+
+const Message = {
+    HINT: 'hint',
+    ERROR: 'error',
+    SUCCESS: 'success',
+};
+
+class IdsOptionGroupComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
+        this._inert = this._parent?.inertGroups ?? false;
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        this._labelId = computed(() => `${this.id()}-label`, ...(ngDevMode ? [{ debugName: "_labelId" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.disabled() ? 'disabled' : null,
+            this._parent.parentSize(),
+            this._parent.parentVariant(),
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
     }
-    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
-        return Math.max(0, optionOffset - panelHeight + optionHeight);
+    get _hostName() {
+        return 'option-group';
     }
-    return currentScrollPosition;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: IdsOptionGroupComponent, isStandalone: true, selector: "ids-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled().toString()", "attr.aria-labelledby": "_inert ? null : _labelId()" } }, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], usesInheritance: true, ngImport: i0, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-option-group', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], host: {
+                        '[attr.role]': '_inert ? null : "group"',
+                        '[attr.aria-disabled]': '_inert ? null : disabled().toString()',
+                        '[attr.aria-labelledby]': '_inert ? null : _labelId()',
+                    }, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n" }]
+        }] });
 
 class IdsLabelDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -969,5 +1519,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractErrorStateMatcher, AbstractSuccessStateMatcher, ErrorStateMatcher, ErrorStateTracker, 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, 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_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 };
 //# sourceMappingURL=i-cell-ids-angular-forms.mjs.map