@vsn-ux/ngx-gaia 0.8.8 → 0.8.9

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, TemplateRef, NgZone, HostBinding, Input, DOCUMENT, effect, DestroyRef, afterNextRender, Renderer2, afterEveryRender, contentChildren, viewChild } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, forwardRef, model, HostListener, viewChild, TemplateRef, contentChildren, NgZone, HostBinding, Input, DOCUMENT, afterNextRender, Renderer2, afterEveryRender } from '@angular/core';
 import * as i1 from 'lucide-angular';
 import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronUp, ChevronDown, CircleX } from 'lucide-angular';
-import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
+import { NgForm, ControlContainer, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i1$5 from '@angular/cdk/overlay';
 import { Overlay, createRepositionScrollStrategy, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject, takeUntil, map, merge, filter, Observable, isObservable } from 'rxjs';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger, MENU_SCROLL_STRATEGY } from '@angular/cdk/menu';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, ResolveStart } from '@angular/router';
 import * as i1$2 from '@angular/cdk/a11y';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
@@ -535,6 +535,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class GaFormControlErrorsDirective {
+    customErrorsInput = input.required({
+        alias: 'gaFormControlErrors',
+    });
+    customErrors = computed(() => {
+        // for better API ergonomics, we ignore errors with null and undefined values
+        // this lets to bind custom errors directly without nasty if checks
+        // e.g. [gaFormControlErrors]="{ required: isEmpty ? true : null, noMatch: form.getError('noMatch')  }"
+        return Object.entries(this.customErrorsInput()).reduce((acc, [key, value]) => {
+            if (value !== null && value !== undefined) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormControlErrorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaFormControlErrorsDirective, isStandalone: true, selector: "[gaFormControlErrors]", inputs: { customErrorsInput: { classPropertyName: "customErrorsInput", publicName: "gaFormControlErrors", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormControlErrorsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaFormControlErrors]',
+                }]
+        }] });
+
+const GA_FORM_CONTROL_ADAPTER = new InjectionToken('ga-form-control-adapter');
+function injectNgControlState({ implicitChildNgControl, explicitNgControl, explicitNgForm, } = {}) {
+    const gaFormControlAdapter = inject(GA_FORM_CONTROL_ADAPTER, {
+        optional: true,
+    });
+    let ngControlErrors;
+    let ngControlTouched;
+    let ngControlDisabled;
+    let ngControlName;
+    let ngFormSubmitted;
+    if (gaFormControlAdapter) {
+        ngControlErrors = linkedSignal(() => gaFormControlAdapter.ngControlErrors());
+        ngControlTouched = linkedSignal(() => gaFormControlAdapter.ngControlTouched());
+        ngControlDisabled = linkedSignal(() => gaFormControlAdapter.ngControlDisabled());
+        ngControlName = linkedSignal(() => gaFormControlAdapter.ngControlName());
+        ngFormSubmitted = linkedSignal(() => gaFormControlAdapter.ngFormSubmitted());
+    }
+    else {
+        ngControlErrors = signal(null);
+        ngControlTouched = signal(false);
+        ngControlDisabled = signal(false);
+        ngControlName = signal(null);
+        ngFormSubmitted = signal(false);
+        const injector = inject(Injector);
+        const destroyRef = inject(DestroyRef);
+        const implicitNgForm = inject(NgForm, { optional: true });
+        const implicitControlContainer = inject(ControlContainer, {
+            optional: true,
+        });
+        const ngForm = explicitNgForm ??
+            implicitNgForm ??
+            (implicitControlContainer?.formDirective instanceof NgForm
+                ? implicitControlContainer.formDirective
+                : null);
+        let ngControlSubscription = null;
+        effect(() => {
+            if (ngControlSubscription) {
+                ngControlSubscription.unsubscribe();
+                ngControlSubscription = null;
+            }
+            if (isSignal(explicitNgControl)) {
+                explicitNgControl = explicitNgControl();
+            }
+            const ngControl = explicitNgControl ??
+                implicitChildNgControl?.() ??
+                injector.get(NgControl, null, { self: true, optional: true });
+            if (ngControl?.control) {
+                const updateStatuses = () => {
+                    ngControlErrors.set(ngControl.errors);
+                    ngControlTouched.set(!!ngControl.touched);
+                    ngControlDisabled.set(!!ngControl.disabled);
+                    ngControlName.set(ngControl.name);
+                };
+                updateStatuses();
+                ngControlSubscription = ngControl.control.events
+                    .pipe(takeUntilDestroyed(destroyRef))
+                    .subscribe(() => updateStatuses());
+            }
+        });
+        if (ngForm) {
+            ngFormSubmitted.set(ngForm.submitted);
+            ngForm.ngSubmit
+                .pipe(takeUntilDestroyed(destroyRef))
+                .subscribe(() => ngFormSubmitted.set(ngForm.submitted));
+        }
+    }
+    const customErrorsDirective = inject(GaFormControlErrorsDirective, {
+        optional: true,
+    });
+    const inError = signal(false);
+    const errors = signal({});
+    effect(() => {
+        errors.set({
+            ...ngControlErrors(),
+            ...(customErrorsDirective?.customErrors() ?? {}),
+        });
+        const hasErrors = Object.keys(errors()).length > 0;
+        inError.set(hasErrors && (ngControlTouched() || ngFormSubmitted()));
+    });
+    return {
+        inError: inError.asReadonly(),
+        errors: errors.asReadonly(),
+        disabled: ngControlDisabled.asReadonly(),
+        name: ngControlName.asReadonly(),
+    };
+}
+
 const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => GaCheckboxComponent),
