@i-cell/ids-angular 0.0.0-watch

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

@@ -0,0 +1,972 @@
+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 { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { hasModifierKey } from '@angular/cdk/keycodes';
+
+class AbstractErrorStateMatcher {
+}
+class ErrorStateMatcher extends AbstractErrorStateMatcher {
+    isErrorState(control, form) {
+        return !!(control && control.invalid && (control.touched || (form && form.submitted)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class ErrorStateTracker {
+    constructor(_matcher, _ngControl, _parentFormGroup, _parentForm, _stateChanges) {
+        this._matcher = _matcher;
+        this._ngControl = _ngControl;
+        this._parentFormGroup = _parentFormGroup;
+        this._parentForm = _parentForm;
+        this._stateChanges = _stateChanges;
+        /** Whether the tracker is currently in an error state. */
+        this.hasErrorState = false;
+    }
+    /** Updates the error state based on the provided error state matcher. */
+    updateErrorState() {
+        const oldState = this.hasErrorState;
+        const parent = this._parentFormGroup || this._parentForm;
+        const matcher = this._matcher;
+        const control = this._ngControl ? (this._ngControl.control) : null;
+        const newState = matcher?.isErrorState(control, parent) ?? false;
+        if (newState !== oldState) {
+            this.hasErrorState = newState;
+            this._stateChanges?.next();
+        }
+    }
+}
+
+class AbstractSuccessStateMatcher {
+}
+class SuccessStateMatcher extends AbstractSuccessStateMatcher {
+    isSuccessState(control, form) {
+        return !!(control && control.valid && (control.touched || (form && form.submitted)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SuccessStateMatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class SuccessStateTracker {
+    constructor(_matcher, _ngControl, _parentFormGroup, _parentForm, _stateChanges) {
+        this._matcher = _matcher;
+        this._ngControl = _ngControl;
+        this._parentFormGroup = _parentFormGroup;
+        this._parentForm = _parentForm;
+        this._stateChanges = _stateChanges;
+        /** Whether the tracker is currently in an success state. */
+        this.hasSuccessState = false;
+    }
+    /** Updates the success state based on the provided success state matcher. */
+    updateSuccessState() {
+        const oldState = this.hasSuccessState;
+        const parent = this._parentFormGroup || this._parentForm;
+        const matcher = this._matcher;
+        const control = this._ngControl ? (this._ngControl.control) : null;
+        const newState = matcher?.isSuccessState(control, parent) ?? false;
+        if (newState !== oldState) {
+            this.hasSuccessState = newState;
+            this._stateChanges?.next();
+        }
+    }
+}
+
+class IdsFieldsetRowComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this._hostClasses = signal(this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    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 }); }
+}
+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,
+    };
+}
+
+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$3 = IDS_FIELDSET_DEFAULT_CONFIG_FACTORY();
+class IdsFieldsetComponent extends ComponentBaseWithDefaults {
+    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" }] : []));
+        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" }]
+        }] });
+
+const IDS_FORM_FIELD_CONTROL = new InjectionToken('IDS_FORM_FIELD_CONTROL');
+
+const formFieldControlClass = 'ids-form-field-control';
+class IdsFormFieldControl extends ComponentBaseWithDefaults {
+    constructor() {
+        super();
+        this._injector = inject(Injector);
+        this._parentForm = inject(NgForm, { optional: true });
+        this._parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this.ngControl = signal(null, ...(ngDevMode ? [{ debugName: "ngControl" }] : []));
+        this.errorStateChanges = new Subject();
+        this.successStateChanges = new Subject();
+        this.canHandleSuccessState = input(false, ...(ngDevMode ? [{ debugName: "canHandleSuccessState" }] : []));
+        this.hasErrorState = signal(false, ...(ngDevMode ? [{ debugName: "hasErrorState" }] : []));
+        this.hasSuccessState = signal(false, ...(ngDevMode ? [{ debugName: "hasSuccessState" }] : []));
+        this._canHandleSuccessStateEffect = effect(() => {
+            this._setSuccessStateTracker(this.canHandleSuccessState());
+        }, ...(ngDevMode ? [{ debugName: "_canHandleSuccessStateEffect" }] : []));
+        /** Handles the `disabled` input binding */
+        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", transform: booleanAttribute, alias: 'disabled' }] : [{ transform: booleanAttribute, alias: 'disabled' }]));
+        /** Stores the `disabled` state internally */
+        this._disabled = signal(this.disabledInput(), ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+        /** The input's `disabled` state as a read-only signal (to enable/disable the contol programmatically, use the FormControl's related API) */
+        this.disabled = computed(() => this._disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** This effect is triggered if the `disabled` attribute binding changes and delegates the change to the underlying FormControl */
+        this._disabledInputEffect = effect(() => {
+            const enableOrDisable = this.disabledInput() ? 'disable' : 'enable';
+            const controlDir = this.ngControl();
+            // The NgControl's `control` property might not be initialized so we delay the enable/disable call
+            // (the FormControl's enable/disable method call will trigger a StatusChangeEvent and/or the ControlValueAccessor's setDisabledState() callback
+            // so that we can update the `disabled` signal)
+            queueMicrotask(() => controlDir?.control?.[enableOrDisable]());
+        }, ...(ngDevMode ? [{ debugName: "_disabledInputEffect" }] : []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        // Get the NgControl reference as soon as we can
+        queueMicrotask(() => {
+            this.ngControl.set(this._injector.get(NgControl, null, { self: true }));
+            this._initErrorStateTracker();
+        });
+    }
+    setDescribedByIds(ids) {
+        if (ids.length) {
+            this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            this._elementRef.nativeElement.removeAttribute('aria-describedby');
+        }
+    }
+    _initErrorStateTracker() {
+        this._errorStateTracker = new ErrorStateTracker(this.errorStateMatcher(), this.ngControl(), this._parentFormGroup, this._parentForm, this.errorStateChanges);
+        this.errorStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasErrorState.set(this._errorStateTracker.hasErrorState));
+        this._errorStateTracker.updateErrorState();
+    }
+    _setSuccessStateTracker(canHandleSuccessState) {
+        if (canHandleSuccessState) {
+            this._successStateTracker = new SuccessStateTracker(this.successStateMatcher(), this.ngControl(), this._parentFormGroup, this._parentForm, this.successStateChanges);
+            this._successStateSubscription = this.successStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasSuccessState.set(this._successStateTracker.hasSuccessState));
+            this._successStateTracker.updateSuccessState();
+        }
+        else {
+            this._successStateTracker = undefined;
+            this._successStateSubscription?.unsubscribe();
+            this.hasSuccessState.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsFormFieldControl, isStandalone: true, inputs: { canHandleSuccessState: { classPropertyName: "canHandleSuccessState", publicName: "canHandleSuccessState", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldControl, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+const IDS_FORM_FIELD_DEFAULT_CONFIG = new InjectionToken('IDS_FORM_FIELD_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_FORM_FIELD_DEFAULT_CONFIG_FACTORY() {
+    return {
+        size: IdsSize.COMPACT,
+        variant: IdsFormFieldVariant.SURFACE,
+    };
+}
+
+class IdsFormFieldActionDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsFormFieldActionDirective, isStandalone: true, selector: "[idsFormFieldAction]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsFormFieldAction]',
+                    standalone: true,
+                }]
+        }] });
+
+class IdsPrefixDirective {
+    constructor() {
+        this.isLeadingIcon = false;
+    }
+    set idsLeadingIcon(value) {
+        this.isLeadingIcon = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsPrefixDirective, isStandalone: true, selector: "[idsPrefix], [idsLeadingIcon]", inputs: { idsLeadingIcon: "idsLeadingIcon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsPrefix], [idsLeadingIcon]',
+                    standalone: true,
+                }]
+        }], propDecorators: { idsLeadingIcon: [{
+                type: Input,
+                args: ['idsLeadingIcon']
+            }] } });
+
+class IdsSuffixDirective {
+    constructor() {
+        this.isTrailingIcon = false;
+    }
+    set idsTrailingIcon(value) {
+        this.isTrailingIcon = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsSuffixDirective, isStandalone: true, selector: "[idsSuffix], [idsTrailingIcon]", inputs: { idsTrailingIcon: "idsTrailingIcon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsSuffix], [idsTrailingIcon]',
+                    standalone: true,
+                }]
+        }], propDecorators: { idsTrailingIcon: [{
+                type: Input,
+                args: ['idsTrailingIcon']
+            }] } });
+
+function isEmptyInputValue(value) {
+    return (value == null || ((typeof value === 'string' || Array.isArray(value)) && value.length === 0));
+}
+class IdsValidators {
+    static required(control) {
+        return requiredValidator(control);
+    }
+    static requiredTrue(control) {
+        return requiredTrueValidator(control);
+    }
+    static requiredFalse(control) {
+        return requiredFalseValidator(control);
+    }
+}
+function requiredValidator(control) {
+    return isEmptyInputValue(control.value) ? { required: true } : null;
+}
+function requiredTrueValidator(control) {
+    return control.value === true ? null : { requiredTrue: true };
+}
+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
+ * ```html
+ * <ids-form-field>
+ *   <ids-label>Input field</ids-label>
+ *   <input
+ *     idsInput
+ *     ngModel
+ *     customValidator
+ *     required
+ *     [minlength]="3"
+ *     [maxlength]="10"
+ *     [pattern]="validPattern"
+ *   >
+ *   <ids-error-message>
+ *     <ids-error-def code="required">{{ 'ERROR.REQUIRED.CUSTOM' | translate }}</ids-error-def>
+ *     <ids-error-def code="minlength">'minLength' error message</ids-error-def>
+ *     <ids-error-def code="maxlength">'maxLength' error message</ids-error-def>
+ *     <ids-error-def code="pattern">'pattern' error message with interpolation: {{ model.value }}</ids-error-def>
+ *     <ids-error-def code="custom">Custom validator error message</ids-error-def>
+ *   </ids-error-message>
+ * </ids-form-field>
+ * ```
+ */
+class IdsErrorDefinitionDirective {
+    constructor() {
+        /**
+         * The validation error's identifier code
+         */
+        this.code = input.required(...(ngDevMode ? [{ debugName: "code" }] : []));
+        this._elementRef = inject(ElementRef);
+    }
+    /**
+     * The validation error's message that will be presented to the user
+     */
+    get errorMessage() {
+        return this._elementRef.nativeElement.innerText;
+    }
+    /**
+     * Creates a IdsErrorMessageMapping instance based on this directive's state (code, errorMessage)
+     * @returns A IdsErrorMessageMapping instance
+     */
+    toErrorMessageMapping() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        return {
+            code: this.code(),
+            message: () => self.errorMessage,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorDefinitionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsErrorDefinitionDirective, isStandalone: true, selector: "ids-error-def", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorDefinitionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ids-error-def',
+                }]
+        }] });
+
+class IdsMessageSuffixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsMessageSuffixDirective, isStandalone: true, selector: "[idsMessageSuffix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsMessageSuffix]',
+                    standalone: true,
+                }]
+        }] });
+
+const IdsMessageVariant = {
+    SURFACE: 'surface',
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+
+const IDS_MESSAGE_DEFAULT_CONFIG = new InjectionToken('IDS_MESSAGE_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_MESSAGE_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_MESSAGE_DEFAULT_CONFIG_FACTORY() {
+    return {
+        size: IdsSize.COMPACT,
+        variant: IdsMessageVariant.SURFACE,
+    };
+}
+
+// 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();
+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.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this._parentOrSelfSize = computed(() => this._parent?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "_parentOrSelfSize" }] : []));
+        this._parentOrSelfVariant = computed(() => this._parent?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "_parentOrSelfVariant" }] : []));
+        this._parentDisabled = computed(() => this._parent?.disabled(), ...(ngDevMode ? [{ debugName: "_parentDisabled" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this._parentOrSelfSize(),
+            this._parentOrSelfVariant(),
+            this._parentDisabled() ? 'disabled' : null,
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    get _hostName() {
+        return 'message';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsMessageDirective, isStandalone: true, selector: "[idsMessage]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsMessage]',
+                    standalone: true,
+                }]
+        }] });
+
+class IdsErrorMessageComponent extends ComponentBase {
+    get _hostName() {
+        return 'error-message';
+    }
+    constructor() {
+        super();
+        this._parent = inject(IdsFormFieldComponent, { skipSelf: true });
+        this._control = signal(null, ...(ngDevMode ? [{ debugName: "_control" }] : []));
+        this._errorDefDirs = contentChildren(IdsErrorDefinitionDirective, ...(ngDevMode ? [{ debugName: "_errorDefDirs" }] : []));
+        this._errorDefs = computed(() => this._errorDefDirs().map((errorDefDir) => errorDefDir.toErrorMessageMapping()), ...(ngDevMode ? [{ debugName: "_errorDefs" }] : []));
+        this._validationError = signal(null, ...(ngDevMode ? [{ debugName: "_validationError" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
+        toObservable(this._parent.controlDir).pipe(observeOn(asapScheduler), tap((controlDir) => this._control.set(controlDir?.control ?? null)), switchMap(() => this._control()?.statusChanges.pipe(startWith(this._control()?.status)) ?? of(null)), takeUntilDestroyed(this._destroyRef)).subscribe((status) => {
+            if (status === 'INVALID') {
+                const nextError = this._selectMostImportantValidationError();
+                this._validationError.set(nextError);
+            }
+            else {
+                this._validationError.set(null);
+            }
+        });
+    }
+    _selectMostImportantValidationError() {
+        const errorDefs = this._errorDefs();
+        const control = this._control();
+        if (!errorDefs?.length || !control?.errors || Object.keys(control.errors).length === 0) {
+            return null;
+        }
+        const errorCodes = new Set(Object.keys(control.errors));
+        return errorDefs.find((errorDef) => errorCodes.has(errorDef.code)) ?? null;
+    }
+    _getValidationErrorMessage(messageOrFn) {
+        return messageOrFn instanceof Function ? messageOrFn() : messageOrFn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsErrorMessageComponent, isStandalone: true, selector: "ids-error-message", queries: [{ propertyName: "_errorDefDirs", predicate: IdsErrorDefinitionDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"exclamation-circle\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsErrorMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-error-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"exclamation-circle\" variant=\"error\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  @let validationError = _validationError();\n  @if (validationError) {\n    @let messageString = _getValidationErrorMessage(validationError.message);\n    {{ messageString }}\n  }\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class IdsMessagePrefixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessagePrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsMessagePrefixDirective, isStandalone: true, selector: "[idsMessagePrefix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsMessagePrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsMessagePrefix]',
+                    standalone: true,
+                }]
+        }] });
+
+class IdsHintMessageComponent {
+    constructor() {
+        this.prefixes = contentChildren(IdsMessagePrefixDirective, ...(ngDevMode ? [{ debugName: "prefixes" }] : []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsHintMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsHintMessageComponent, isStandalone: true, selector: "ids-hint-message", host: { classAttribute: "ids-hint-message" }, queries: [{ propertyName: "prefixes", predicate: IdsMessagePrefixDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], hostDirectives: [{ directive: IdsMessageDirective, inputs: ["size", "size", "variant", "variant"] }], ngImport: i0, template: "@if (prefixes().length) {\n  <div class=\"ids-message__prefix\">\n    <ng-content select=\"[idsMessagePrefix]\" />\n  </div>\n}\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsHintMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-hint-message', imports: [], host: {
+                        class: 'ids-hint-message',
+                    }, hostDirectives: [
+                        {
+                            directive: IdsMessageDirective,
+                            inputs: [
+                                'size: size',
+                                'variant: variant',
+                            ],
+                        },
+                    ], encapsulation: ViewEncapsulation.None, template: "@if (prefixes().length) {\n  <div class=\"ids-message__prefix\">\n    <ng-content select=\"[idsMessagePrefix]\" />\n  </div>\n}\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
+        }] });
+
+class IdsSuccessMessageComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective, ...(ngDevMode ? [{ debugName: "suffixes" }] : []));
+    }
+    get _hostName() {
+        return 'success-message';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" variant=\"success\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-success-message', imports: [IdsIconComponent], hostDirectives: [IdsMessageDirective], encapsulation: ViewEncapsulation.None, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" variant=\"success\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n" }]
+        }] });
+
+const defaultConfig$1 = 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._fieldWrapper = viewChild.required('fieldWrapper');
+        this._child = contentChild.required(IDS_FORM_FIELD_CONTROL);
+        this._hintMessages = contentChildren(IdsHintMessageComponent, ...(ngDevMode ? [{ debugName: "_hintMessages", descendants: true }] : [{ descendants: true }]));
+        this._successMessages = contentChildren(IdsSuccessMessageComponent, ...(ngDevMode ? [{ debugName: "_successMessages", descendants: true }] : [{ descendants: true }]));
+        this._errorMessages = contentChildren(IdsErrorMessageComponent, ...(ngDevMode ? [{ debugName: "_errorMessages", descendants: true }] : [{ descendants: true }]));
+        this._actions = contentChildren(IdsFormFieldActionDirective, ...(ngDevMode ? [{ debugName: "_actions" }] : []));
+        this._prefixes = contentChildren(IdsPrefixDirective, ...(ngDevMode ? [{ debugName: "_prefixes" }] : []));
+        this._suffixes = contentChildren(IdsSuffixDirective, ...(ngDevMode ? [{ debugName: "_suffixes" }] : []));
+        this._hasActions = computed(() => Boolean(this._actions().length), ...(ngDevMode ? [{ debugName: "_hasActions" }] : []));
+        this._hasLeadingIcon = computed(() => Boolean(this._prefixes().filter((prefix) => prefix.isLeadingIcon).length), ...(ngDevMode ? [{ debugName: "_hasLeadingIcon" }] : []));
+        this._hasPrefix = computed(() => Boolean(this._prefixes().filter((prefix) => !prefix.isLeadingIcon).length), ...(ngDevMode ? [{ debugName: "_hasPrefix" }] : []));
+        this._hasSuffix = computed(() => Boolean(this._suffixes().filter((suffix) => !suffix.isTrailingIcon).length), ...(ngDevMode ? [{ debugName: "_hasSuffix" }] : []));
+        this._hasTrailingIcon = computed(() => Boolean(this._suffixes().filter((suffix) => suffix.isTrailingIcon).length), ...(ngDevMode ? [{ debugName: "_hasTrailingIcon" }] : []));
+        this._inputId = computed(() => this._child()?.id(), ...(ngDevMode ? [{ debugName: "_inputId" }] : []));
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.parentOrSelfSize = computed(() => this._parentFieldset?.size() ?? this.size(), ...(ngDevMode ? [{ debugName: "parentOrSelfSize" }] : []));
+        this.parentOrSelfVariant = computed(() => this._parentFieldset?.variant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "parentOrSelfVariant" }] : []));
+        this.controlDir = computed(() => this._child().ngControl(), ...(ngDevMode ? [{ debugName: "controlDir" }] : []));
+        this.disabled = computed(() => Boolean(this._child().disabled()), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.readonly = computed(() => Boolean(this._child().readonly()), ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this._hasErrorState = computed(() => Boolean(this._child().hasErrorState()), ...(ngDevMode ? [{ debugName: "_hasErrorState" }] : []));
+        this._hasSuccessState = computed(() => Boolean(this._child().hasSuccessState()), ...(ngDevMode ? [{ debugName: "_hasSuccessState" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.parentOrSelfSize(),
+            this.parentOrSelfVariant(),
+            this.disabled() ? 'disabled' : null,
+            this._hasErrorState() ? 'invalid' : null,
+            this._hasSuccessState() ? 'valid' : null,
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this._displayedMessages = computed(() => {
+            if (this._errorMessages().length > 0 && this._hasErrorState()) {
+                return 'error';
+            }
+            if (this._successMessages().length > 0 && this._hasSuccessState()) {
+                return 'success';
+            }
+            if (this._hintMessages().length > 0) {
+                return 'hint';
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "_displayedMessages" }] : []));
+        this.hasRequiredValidator = computed(() => {
+            const control = this.controlDir()?.control;
+            return this._child().required()
+                || control?.hasValidator(Validators.required)
+                || control?.hasValidator(Validators.requiredTrue)
+                || control?.hasValidator(IdsValidators.required)
+                || control?.hasValidator(IdsValidators.requiredTrue)
+                || control?.hasValidator(IdsValidators.requiredFalse);
+        }, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
+    }
+    get _hostName() {
+        return 'form-field';
+    }
+    getConnectedOverlayOrigin() {
+        return this._fieldWrapper();
+    }
+    containerClick(event) {
+        const containerClick = this._child().onContainerClick;
+        if (containerClick) {
+            containerClick(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsFormFieldComponent, isStandalone: true, selector: "ids-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_child", first: true, predicate: IDS_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_hintMessages", predicate: IdsHintMessageComponent, descendants: true, isSignal: true }, { propertyName: "_successMessages", predicate: IdsSuccessMessageComponent, descendants: true, isSignal: true }, { propertyName: "_errorMessages", predicate: IdsErrorMessageComponent, descendants: true, isSignal: true }, { propertyName: "_actions", predicate: IdsFormFieldActionDirective, isSignal: true }, { propertyName: "_prefixes", predicate: IdsPrefixDirective, isSignal: true }, { propertyName: "_suffixes", predicate: IdsSuffixDirective, isSignal: true }], viewQueries: [{ propertyName: "_fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"ids-form-field__label\" [for]=\"_inputId()\">\n  @if (hasRequiredValidator()) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\n  <ng-content select=\"ids-label\" />\n</label>\n\n<div #fieldWrapper class=\"ids-form-field__field-wrapper\">\n  <div class=\"ids-form-field__field-wrapper__container\" (click)=\"containerClick($event)\">\n    @if (_hasLeadingIcon()) {\n      <div class=\"ids-form-field__leading-icon\">\n        <ng-content select=\"ids-icon[idsLeadingIcon]\" />\n      </div>\n    }\n    @if (_hasPrefix()) {\n      <div class=\"ids-form-field__prefix\">\n        <ng-content select=\"[idsPrefix]\" />\n      </div>\n    }\n    <div class=\"ids-form-field__infix\">\n      <ng-content />\n    </div>\n    @if (_hasSuffix()) {\n      <div class=\"ids-form-field__suffix\">\n        <ng-content select=\"[idsSuffix]\" />\n      </div>\n    }\n    @if (_hasTrailingIcon()) {\n      <div class=\"ids-form-field__trailing-icon\">\n        <ng-content select=\"ids-icon[idsTrailingIcon]\" />\n      </div>\n    }\n  </div>\n  @if (_hasActions()) {\n    <div class=\"ids-form-field__field-wrapper__action\">\n      <ng-content select=\"[idsFormFieldAction]\" />\n    </div>\n  }\n</div>\n\n<div class=\"ids-form-field__subscript-wrapper\">\n  @let messages = _displayedMessages();\n  @if (messages) {\n    <div class=\"ids-form-field__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"success\") {\n          <ng-content select=\"ids-success-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-form-field', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ids-form-field__label\" [for]=\"_inputId()\">\n  @if (hasRequiredValidator()) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\n  <ng-content select=\"ids-label\" />\n</label>\n\n<div #fieldWrapper class=\"ids-form-field__field-wrapper\">\n  <div class=\"ids-form-field__field-wrapper__container\" (click)=\"containerClick($event)\">\n    @if (_hasLeadingIcon()) {\n      <div class=\"ids-form-field__leading-icon\">\n        <ng-content select=\"ids-icon[idsLeadingIcon]\" />\n      </div>\n    }\n    @if (_hasPrefix()) {\n      <div class=\"ids-form-field__prefix\">\n        <ng-content select=\"[idsPrefix]\" />\n      </div>\n    }\n    <div class=\"ids-form-field__infix\">\n      <ng-content />\n    </div>\n    @if (_hasSuffix()) {\n      <div class=\"ids-form-field__suffix\">\n        <ng-content select=\"[idsSuffix]\" />\n      </div>\n    }\n    @if (_hasTrailingIcon()) {\n      <div class=\"ids-form-field__trailing-icon\">\n        <ng-content select=\"ids-icon[idsTrailingIcon]\" />\n      </div>\n    }\n  </div>\n  @if (_hasActions()) {\n    <div class=\"ids-form-field__field-wrapper__action\">\n      <ng-content select=\"[idsFormFieldAction]\" />\n    </div>\n  }\n</div>\n\n<div class=\"ids-form-field__subscript-wrapper\">\n  @let messages = _displayedMessages();\n  @if (messages) {\n    <div class=\"ids-form-field__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"success\") {\n          <ng-content select=\"ids-success-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+const IDS_INPUT_DEFAULT_CONFIG = new InjectionToken('IDS_INPUT_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_INPUT_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_INPUT_DEFAULT_CONFIG_FACTORY() {
+    return {
+        errorStateMatcher: ErrorStateMatcher,
+        successStateMatcher: SuccessStateMatcher,
+    };
+}
+
+const defaultConfig = IDS_INPUT_DEFAULT_CONFIG_FACTORY();
+const IDS_INPUT_INVALID_TYPES = [
+    'button',
+    'checkbox',
+    'file',
+    'hidden',
+    'image',
+    'radio',
+    'range',
+    'reset',
+    'submit',
+];
+class IdsInputDirective extends IdsFormFieldControl {
+    constructor() {
+        super(...arguments);
+        this._elementRef = inject(ElementRef);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
+        this._focused = false;
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
+        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([], [formFieldControlClass]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this._validateTypeEffect = effect(() => {
+            this._validateType(this.type());
+        }, ...(ngDevMode ? [{ debugName: "_validateTypeEffect" }] : []));
+        /**
+         * Should be an arrow function in order to handle `this` outside of this class
+         */
+        this.onContainerClick = () => {
+            if (!this._focused && !this.readonly() && !this.disabled) {
+                this.focus();
+            }
+        };
+    }
+    get _hostName() {
+        return 'input';
+    }
+    ngAfterViewInit() {
+        queueMicrotask(() => {
+            const control = this.ngControl()?.control;
+            if (control) {
+                this._disabled.set(control.status === 'DISABLED');
+                control.events.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((event) => this.updateControlState(event));
+            }
+        });
+    }
+    _validateType(type) {
+        if (isDevMode() && IDS_INPUT_INVALID_TYPES.indexOf(type) > -1) {
+            throw this._createHostError(`Input type ${type} is not supportedby idsInput`);
+        }
+    }
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+    }
+    _focusChanged(isFocused) {
+        if (isFocused !== this._focused) {
+            this._focused = isFocused;
+        }
+    }
+    updateControlState(event) {
+        this._errorStateTracker?.updateErrorState();
+        this._successStateTracker?.updateSuccessState();
+        if (event instanceof StatusChangeEvent) {
+            this._disabled.set(event.status === 'DISABLED');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsInputDirective, isStandalone: true, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, successStateMatcher: { classPropertyName: "successStateMatcher", publicName: "successStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)" }, properties: { "attr.placeholder": "placeholder()", "attr.disabled": "disabled() ? \"\" : null", "attr.readonly": "readonly() ? \"\" : null" } }, providers: [
+            {
+                provide: IDS_FORM_FIELD_CONTROL,
+                useExisting: IdsInputDirective,
+            },
+        ], exportAs: ["idsInput"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `input[idsInput][ngModel]:not([formControl]):not([formControlName]),
+             input[idsInput][formControl]:not([ngModel]):not([formControlName]),
+             input[idsInput][formControlName]:not([ngModel]):not([formControl]),
+             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),
+             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),
+             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])`,
+                    exportAs: 'idsInput',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: IDS_FORM_FIELD_CONTROL,
+                            useExisting: IdsInputDirective,
+                        },
+                    ],
+                    host: {
+                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.readonly]': 'readonly() ? "" : null',
+                        '(focus)': '_focusChanged(true)',
+                        '(blur)': '_focusChanged(false)',
+                    },
+                }]
+        }] });
+
+const Message = {
+    HINT: 'hint',
+    ERROR: 'error',
+    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" }] : []));
+    }
+    get _hostName() {
+        return 'option-group';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: IdsOptionGroupComponent, isStandalone: true, selector: "ids-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled().toString()", "attr.aria-labelledby": "_inert ? null : _labelId()" } }, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], usesInheritance: true, ngImport: i0, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+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 _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=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"check\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PseudoCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-pseudo-checkbox', imports: [IdsIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ids-pseudo-checkbox__input-wrapper\">\n  <input\n    type=\"checkbox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"_isIndeterminate() ? 'mixed' : null\"\n    [checked]=\"_isChecked()\"\n    [indeterminate]=\"_isIndeterminate()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-pseudo-checkbox__icon\" aria-hidden=\"true\">\n    @if (_isIndeterminate()) {\n      <ids-icon fontIcon=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"check\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n" }]
+        }] });
+
+class IdsOptionComponent extends ComponentBase {
+    get _hostName() {
+        return 'option';
+    }
+    constructor() {
+        super();
+        this._parent = inject(IDS_OPTION_PARENT_COMPONENT);
+        this._element = inject(ElementRef);
+        this.group = inject(IDS_OPTION_GROUP, { optional: true });
+        this._textElement = viewChild.required('text');
+        this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        this._active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+        this.size = computed(() => this._parent.parentSize(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.variant = computed(() => this._parent.parentVariant(), ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.explicitViewValue = input(null, ...(ngDevMode ? [{ debugName: "explicitViewValue", alias: 'viewValue' }] : [{ alias: 'viewValue' }]));
+        this.disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: 'disabled', transform: coerceBooleanAttribute }] : [{ alias: 'disabled', transform: coerceBooleanAttribute }]));
+        this.disabled = false; // Do not delete this class member, until ListKeyManagerOption requires: `disabled: boolean`
+        this._groupOrOptionIsDisabled = computed(() => this.group?.disabled() || this.disabledInput(), ...(ngDevMode ? [{ debugName: "_groupOrOptionIsDisabled" }] : []));
+        this._multiSelect = Boolean(this._parent?.multiSelect());
+        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();
+        });
+    }
+    ngOnInit() {
+        const parent = this._parent;
+        if (parent.isOptionPreSelectedByValue(this.value())) {
+            this.selected.set(true);
+        }
+    }
+    _handleKeydown(event) {
+        if ((event.key === 'ENTER' || event.key === ' ') && !hasModifierKey(event)) {
+            this.selectViaInteraction();
+            event.preventDefault();
+        }
+    }
+    selectViaInteraction() {
+        if (!this._groupOrOptionIsDisabled()) {
+            this._emitSelectionChangeEvent(!this.selected(), true);
+        }
+    }
+    getHostElement() {
+        return this._element.nativeElement;
+    }
+    select(emitEvent = true) {
+        if (!this.selected()) {
+            if (emitEvent) {
+                this._emitSelectionChangeEvent(true);
+            }
+        }
+    }
+    deselect(emitEvent = true) {
+        if (this.selected()) {
+            if (emitEvent) {
+                this._emitSelectionChangeEvent(false);
+            }
+        }
+    }
+    focus(_origin, options) {
+        const element = this._element.nativeElement;
+        if (typeof element.focus === 'function') {
+            element.focus(options);
+        }
+    }
+    setActiveStyles() {
+        if (!this._active()) {
+            this._active.set(true);
+        }
+    }
+    setInactiveStyles() {
+        if (this._active()) {
+            this._active.set(false);
+        }
+    }
+    getLabel() {
+        return this.viewValue();
+    }
+    _emitSelectionChangeEvent(selected, isUserInput = false) {
+        if (this._multiSelect || !this.selected()) {
+            this.onSelectionChange.emit(new IdsOptionSelectionChange(this, selected, isUserInput));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsOptionComponent, isStandalone: true, selector: "ids-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, explicitViewValue: { classPropertyName: "explicitViewValue", publicName: "viewValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled.toString()" } }, providers: [
+            {
+                provide: IDS_PSEUDO_CHECKBOX_PARENT,
+                useExisting: IdsOptionComponent,
+            },
+        ], viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["text"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_multiSelect) {\n  <ids-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"_groupOrOptionIsDisabled()\" [checkboxState]=\"_pseudoCheckboxState()\" />\n}\n\n<div #text class=\"ids-option__text\"><ng-content /></div>\n\n@if (!_multiSelect && selected()) {\n  <ids-icon fontIcon=\"check\" />\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: PseudoCheckboxComponent, selector: "ids-pseudo-checkbox", inputs: ["checkboxState", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-option', imports: [
+                        IdsIconComponent,
+                        PseudoCheckboxComponent,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: IDS_PSEUDO_CHECKBOX_PARENT,
+                            useExisting: IdsOptionComponent,
+                        },
+                    ], host: {
+                        'role': 'option',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '(click)': 'selectViaInteraction()',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, template: "@if (_multiSelect) {\n  <ids-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"_groupOrOptionIsDisabled()\" [checkboxState]=\"_pseudoCheckboxState()\" />\n}\n\n<div #text class=\"ids-option__text\"><ng-content /></div>\n\n@if (!_multiSelect && selected()) {\n  <ids-icon fontIcon=\"check\" />\n}\n" }]
+        }], ctorParameters: () => [] });
+function _countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
+    if (optionGroups.length) {
+        let groupCounter = 0;
+        for (let i = 0; i < optionIndex + 1; i++) {
+            if (options[i].group && options[i].group === optionGroups[groupCounter]) {
+                groupCounter++;
+            }
+        }
+        return groupCounter;
+    }
+    return 0;
+}
+function _getOptionScrollPosition(optionOffset, optionHeight, currentScrollPosition, panelHeight) {
+    if (optionOffset < currentScrollPosition) {
+        return optionOffset;
+    }
+    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
+        return Math.max(0, optionOffset - panelHeight + optionHeight);
+    }
+    return currentScrollPosition;
+}
+
+class IdsLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsLabelDirective, isStandalone: true, selector: "ids-label", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ids-label',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=i-cell-ids-angular-forms.mjs.map