@i-cell/ids-angular 0.1.0

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

@@ -0,0 +1,871 @@
+import * as i0 from '@angular/core';
+import { Injectable, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, input, contentChildren, computed, Input, inject, Injector, ChangeDetectorRef, viewChild, contentChild, isDevMode, ElementRef, effect, output } from '@angular/core';
+import { ComponentBase, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import { startWith, Subject } from 'rxjs';
+import { Validators, FormGroupDirective, NgForm, NgControl } from '@angular/forms';
+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: "19.1.2", ngImport: i0, type: ErrorStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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: "19.1.2", ngImport: i0, type: SuccessStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: SuccessStateMatcher, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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([]));
+    }
+    get _hostName() {
+        return 'fieldset-row';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.2", type: IdsFieldsetRowComponent, isStandalone: true, selector: "ids-fieldset-row", usesInheritance: true, ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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: "19.1.2", ngImport: i0, type: IdsFieldsetMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsFieldsetMessageDirective, isStandalone: true, selector: "[idsFieldsetMessage]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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);
+        this.variant = input(this._defaultConfig.variant);
+        this.legend = input('');
+        this._fieldsetMessage = contentChildren(IdsFieldsetMessageDirective);
+        this._hasMessage = computed(() => this._fieldsetMessage().length > 0);
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.size(),
+            this.variant(),
+        ]));
+    }
+    get _hostName() {
+        return 'fieldset';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsFieldsetComponent, isStandalone: true, selector: "fieldset[idsFieldset]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_fieldsetMessage", predicate: IdsFieldsetMessageDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<legend class=\"ids-fieldset-legend\">{{ legend() }}</legend>\n@if (_hasMessage()) {\n  <div class=\"ids-fieldset-message\">\n    <ng-content select=\"[idsFieldsetMessage]\" />\n  </div>\n}\n<ng-content select=\"ids-fieldset-row\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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 {
+}
+
+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: "19.1.2", ngImport: i0, type: IdsFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsFormFieldActionDirective, isStandalone: true, selector: "[idsFormFieldAction]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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: "19.1.2", ngImport: i0, type: IdsPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsPrefixDirective, isStandalone: true, selector: "[idsPrefix], [idsLeadingIcon]", inputs: { idsLeadingIcon: "idsLeadingIcon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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: "19.1.2", ngImport: i0, type: IdsSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsSuffixDirective, isStandalone: true, selector: "[idsSuffix], [idsTrailingIcon]", inputs: { idsTrailingIcon: "idsTrailingIcon" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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 };
+}
+
+class IdsMessageSuffixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsMessageSuffixDirective, isStandalone: true, selector: "[idsMessageSuffix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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);
+        this.variant = input(this._defaultConfig.variant);
+        this._parentOrSelfSize = computed(() => this._parent?.size() ?? this.size());
+        this._parentOrSelfVariant = computed(() => this._parent?.variant() ?? this.variant());
+        this._parentDisabled = computed(() => this._parent?.disabled());
+        this._hostClasses = computed(() => this._getHostClasses([
+            this._parentOrSelfSize(),
+            this._parentOrSelfVariant(),
+            this._parentDisabled() ? 'disabled' : null,
+        ]));
+    }
+    get _hostName() {
+        return 'message';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsMessageDirective, isStandalone: true, selector: "[idsMessage]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsMessage]',
+                    standalone: true,
+                }]
+        }] });
+
+class IdsErrorMessageComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this._injector = inject(Injector);
+        this._errors = signal(null);
+        this._hostClasses = computed(() => this._getHostClasses([]));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective);
+    }
+    get _hostName() {
+        return 'error-message';
+    }
+    ngOnInit() {
+        const parent = this._injector.get(IdsFormFieldComponent, null, { skipSelf: true, optional: true });
+        if (parent) {
+            const control = parent.control();
+            control?.statusChanges?.pipe(startWith(control.errors), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+                this._errors.set(control.errors);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsErrorMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsErrorMessageComponent, isStandalone: true, selector: "ids-error-message", queries: [{ propertyName: "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\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: 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\" />\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" }]
+        }] });
+
+class IdsMessagePrefixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessagePrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsMessagePrefixDirective, isStandalone: true, selector: "[idsMessagePrefix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsMessagePrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsMessagePrefix]',
+                    standalone: true,
+                }]
+        }] });
+
+class IdsHintMessageComponent {
+    constructor() {
+        this.prefixes = contentChildren(IdsMessagePrefixDirective);
+        this.suffixes = contentChildren(IdsMessageSuffixDirective);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsHintMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsHintMessageComponent, isStandalone: true, selector: "ids-hint-message", host: { classAttribute: "ids-hint-message" }, queries: [{ propertyName: "prefixes", predicate: IdsMessagePrefixDirective, isSignal: true }, { propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], hostDirectives: [{ directive: IdsMessageDirective, inputs: ["size", "size", "variant", "variant"] }], ngImport: i0, template: "@if (prefixes().length) {\n  <div class=\"ids-message__prefix\">\n    <ng-content select=\"[idsMessagePrefix]\" />\n  </div>\n}\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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([]));
+        this.suffixes = contentChildren(IdsMessageSuffixDirective);
+    }
+    get _hostName() {
+        return 'success-message';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuccessMessageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsSuccessMessageComponent, isStandalone: true, selector: "ids-success-message", queries: [{ propertyName: "suffixes", predicate: IdsMessageSuffixDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IdsMessageDirective }], ngImport: i0, template: "<div class=\"ids-message__prefix\">\n  <ng-content select=\"[idsMessagePrefix]\">\n    <ids-icon aria-hidden=\"true\" fontIcon=\"check\" />\n  </ng-content>\n</div>\n<div class=\"ids-message__text\">\n  <ng-content />\n</div>\n@if (suffixes().length) {\n  <div class=\"ids-message__suffix\">\n    <ng-content select=\"[idsMessageSuffix]\" />\n  </div>\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsSuccessMessageComponent, decorators: [{
+            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\" />\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(IDS_FORM_FIELD_CONTROL);
+        this._hintMessages = contentChildren(IdsHintMessageComponent, { descendants: true });
+        this._successMessages = contentChildren(IdsSuccessMessageComponent, { descendants: true });
+        this._errorMessages = contentChildren(IdsErrorMessageComponent, { descendants: true });
+        this._actions = contentChildren(IdsFormFieldActionDirective);
+        this._prefixes = contentChildren(IdsPrefixDirective);
+        this._suffixes = contentChildren(IdsSuffixDirective);
+        this.hasActions = computed(() => Boolean(this._actions().length));
+        this.hasLeadingIcon = computed(() => Boolean(this._prefixes().filter((prefix) => prefix.isLeadingIcon).length));
+        this.hasPrefix = computed(() => Boolean(this._prefixes().filter((prefix) => !prefix.isLeadingIcon).length));
+        this.hasSuffix = computed(() => Boolean(this._suffixes().filter((suffix) => !suffix.isTrailingIcon).length));
+        this.hasTrailingIcon = computed(() => Boolean(this._suffixes().filter((suffix) => suffix.isTrailingIcon).length));
+        this.inputId = computed(() => this._child()?.id());
+        this.size = input(this._defaultConfig.size);
+        this.variant = input(this._defaultConfig.variant);
+        this.parentOrSelfSize = computed(() => this._parentFieldset?.size() ?? this.size());
+        this.parentOrSelfVariant = computed(() => this._parentFieldset?.variant() ?? this.variant());
+        this.control = computed(() => this._child()?.ngControl);
+        this.disabled = computed(() => Boolean(this._child()?.disabled()));
+        this._hasErrorState = computed(() => Boolean(this._child()?.hasErrorState()));
+        this._hasSuccessState = computed(() => Boolean(this._child()?.hasSuccessState()));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.parentOrSelfSize(),
+            this.parentOrSelfVariant(),
+            this.disabled() ? 'disabled' : null,
+            this._hasErrorState() ? 'invalid' : null,
+            this._hasSuccessState() ? 'valid' : null,
+        ]));
+        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;
+        });
+    }
+    get _hostName() {
+        return 'form-field';
+    }
+    ngAfterContentInit() {
+        if (isDevMode() && !this._child()) {
+            throw this._createHostError('no form element was provided');
+        }
+        this._child()?.ngControl?.statusChanges?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    get hasRequiredValidator() {
+        const control = this.control()?.control;
+        if (!control) {
+            return Boolean(this._child()?.required());
+        }
+        return control.hasValidator(Validators.required)
+            || control.hasValidator(Validators.requiredTrue)
+            || control.hasValidator(IdsValidators.required)
+            || control.hasValidator(IdsValidators.requiredTrue)
+            || control.hasValidator(IdsValidators.requiredFalse);
+    }
+    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: "19.1.2", ngImport: i0, type: IdsFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsFormFieldComponent, isStandalone: true, selector: "ids-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_child", first: true, predicate: IDS_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "_hintMessages", predicate: IdsHintMessageComponent, descendants: true, isSignal: true }, { propertyName: "_successMessages", predicate: IdsSuccessMessageComponent, descendants: true, isSignal: true }, { propertyName: "_errorMessages", predicate: IdsErrorMessageComponent, descendants: true, isSignal: true }, { propertyName: "_actions", predicate: IdsFormFieldActionDirective, isSignal: true }, { propertyName: "_prefixes", predicate: IdsPrefixDirective, isSignal: true }, { propertyName: "_suffixes", predicate: IdsSuffixDirective, isSignal: true }], viewQueries: [{ propertyName: "_fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"ids-form-field__label\" [for]=\"inputId()\">\n  <ng-content select=\"ids-label\" />\n  @if (hasRequiredValidator) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\n</label>\n\n<div #fieldWrapper class=\"ids-form-field__field-wrapper\">\n  <div class=\"ids-form-field__field-wrapper__container\" (click)=\"containerClick($event)\">\n    @if (hasLeadingIcon()) {\n      <div class=\"ids-form-field__leading-icon\">\n        <ng-content select=\"ids-icon[idsLeadingIcon]\" />\n      </div>\n    }\n    @if (hasPrefix()) {\n      <div class=\"ids-form-field__prefix\">\n        <ng-content select=\"[idsPrefix]\" />\n      </div>\n    }\n    <div class=\"ids-form-field__infix\">\n      <ng-content />\n    </div>\n    @if (hasSuffix()) {\n      <div class=\"ids-form-field__suffix\">\n        <ng-content select=\"[idsSuffix]\" />\n      </div>\n    }\n    @if (hasTrailingIcon()) {\n      <div class=\"ids-form-field__trailing-icon\">\n        <ng-content select=\"ids-icon[idsTrailingIcon]\" />\n      </div>\n    }\n  </div>\n  @if (hasActions()) {\n    <div class=\"ids-form-field__field-wrapper__action\">\n      <ng-content select=\"[idsFormFieldAction]\" />\n    </div>\n  }\n</div>\n\n<div class=\"ids-form-field__subscript-wrapper\">\n  @let messages = displayedMessages();\n  @if (messages) {\n    <div class=\"ids-form-field__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"success\") {\n          <ng-content select=\"ids-success-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-form-field', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"ids-form-field__label\" [for]=\"inputId()\">\n  <ng-content select=\"ids-label\" />\n  @if (hasRequiredValidator) {\n    <span class=\"ids-form-field__required-marker\"></span>\n  }\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 ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._elementRef = inject(ElementRef);
+        this._parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this._parentForm = inject(NgForm, { optional: true });
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_INPUT_DEFAULT_CONFIG);
+        this.errorStateChanges = new Subject();
+        this.successStateChanges = new Subject();
+        this.ngControl = inject(NgControl, { optional: true });
+        this._focused = false;
+        this.placeholder = input('');
+        this.name = input();
+        this.type = input('text');
+        this.required = input(false, { transform: coerceBooleanAttribute });
+        this.readonly = input(false, { transform: coerceBooleanAttribute });
+        this.disabled = input(false, { transform: coerceBooleanAttribute });
+        this._controlDisabled = signal(false);
+        this.isDisabled = computed(() => this.disabled() || this._controlDisabled());
+        this.canHandleSuccessState = input(false);
+        this.errorStateMatcher = input(inject(this._defaultConfig.errorStateMatcher));
+        this.successStateMatcher = input(inject(this._defaultConfig.successStateMatcher));
+        this._hostClasses = computed(() => this._getHostClasses([], [formFieldControlClass]));
+        this.hasErrorState = signal(false);
+        this.hasSuccessState = signal(false);
+        this._validateTypeEffect = effect(() => {
+            this._validateType(this.type());
+        });
+        this._canHandleSuccessStateEffect = effect(() => {
+            this._setSuccessStateTracker(this.canHandleSuccessState());
+        });
+        /**
+         * Should be an arrow function in order to handle `this` outside of this class
+         */
+        this.onContainerClick = () => {
+            if (!this._focused && !this.readonly() && !this.isDisabled()) {
+                this.focus();
+            }
+        };
+    }
+    get _hostName() {
+        return 'input';
+    }
+    setDescribedByIds(ids) {
+        if (ids.length) {
+            this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            this._elementRef.nativeElement.removeAttribute('aria-describedby');
+        }
+    }
+    ngOnInit() {
+        this._initErrorStateTracker();
+    }
+    _initErrorStateTracker() {
+        this._errorStateTracker = new ErrorStateTracker(this.errorStateMatcher(), this.ngControl, this._parentFormGroup, this._parentForm, this.errorStateChanges);
+        this._successStateSubscription = this.errorStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasErrorState.set(this._errorStateTracker.hasErrorState));
+    }
+    _setSuccessStateTracker(canHandleSuccessState) {
+        if (canHandleSuccessState) {
+            this._successStateTracker = new SuccessStateTracker(this.successStateMatcher(), this.ngControl, this._parentFormGroup, this._parentForm, this.successStateChanges);
+            this.successStateChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this.hasSuccessState.set(this._successStateTracker.hasSuccessState));
+        }
+        else {
+            this._successStateTracker = undefined;
+            this._successStateSubscription?.unsubscribe();
+        }
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            this.updateErrorAndSuccessState();
+            if (this.ngControl.disabled !== null && this.ngControl.disabled !== this.disabled()) {
+                this._controlDisabled.set(this.ngControl.disabled);
+            }
+        }
+    }
+    _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;
+        }
+    }
+    updateErrorAndSuccessState() {
+        this._errorStateTracker?.updateErrorState();
+        this._successStateTracker?.updateSuccessState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsInputDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsInputDirective, isStandalone: true, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canHandleSuccessState: { classPropertyName: "canHandleSuccessState", publicName: "canHandleSuccessState", 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": "isDisabled() ? \"\" : null", "attr.readonly": "readonly() ? \"\" : null" } }, providers: [
+            {
+                provide: IDS_FORM_FIELD_CONTROL,
+                useExisting: IdsInputDirective,
+            },
+        ], exportAs: ["idsInput"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsInputDirective, decorators: [{
+            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]': 'isDisabled() ? "" : 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();
+        this.disabled = input(false, { transform: coerceBooleanAttribute });
+        this._labelId = computed(() => `${this.id()}-label`);
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.disabled() ? 'disabled' : null,
+            this._parent.parentSize(),
+            this._parent.parentVariant(),
+        ]));
+    }
+    get _hostName() {
+        return 'option-group';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsOptionGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", type: IdsOptionGroupComponent, isStandalone: true, selector: "ids-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "_inert ? null : \"group\"", "attr.aria-disabled": "_inert ? null : disabled().toString()", "attr.aria-labelledby": "_inert ? null : _labelId()" } }, providers: [{ provide: IDS_OPTION_GROUP, useExisting: IdsOptionGroupComponent }], usesInheritance: true, ngImport: i0, template: "<div role=\"presentation\" class=\"ids-option-group__label\" [id]=\"_labelId()\">\n  <div class=\"ids-option-group__text\">{{ label() }}</div>\n</div>\n<ng-content select=\"ids-option, ng-container\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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);
+        this.disabled = input(false, { transform: coerceBooleanAttribute });
+        this._isChecked = computed(() => this.checkboxState() === IdsPseudoCheckboxState.CHECKED);
+        this._isIndeterminate = computed(() => this.checkboxState() === IdsPseudoCheckboxState.INDETERMINATE);
+        this._hostClasses = computed(() => this._getHostClasses([
+            this._parent?.embeddedPseudoCheckboxSize(),
+            this._parent?.embeddedPseudoCheckboxVariant(),
+            this.disabled() ? 'disabled' : null,
+        ]));
+    }
+    get _hostName() {
+        return 'pseudo-checkbox';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: PseudoCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: PseudoCheckboxComponent, isStandalone: true, selector: "ids-pseudo-checkbox", inputs: { checkboxState: { classPropertyName: "checkboxState", publicName: "checkboxState", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ids-pseudo-checkbox__input-wrapper\">\n  <input\n    type=\"checkbox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"_isIndeterminate() ? 'mixed' : null\"\n    [checked]=\"_isChecked()\"\n    [indeterminate]=\"_isIndeterminate()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-pseudo-checkbox__icon\" aria-hidden=\"true\">\n    @if (_isIndeterminate()) {\n      <ids-icon fontIcon=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (_isChecked()) {\n      <ids-icon fontIcon=\"check\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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);
+        this._active = signal(false);
+        this.size = computed(() => this._parent.parentSize());
+        this.variant = computed(() => this._parent.parentVariant());
+        this.value = input();
+        this.explicitViewValue = input(null, { alias: 'viewValue' });
+        this.disabledInput = input(false, { alias: 'disabled', transform: coerceBooleanAttribute });
+        this.disabled = false; // Do not delete this class member, until ListKeyManagerOption requires: `disabled: boolean`
+        this._groupOrOptionIsDisabled = computed(() => this.group?.disabled() || this.disabledInput());
+        this._multiSelect = Boolean(this._parent?.multiSelect());
+        this.onSelectionChange = output();
+        this.viewValue = computed(() => this._textElement().nativeElement.textContent || this.explicitViewValue() || '');
+        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(),
+        ]));
+        this._pseudoCheckboxState = computed(() => (this.selected() ? IdsPseudoCheckboxState.CHECKED : IdsPseudoCheckboxState.UNCHECKED));
+        this.embeddedPseudoCheckboxSize = computed(() => this.size());
+        this.embeddedPseudoCheckboxVariant = signal(IdsFormFieldVariant.SURFACE);
+        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: "19.1.2", ngImport: i0, type: IdsOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsOptionComponent, isStandalone: true, selector: "ids-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, explicitViewValue: { classPropertyName: "explicitViewValue", publicName: "viewValue", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled.toString()" } }, providers: [
+            {
+                provide: IDS_PSEUDO_CHECKBOX_PARENT,
+                useExisting: IdsOptionComponent,
+            },
+        ], viewQueries: [{ propertyName: "_textElement", first: true, predicate: ["text"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_multiSelect) {\n  <ids-pseudo-checkbox aria-hidden=\"true\" [disabled]=\"_groupOrOptionIsDisabled()\" [checkboxState]=\"_pseudoCheckboxState()\" />\n}\n\n<div #text class=\"ids-option__text\"><ng-content /></div>\n\n@if (!_multiSelect && selected()) {\n  <ids-icon fontIcon=\"check\" />\n}\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: PseudoCheckboxComponent, selector: "ids-pseudo-checkbox", inputs: ["checkboxState", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsOptionComponent, decorators: [{
+            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: "19.1.2", ngImport: i0, type: IdsLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsLabelDirective, isStandalone: true, selector: "ids-label", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", 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, 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