@@ -547,7 +659,7 @@ class GaCheckboxComponent {
     /** @ignore */
     _uniqueId = `ga-checkbox-${++nextUniqueId$8}`;
     /** @ignore */
-    injector = inject(Injector);
+    implicitNgControlState = injectNgControlState();
     /** @ignore */
     tabindex = inject(new HostAttributeToken('tabindex'), {
         optional: true,
@@ -557,16 +669,15 @@ class GaCheckboxComponent {
     _onTouched;
     /** @ignore */
     _onModelChanged;
-    /** @ignore */
-    _invalidNgModel = signal(false);
-    _ngModelName = signal(null);
     /** The value attribute of the native input element */
     value = input(null);
-    disabled = input(false, {
+    disabledInput = input(false, {
         transform: booleanAttribute,
+        alias: 'disabled',
     });
-    checked = input(false, {
+    checkedInput = input(false, {
         transform: booleanAttribute,
+        alias: 'checked',
     });
     nameInput = input(null, { alias: 'name' });
     id = input(null);
@@ -583,29 +694,22 @@ class GaCheckboxComponent {
         alias: 'aria-errormessage',
     });
     required = input(false, { transform: booleanAttribute });
-    disabledModel = linkedSignal(() => this.disabled());
-    checkedModel = linkedSignal(() => this.checked());
+    disabled = linkedSignal(() => this.disabledInput());
+    checked = linkedSignal(() => this.checkedInput());
     change = output();
     indeterminateChange = output();
     /** @ignore */
     inputId = computed(() => (this.id() ? this.id() : this._uniqueId));
     /** @ignore */
     name = computed(() => {
-        return this.nameInput() ?? this._ngModelName() ?? this._uniqueId;
+        return (this.nameInput() ?? this.implicitNgControlState.name() ?? this._uniqueId);
     });
     /** @ignore */
     invalid = computed(() => {
         return this.ariaInvalid()
             ? this.ariaInvalid() === 'true'
-            : this._invalidNgModel();
+            : this.implicitNgControlState.inError();
     });
-    ngDoCheck() {
-        const ngControl = this.injector.get(NgControl, null, { self: true });
-        if (ngControl) {
-            this._invalidNgModel.set(!!ngControl.invalid);
-            this._ngModelName.set(ngControl.name);
-        }
-    }
     /** @ignore */
     onInputChange(event) {
         // We always have to stop propagation on the change event.
@@ -615,7 +719,7 @@ class GaCheckboxComponent {
         if (this.disabled()) {
             return;
         }
-        this.checkedModel.set(!this.checkedModel());
+        this.checked.set(!this.checked());
         this.updateModel();
     }
     /** @ignore */
@@ -632,19 +736,19 @@ class GaCheckboxComponent {
     }
     /** @ignore */
     writeValue(value) {
-        this.checkedModel.set(!!value);
+        this.checked.set(!!value);
     }
     /** @ignore */
     setDisabledState(isDisabled) {
-        this.disabledModel.set(isDisabled);
+        this.disabled.set(isDisabled);
     }
     /** @ignore */
     updateModel() {
-        this._onModelChanged?.(this.checkedModel());
-        this.change.emit(this.checkedModel());
+        this._onModelChanged?.(this.checked());
+        this.change.emit(this.checked());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaCheckboxComponent, isStandalone: true, selector: "ga-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.ga-checkbox--invalid": "invalid()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-invalid": "null", "attr.aria-errormessage": "null" }, classAttribute: "ga-checkbox" }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<input\n  type=\"checkbox\"\n  class=\"ga-checkbox__native\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabledModel()\"\n  [required]=\"required()\"\n  [attr.value]=\"value()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-checkbox__marker\">\n  <lucide-icon\n    [img]=\"icons.Check\"\n    class=\"ga-checkbox__marker__indicator-checked\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n  <lucide-icon\n    [img]=\"icons.Minus\"\n    class=\"ga-checkbox__marker__indicator-indeterminate\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n</div>\n\n<label class=\"ga-checkbox__label\" [attr.for]=\"inputId()\"\n  ><ng-content></ng-content\n></label>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaCheckboxComponent, isStandalone: true, selector: "ga-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.ga-checkbox--invalid": "invalid()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-invalid": "null", "attr.aria-errormessage": "null" }, classAttribute: "ga-checkbox" }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<input\n  type=\"checkbox\"\n  class=\"ga-checkbox__native\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.value]=\"value()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-checkbox__marker\">\n  <lucide-icon\n    [img]=\"icons.Check\"\n    class=\"ga-checkbox__marker__indicator-checked\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n  <lucide-icon\n    [img]=\"icons.Minus\"\n    class=\"ga-checkbox__marker__indicator-indeterminate\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n</div>\n\n<label class=\"ga-checkbox__label\" [attr.for]=\"inputId()\"\n  ><ng-content></ng-content\n></label>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaCheckboxComponent, decorators: [{
             type: Component,
@@ -658,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '[attr.aria-describedby]': 'null',
                         '[attr.aria-invalid]': 'null',
                         '[attr.aria-errormessage]': 'null',
-                    }, template: "<input\n  type=\"checkbox\"\n  class=\"ga-checkbox__native\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabledModel()\"\n  [required]=\"required()\"\n  [attr.value]=\"value()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-checkbox__marker\">\n  <lucide-icon\n    [img]=\"icons.Check\"\n    class=\"ga-checkbox__marker__indicator-checked\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n  <lucide-icon\n    [img]=\"icons.Minus\"\n    class=\"ga-checkbox__marker__indicator-indeterminate\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n</div>\n\n<label class=\"ga-checkbox__label\" [attr.for]=\"inputId()\"\n  ><ng-content></ng-content\n></label>\n" }]
+                    }, template: "<input\n  type=\"checkbox\"\n  class=\"ga-checkbox__native\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.value]=\"value()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-checkbox__marker\">\n  <lucide-icon\n    [img]=\"icons.Check\"\n    class=\"ga-checkbox__marker__indicator-checked\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n  <lucide-icon\n    [img]=\"icons.Minus\"\n    class=\"ga-checkbox__marker__indicator-indeterminate\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n</div>\n\n<label class=\"ga-checkbox__label\" [attr.for]=\"inputId()\"\n  ><ng-content></ng-content\n></label>\n" }]
         }] });
 
 const GA_CHECKBOX_REQUIRED_VALIDATOR = {
@@ -824,99 +928,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
-class GaInputComponent {
-    implicitNgControl = contentChild(NgControl);
-    implicitInvalid = signal(false);
-    invalidInput = input(null, { transform: booleanAttribute });
-    invalid = computed(() => {
-        return this.invalidInput() ?? this.implicitInvalid();
-    });
-    ngDoCheck() {
-        // we can rely on computed because `ivalid` of NgControl is not a signal, yet
-        const implicitNgControl = this.implicitNgControl();
-        if (implicitNgControl) {
-            this.implicitInvalid.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaInputComponent, isStandalone: true, selector: "ga-input", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-input--invalid": "invalid()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "implicitNgControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-input',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'ga-input',
-                        '[class.ga-input--invalid]': 'invalid()',
-                    },
-                }]
-        }] });
+const GA_FORM_FIELD_ID = new InjectionToken('ga-form-field-id');
 
 const GA_FORM_CONTROL = new InjectionToken('ga-form-control');
 class GaFormControlDirective {
-    _formControlId = input(undefined, {
+    formFieldId = inject(GA_FORM_FIELD_ID, { optional: true });
+    ngControlInput = input(undefined, {
         alias: 'gaFormControl',
     });
-    _formControlDisabled = input(undefined, {
-        alias: 'gaFormControlDisabled',
+    explicitNgControl = computed(() => {
+        const ngControl = this.ngControlInput();
+        if (ngControl instanceof NgControl) {
+            return ngControl;
+        }
+        return null;
+    });
+    ngControlState = injectNgControlState({
+        explicitNgControl: this.explicitNgControl,
+    });
+    inError = this.ngControlState.inError;
+    errors = this.ngControlState.errors;
+    ariaErrorMessageId = computed(() => {
+        if (!this.formFieldId || !this.inError()) {
+            return null;
+        }
+        return `${this.formFieldId}-callout`;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaFormControlDirective, isStandalone: true, selector: "[gaFormControl]", inputs: { _formControlId: { classPropertyName: "_formControlId", publicName: "gaFormControl", isSignal: true, isRequired: false, transformFunction: null }, _formControlDisabled: { classPropertyName: "_formControlDisabled", publicName: "gaFormControlDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            { provide: GA_FORM_CONTROL, useExisting: GaFormControlDirective },
-        ], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaFormControlDirective, isStandalone: true, selector: "[gaFormControl]", inputs: { ngControlInput: { classPropertyName: "ngControlInput", publicName: "gaFormControl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-invalid": "inError() ? \"true\" : null", "attr.aria-errormessage": "ariaErrorMessageId()" } }, exportAs: ["gaFormControl"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormControlDirective, decorators: [{
             type: Directive,
             args: [{
+                    exportAs: 'gaFormControl',
                     selector: '[gaFormControl]',
-                    providers: [
-                        { provide: GA_FORM_CONTROL, useExisting: GaFormControlDirective },
-                    ],
+                    host: {
+                        '[attr.aria-invalid]': 'inError() ? "true" : null',
+                        '[attr.aria-errormessage]': 'ariaErrorMessageId()',
+                    },
                 }]
         }] });
 
 let nextUniqueId$7 = 0;
 class GaInputDirective {
     uniqueId = `ga-input-${++nextUniqueId$7}`;
-    implicitNgControl = inject(NgControl, {
-        optional: true,
-        self: true,
-    });
     hasWrapper = inject(GaInputComponent, { optional: true });
-    implicitInvalid = signal(false);
-    implicitErrors = signal(null);
+    implicitNgControlState = injectNgControlState();
     invalidInput = input(null, {
         alias: 'invalid',
         transform: booleanAttribute,
     });
     idInput = input(undefined, { alias: 'id' });
-    disabledInput = input(false, {
+    disabledInput = input(undefined, {
         alias: 'disabled',
         transform: booleanAttribute,
     });
     invalid = computed(() => {
-        return this.invalidInput() ?? this.implicitInvalid();
+        return this.invalidInput() ?? this.implicitNgControlState.inError();
     });
     id = computed(() => {
         return this.idInput() ?? this.uniqueId;
     });
-    disabled = linkedSignal(() => this.disabledInput());
-    errors = this.implicitErrors.asReadonly();
+    disabled = computed(() => {
+        return this.disabledInput() ?? this.implicitNgControlState.disabled();
+    });
     _formControlId = this.id;
-    _formControlDisabled = computed(() => this.disabled());
-    ngDoCheck() {
-        if (this.hasWrapper)
-            return;
-        // we can rely on computed because `ivalid` of NgControl is not a signal, yet
-        const implicitNgControl = this.implicitNgControl;
-        if (implicitNgControl) {
-            this.implicitInvalid.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
-            this.implicitErrors.set(implicitNgControl.errors);
-            this.disabled.set(!!implicitNgControl.disabled);
-        }
-    }
+    _formControlDisabled = this.disabled;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaInputDirective, isStandalone: true, selector: "[gaInput]", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class.ga-input": "!hasWrapper", "class.ga-input--invalid": "!hasWrapper && invalid()" } }, providers: [{ provide: GA_FORM_CONTROL, useExisting: GaInputDirective }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -936,6 +1013,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class GaInputComponent {
+    gaInput = contentChild.required(GaInputDirective);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { properties: { "class.ga-input--invalid": "gaInput().invalid()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-input',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'ga-input',
+                        '[class.ga-input--invalid]': 'gaInput().invalid()',
+                    },
+                }]
+        }] });
+
 class GaInputModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaInputModule, imports: [GaInputComponent, GaInputDirective], exports: [GaInputComponent, GaInputDirective] });
@@ -949,19 +1044,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class GaFieldCalloutComponent {
+    icons = { OctagonAlert };
+    formField = inject(GaFormFieldComponent);
+    id = this.formField.uniqueId + '-callout';
+    shouldShowError = computed(() => {
+        const formControl = this.formField.formControl();
+        if (!formControl) {
+            return false;
+        }
+        return formControl.inError() && this.overlappingErrors().length > 0;
+    });
+    overlappingErrors = computed(() => {
+        const formControl = this.formField.formControl();
+        if (!formControl) {
+            return [];
+        }
+        const registeredErrors = this.formField
+            .fieldErrors()
+            .filter((err) => err.key());
+        const controlErrorKeys = Object.keys(formControl.errors());
+        return registeredErrors
+            .filter((err) => controlErrorKeys.includes(err.key()))
+            .map((err) => {
+            const errorKey = err.key();
+            return {
+                key: errorKey,
+                templateRef: err.templateRef,
+                error: formControl.errors()[errorKey],
+            };
+        });
+    });
+    hasCallout = computed(() => !!this.formField.fieldInfo() || this.shouldShowError());
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaFieldCalloutComponent, isStandalone: true, selector: "ga-field-callout", host: { properties: { "attr.id": "id", "style.display": "hasCallout() ? null : \"none\"" }, classAttribute: "ga-form-field__info" }, ngImport: i0, template: "@if (shouldShowError()) {\n  <ga-icon\n    [icon]=\"icons.OctagonAlert\"\n    class=\"ga-icon\"\n    style=\"color: var(--ga-color-icon-error)\"\n    size=\"16\"\n  />\n  <div>\n    @for (error of overlappingErrors(); track error.key; let last = $last) {\n      <span\n        ><ng-container\n          [ngTemplateOutlet]=\"error.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: error.error }\"\n        />&nbsp;</span\n      >\n    }\n  </div>\n} @else if (formField.fieldInfo()) {\n  <ng-container [ngTemplateOutlet]=\"formField.fieldInfo()!.templateRef()\" />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldCalloutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-field-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, GaIconModule], host: {
+                        class: 'ga-form-field__info',
+                        '[attr.id]': 'id',
+                        '[style.display]': 'hasCallout() ? null : "none"',
+                    }, template: "@if (shouldShowError()) {\n  <ga-icon\n    [icon]=\"icons.OctagonAlert\"\n    class=\"ga-icon\"\n    style=\"color: var(--ga-color-icon-error)\"\n    size=\"16\"\n  />\n  <div>\n    @for (error of overlappingErrors(); track error.key; let last = $last) {\n      <span\n        ><ng-container\n          [ngTemplateOutlet]=\"error.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: error.error }\"\n        />&nbsp;</span\n      >\n    }\n  </div>\n} @else if (formField.fieldInfo()) {\n  <ng-container [ngTemplateOutlet]=\"formField.fieldInfo()!.templateRef()\" />\n}\n" }]
+        }] });
+
+class GaFieldInfoComponent {
+    templateRef = viewChild.required(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaFieldInfoComponent, isStandalone: true, selector: "ga-info", host: { properties: { "style.display": "\"none\"" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-info',
+                    template: `<ng-template><ng-content /></ng-template>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[style.display]': '"none"',
+                    },
+                }]
+        }] });
+
+class GaFieldErrorDirective {
+    templateRef = inject(TemplateRef, { self: true });
+    key = input.required({ alias: 'gaError' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaFieldErrorDirective, isStandalone: true, selector: "[gaError]", inputs: { key: { classPropertyName: "key", publicName: "gaError", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaError]',
+                }]
+        }] });
+
 let nextUniqueId$6 = 0;
 class GaFormFieldComponent {
-    uniqueId = `ga-form-field-${++nextUniqueId$6}`;
+    uniqueId = inject(GA_FORM_FIELD_ID);
     disabled = input(undefined, { transform: booleanAttribute });
-    formControl = contentChild(GA_FORM_CONTROL, { descendants: true });
+    implicitFormControl = contentChild(GA_FORM_CONTROL, {
+        descendants: true,
+    });
+    formControl = contentChild(GaFormControlDirective, {
+        descendants: true,
+    });
+    fieldInfo = contentChild(GaFieldInfoComponent);
+    fieldErrors = contentChildren(GaFieldErrorDirective);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaFormFieldComponent, isStandalone: true, selector: "ga-form-field", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-form-field" }, queries: [{ propertyName: "formControl", first: true, predicate: GA_FORM_CONTROL, descendants: true, isSignal: true }], exportAs: ["gaFormField"], ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaFormFieldComponent, isStandalone: true, selector: "ga-form-field", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-form-field" }, providers: [
+            {
+                provide: GA_FORM_FIELD_ID,
+                useFactory: () => `ga-form-field-${++nextUniqueId$6}`,
+            },
+        ], queries: [{ propertyName: "implicitFormControl", first: true, predicate: GA_FORM_CONTROL, descendants: true, isSignal: true }, { propertyName: "formControl", first: true, predicate: GaFormControlDirective, descendants: true, isSignal: true }, { propertyName: "fieldInfo", first: true, predicate: GaFieldInfoComponent, descendants: true, isSignal: true }, { propertyName: "fieldErrors", predicate: GaFieldErrorDirective, isSignal: true }], exportAs: ["gaFormField"], ngImport: i0, template: "<ng-content select=\"ga-label\" />\n<ng-content />\n<ga-field-callout />\n", dependencies: [{ kind: "component", type: GaFieldCalloutComponent, selector: "ga-field-callout" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-form-field', exportAs: 'gaFormField', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ga-form-field', exportAs: 'gaFormField', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaFieldCalloutComponent], host: {
                         class: 'ga-form-field',
-                    }, template: "<ng-content />\n" }]
+                    }, providers: [
+                        {
+                            provide: GA_FORM_FIELD_ID,
+                            useFactory: () => `ga-form-field-${++nextUniqueId$6}`,
+                        },
+                    ], template: "<ng-content select=\"ga-label\" />\n<ng-content />\n<ga-field-callout />\n" }]
         }] });
 
 let nextUniqueId$5 = 0;
@@ -1361,11 +1547,11 @@ class GaFieldLabelComponent {
     definition = input(null);
     state = input();
     controlId = computed(() => {
-        return this.for() ?? this.formField.formControl()?._formControlId();
+        return this.for() ?? this.formField.implicitFormControl()?._formControlId();
     });
     disabled = computed(() => {
         return (this.formField.disabled() ??
-            !!this.formField.formControl()?._formControlDisabled());
+            !!this.formField.implicitFormControl()?._formControlDisabled());
     });
     controlElement = computed(() => {
         const control = this.document.querySelector(`#${this.controlId()}`);
@@ -1383,27 +1569,11 @@ class GaFieldLabelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"\n    !!formField.formControl()?._formControlDisabled()\n  \"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: GaTooltipModule }, { kind: "directive", type: GaTooltipDirective, selector: "[gaTooltip]", inputs: ["gaTooltip", "gaTooltipDisabled", "gaTooltipControlMode", "gaTooltipShowControlMode", "gaTooltipHideControlMode", "gaTooltipOffsetSize", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"disabled()\"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: GaTooltipModule }, { kind: "directive", type: GaTooltipDirective, selector: "[gaTooltip]", inputs: ["gaTooltip", "gaTooltipDisabled", "gaTooltipControlMode", "gaTooltipShowControlMode", "gaTooltipHideControlMode", "gaTooltipOffsetSize", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"\n    !!formField.formControl()?._formControlDisabled()\n  \"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
-        }] });
-
-class GaFieldInfoComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaFieldInfoComponent, isStandalone: true, selector: "ga-info", host: { classAttribute: "ga-form-field__info" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldInfoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-info',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'ga-form-field__info',
-                    },
-                }]
+            args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"disabled()\"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
         }] });
 
 class GaLabelledByFormFieldDirective {
@@ -1437,11 +1607,15 @@ class GaFormFieldModule {
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldModule, imports: [GaFormFieldComponent,
             GaFieldLabelComponent,
             GaFieldInfoComponent,
+            GaFieldErrorDirective,
+            GaFormControlErrorsDirective,
             GaFormControlDirective], exports: [GaFormFieldComponent,
             GaFieldLabelComponent,
             GaFieldInfoComponent,
+            GaFieldErrorDirective,
+            GaFormControlErrorsDirective,
             GaFormControlDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldModule, imports: [GaFormFieldComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldModule, decorators: [{
             type: NgModule,
@@ -1450,12 +1624,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         GaFormFieldComponent,
                         GaFieldLabelComponent,
                         GaFieldInfoComponent,
+                        GaFieldErrorDirective,
+                        GaFormControlErrorsDirective,
                         GaFormControlDirective,
                     ],
                     exports: [
                         GaFormFieldComponent,
                         GaFieldLabelComponent,
                         GaFieldInfoComponent,
+                        GaFieldErrorDirective,
+                        GaFormControlErrorsDirective,
                         GaFormControlDirective,
                     ],
                 }]
@@ -2285,6 +2463,7 @@ class GaRadioButtonComponent {
     tabindex = inject(new HostAttributeToken('tabindex'), {
         optional: true,
     });
+    implicitNgControlState = injectNgControlState();
     _uniqueId = `ga-radio-button-${++nextUniqueId$3}`;
     /** The value attribute of the native input element */
     value = input(null);
@@ -2318,6 +2497,12 @@ class GaRadioButtonComponent {
     id = computed(() => this.inputId() ?? this._uniqueId);
     name = computed(() => this.radioGroup?.name() ?? this.inputName() ?? this._uniqueId);
     disabled = computed(() => this.radioGroup?.disabledModel() || this.inputDisabled());
+    /** @ignore */
+    invalid = computed(() => {
+        return this.ariaInvalid()
+            ? this.ariaInvalid() === 'true'
+            : this.implicitNgControlState.inError();
+    });
     checked = computed(() => this.radioGroup?.valueModel() === this.value() || this.inputChecked());
     onInputChange(event) {
         // We always have to stop propagation on the change event.
@@ -2334,13 +2519,13 @@ class GaRadioButtonComponent {
         this.radioGroup?.onBlur();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaRadioButtonComponent, isStandalone: true, selector: "ga-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputName: { classPropertyName: "inputName", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputChecked: { classPropertyName: "inputChecked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.ga-radio-button--invalid": "ariaInvalid()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "ga-radio-button" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  class=\"ga-radio-button__native\"\n  [attr.id]=\"id()\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.value]=\"value()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<div class=\"ga-radio-button__marker\"></div>\n<label class=\"ga-radio-button__label\" [attr.for]=\"id()\"\n  ><ng-content></ng-content\n></label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaRadioButtonComponent, isStandalone: true, selector: "ga-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputName: { classPropertyName: "inputName", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputChecked: { classPropertyName: "inputChecked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.ga-radio-button--invalid": "invalid()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "ga-radio-button" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  class=\"ga-radio-button__native\"\n  [attr.id]=\"id()\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.value]=\"value()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<div class=\"ga-radio-button__marker\"></div>\n<label class=\"ga-radio-button__label\" [attr.for]=\"id()\"\n  ><ng-content></ng-content\n></label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ga-radio-button',
-                        '[class.ga-radio-button--invalid]': 'ariaInvalid()',
+                        '[class.ga-radio-button--invalid]': 'invalid()',
                         '[attr.id]': 'null',
                         '[attr.tabindex]': 'null',
                         '[attr.aria-label]': 'null',
@@ -2501,7 +2686,6 @@ let nextUniqueId$2 = 0;
 class GaSelectComponent {
     _uniqueId = `ga-select-${++nextUniqueId$2}`;
     icons = { CircleX };
-    focusedTriggerElement = null;
     _onTouched;
     _onModelChanged;
     positions = [
@@ -2539,8 +2723,9 @@ class GaSelectComponent {
     i18n = inject(GaSelectI18n);
     overlayOrigin = inject(CdkOverlayOrigin);
     repositionScrollStrategy = createRepositionScrollStrategy(this.injector);
-    implicitInvalid = signal(false);
+    implicitNgControlState = injectNgControlState();
     _isOpen = signal(false);
+    shouldRecoverFocus = false;
     value = model(null);
     placeholder = input('');
     disabledInput = input(false, {
@@ -2599,7 +2784,7 @@ class GaSelectComponent {
         return this.value() !== null || this.canSelectNullable();
     });
     invalid = computed(() => {
-        return this.invalidInput() ?? this.implicitInvalid();
+        return this.invalidInput() ?? this.implicitNgControlState.inError();
     });
     _formControlId = computed(() => {
         // NOTE: The custom select cannot be connected to the label through `for` and `id` attributes,
@@ -2635,15 +2820,6 @@ class GaSelectComponent {
             this.autoClose();
         });
     }
-    ngDoCheck() {
-        const implicitNgControl = this.injector.get(NgControl, null, {
-            self: true,
-        });
-        // we can rely on computed because `ivalid` of NgControl is not a signal, yet
-        if (implicitNgControl) {
-            this.implicitInvalid.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
-        }
-    }
     writeValue(value) {
         this.value.set(value);
     }
@@ -2679,6 +2855,7 @@ class GaSelectComponent {
     autoClose() {
         // close that was initiated by clicking the option
         if (!this.multiple()) {
+            this.shouldRecoverFocus = true;
             this.close();
         }
     }
@@ -2707,6 +2884,11 @@ class GaSelectComponent {
             this.syncValue();
         }
     }
+    onOverlayKeydown(event) {
+        if (event.code === 'Escape') {
+            this.shouldRecoverFocus = true;
+        }
+    }
     clearValue() {
         if (!this.clearable() || !this.searchable()) {
             return;
@@ -2737,15 +2919,16 @@ class GaSelectComponent {
                 event.stopPropagation();
                 break;
             case 'Backspace':
-                this.clearValue();
-                event.preventDefault();
+                if (this.textValue() === '') {
+                    this.clearValue();
+                }
                 event.stopPropagation();
                 break;
         }
     }
     onOverlayAttach() {
+        this.shouldRecoverFocus = false;
         this._isOpen.set(true);
-        this.focusedTriggerElement = document.activeElement;
         if (this.searchable()) {
             this.inputSearch().nativeElement.focus();
         }
@@ -2756,10 +2939,8 @@ class GaSelectComponent {
     }
     onOverlayDetach() {
         this._isOpen.set(false);
-        if (this.inputSearch()?.nativeElement !== this.focusedTriggerElement) {
-            this.focusedTriggerElement?.focus();
-        }
-        else if (this.searchable()) {
+        if (this.inputSearch()?.nativeElement === document.activeElement ||
+            this.shouldRecoverFocus) {
             this.elementRef.nativeElement.focus();
         }
         this.textValue.set('');
@@ -2809,7 +2990,7 @@ class GaSelectComponent {
                 provide: GA_FORM_CONTROL,
                 useExisting: forwardRef(() => GaSelectComponent),
             },
-        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$5.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$5.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -2856,7 +3037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
                         '(keydown.backspace)': 'clearValue(); $event.preventDefault()',
-                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -2996,8 +3177,9 @@ let nextUniqueId$1 = 0;
 class GaSwitchComponent {
     icons = { Check };
     /** @ignore */
+    implicitNgControlState = injectNgControlState();
+    /** @ignore */
     _uniqueId = `ga-switch-${++nextUniqueId$1}`;
-    injector = inject(Injector);
     /** @ignore */
     tabindex = input(0, {
         alias: 'tabindex',
@@ -3006,19 +3188,13 @@ class GaSwitchComponent {
     _onTouched;
     /** @ignore */
     _onModelChanged;
-    /** @ignore */
-    _invalidNgModel = signal(false);
-    _ngModelName = signal(null);
     checked = input(false, {
         transform: booleanAttribute,
     });
     disabled = input(false, {
         transform: booleanAttribute,
     });
-    ariaInvalid = input(false, {
-        transform: booleanAttribute,
-        alias: 'aria-invalid',
-    });
+    ariaInvalid = input(null, { alias: 'aria-invalid' });
     label = input('');
     ariaLabel = input(null, { alias: 'aria-label' });
     ariaLabelledby = input(null, {
@@ -3039,23 +3215,14 @@ class GaSwitchComponent {
     inputId = computed(() => this.id() ?? this._uniqueId);
     /** @ignore */
     name = computed(() => {
-        return this.nameInput() ?? this._ngModelName() ?? this._uniqueId;
+        return (this.nameInput() ?? this.implicitNgControlState.name() ?? this._uniqueId);
     });
     /** @ignore */
     invalidComputed = computed(() => {
-        return this.ariaInvalid() || this._invalidNgModel();
+        return this.ariaInvalid()
+            ? this.ariaInvalid() === 'true'
+            : this.implicitNgControlState.inError();
     });
-    ngDoCheck() {
-        const implicitNgControl = this.injector.get(NgControl, null, {
-            self: true,
-        });
-        if (implicitNgControl) {
-            this._invalidNgModel.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
-            if (implicitNgControl.name) {
-                this._ngModelName.set(implicitNgControl.name);
-            }
-        }
-    }
     /** @ignore */
     onInputChange(event) {
         const target = event.target;
@@ -3206,26 +3373,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 let nextUniqueId = 0;
 class GaTextAreaDirective {
+    implicitNgControlState = injectNgControlState();
+    generatedUniqueId = `ga-text-area-${++nextUniqueId}`;
     id = input(undefined);
-    disabled = input(false, { transform: booleanAttribute });
-    invalid = input(undefined, { transform: booleanAttribute });
-    _formControlId = computed(() => this.uniqueId());
-    _formControlDisabled = computed(() => this.disabledModel());
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    invalidInput = input(undefined, {
+        alias: 'invalid',
+        transform: booleanAttribute,
+    });
+    disabled = computed(() => this.disabledInput() ?? this.implicitNgControlState.disabled());
+    invalid = computed(() => this.invalidInput() ?? this.implicitNgControlState.inError());
     uniqueId = computed(() => this.id() ?? this.generatedUniqueId);
-    invalidInput = computed(() => this.invalid() ?? this.implicitInvalid());
-    generatedUniqueId = `ga-text-area-${++nextUniqueId}`;
-    injector = inject(Injector);
-    implicitInvalid = signal(false);
-    disabledModel = linkedSignal(() => this.disabled());
-    ngDoCheck() {
-        const ngControl = this.injector.get(NgControl, null, { self: true });
-        if (ngControl) {
-            this.implicitInvalid.set(!!ngControl.invalid && !!ngControl.dirty);
-            this.disabledModel.set(!!ngControl.disabled);
-        }
-    }
+    _formControlId = computed(() => this.uniqueId());
+    _formControlDisabled = computed(() => this.disabled());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaTextAreaDirective, isStandalone: true, selector: "[gaTextArea]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-text-area--invalid": "invalidInput()", "attr.id": "uniqueId()" }, classAttribute: "ga-text-area" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaTextAreaDirective, isStandalone: true, selector: "[gaTextArea]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-text-area--invalid": "invalid()", "attr.id": "uniqueId()" }, classAttribute: "ga-text-area" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTextAreaDirective, decorators: [{
             type: Directive,
@@ -3233,7 +3398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     selector: '[gaTextArea]',
                     host: {
                         class: 'ga-text-area',
-                        '[class.ga-text-area--invalid]': 'invalidInput()',
+                        '[class.ga-text-area--invalid]': 'invalid()',
                         '[attr.id]': 'uniqueId()',
                     },
                 }]
@@ -3260,5 +3425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_FORM_CONTROL_ADAPTER, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map