@vsn-ux/ngx-gaia 0.11.2 → 0.11.3

package/DOCS.md

@@ -272,7 +272,8 @@ Checkbox component for boolean selections.
 
 #### Outputs:
 
-- `change(value: boolean)` - Change event
+- `checkedChange(value: boolean)` - Emits when the checked state changes
+- `change(value: boolean)` - **@deprecated** Use `checkedChange` instead
 
 ### Examples:
 
@@ -736,15 +737,15 @@ Form control directive.
 
 ### `[gaError]`
 
-Error template directive.
+Directive for defining error message templates. Displays the template when the specified error key exists on the control. Does not set errors; only provides the message display for existing errors.
 
 ### `[gaFormControlErrors]`
 
-Custom errors directive for adding client-side validation errors.
+Directive for manually setting validation errors on a form control without creating validators. Use this when you need to programmatically assign errors based on custom logic (e.g., async validation results, cross-field validation, or server-side validation responses).
 
 #### Inputs:
 
-- `gaFormControlErrors: ValidationErrors` - Custom validation errors (required)
+- `gaFormControlErrors: ValidationErrors` - Error object to set on the control. Errors with `null` or `undefined` values are automatically filtered out for cleaner bindings.
 
 ### `[gaLabelledByFormField]`
 
@@ -756,7 +757,7 @@ Directive for connecting form controls to form field labels.
 
 ### Providers:
 
-- `provideGaFormErrors(config: GaFormErrorsConfig)` - Configure global form error messages that display when no specific gaError directive template is provided
+- `provideGaFormErrors(config: GaFormErrorsConfig)` - Configure global error message templates. These messages are displayed when a validation error exists on the control (either from validators or `gaFormControlErrors`) and no specific `gaError` template is provided. This provider does not add errors to controls; it only defines how existing errors are displayed.
 
 ### Examples:
 
@@ -771,7 +772,7 @@ Complete form field
 </ga-form-field>
 ```
 
-Custom validation errors
+Manually setting errors with gaFormControlErrors
 
 ```html
 <ga-form-field>
@@ -786,6 +787,8 @@ Custom validation errors
 </ga-form-field>
 ```
 
+Note: `gaFormControlErrors` sets the error on the control, while `gaError` provides the template for displaying the error message.
+
 Form control with custom labelling
 
 ```html

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

@@ -669,6 +669,12 @@ class GaCheckboxComponent {
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
     disabled = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     checked = linkedSignal(() => this.checkedInput(), ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    /** Emits when the checked state changes. */
+    checkedChange = output();
+    /**
+     * Emits when the checked state changes.
+     * @deprecated Use `checkedChange` instead.
+     */
     change = output();
     indeterminateChange = output();
     /** @ignore */
@@ -718,10 +724,11 @@ class GaCheckboxComponent {
     /** @ignore */
     updateModel() {
         this._onModelChanged?.(this.checked());
+        this.checkedChange.emit(this.checked());
         this.change.emit(this.checked());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.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", "attr.disabled": "disabled() ? \"\" : 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.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: { checkedChange: "checkedChange", 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", "attr.disabled": "disabled() ? \"\" : 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: "21.0.4", ngImport: i0, type: GaCheckboxComponent, decorators: [{
             type: Component,
@@ -737,7 +744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
                         '[attr.aria-errormessage]': 'null',
                         '[attr.disabled]': 'disabled() ? "" : null',
                     }, 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" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], ariaErrormessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-errormessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], ariaErrormessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-errormessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], change: [{ type: i0.Output, args: ["change"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }] } });
 
 const GA_CHECKBOX_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
@@ -2652,13 +2659,13 @@ class GaFieldLabelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\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]=\"formField.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", "gaTooltipShowDelay", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\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]=\"formField.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    gaTooltipShowDelay=\"600\"\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", "gaTooltipShowDelay", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.id]': 'null',
-                    }, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\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]=\"formField.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" }]
+                    }, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"id()\"\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]=\"formField.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    gaTooltipShowDelay=\"600\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
         }], ctorParameters: () => [], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class GaFormControlDirective {
@@ -3725,7 +3732,7 @@ class GaOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled", "attr.hidden": "hidden() ? '' : null" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled", "attr.hidden": "hidden() ? '' : null" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["checkedChange", "change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaOptionComponent, decorators: [{
             type: Component,
@@ -4023,8 +4030,8 @@ class GaSelectComponent {
             if (!this.multiple()) {
                 [value] = value;
             }
-            this.value.set(value);
             this._onModelChanged?.(value);
+            this.value.set(value);
             // this is needed because value could be also changed via keyboard
             this.autoClose();
         });
@@ -4419,7 +4426,7 @@ class GaDataOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaDataOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaDataOptionComponent, isStandalone: true, selector: "ga-data-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "autoClose($event);", "keydown.space": "autoClose($event);", "click": "autoClose();" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaDataOptionComponent, isStandalone: true, selector: "ga-data-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "autoClose($event);", "keydown.space": "autoClose($event);", "click": "autoClose();" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["checkedChange", "change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaDataOptionComponent, decorators: [{
             type: Component,
@@ -4999,8 +5006,8 @@ class GaDataSelectComponent {
                         if (!this.multiple()) {
                             [value] = value;
                         }
-                        this.value.set(value);
                         this._onModelChanged?.(value);
+                        this.value.set(value);
                         this.autoClose();
                     });
                 });