@vsn-ux/ngx-gaia 0.11.2 → 0.11.4

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:
 
@@ -421,6 +422,10 @@ Data select component that automatically generates options from an items array.
 - `closed()` - Emitted when dropdown closes
 - `optionsEndReached()` - Emitted when user scrolls to bottom of options
 
+#### Methods:
+
+- `focus(): void` - Focus the select trigger
+
 ### `IGaSelectOption<T>`
 
 Type for option items with special properties:
@@ -736,15 +741,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 +761,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 +776,7 @@ Complete form field
 </ga-form-field>
 ```
 
-Custom validation errors
+Manually setting errors with gaFormControlErrors
 
 ```html
 <ga-form-field>
@@ -786,6 +791,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
@@ -1208,6 +1215,10 @@ Select component.
 - `multiple: boolean` - Multiple selection
 - `clearable: boolean` - Show clear button
 
+#### Methods:
+
+- `focus(): void` - Focus the select trigger
+
 ### `<ga-select-dropdown>`
 
 Dropdown container component.
@@ -1322,9 +1333,9 @@ Switch component for boolean toggle controls.
 
 #### Inputs:
 
-- `label: string` - Switch label (default: '')
 - `checked: boolean` - Checked state (default: false)
 - `disabled: boolean` - Disabled state (default: false)
+- `label: string` - **@deprecated** Use content projection instead (default: '')
 
 #### Outputs:
 
@@ -1332,11 +1343,11 @@ Switch component for boolean toggle controls.
 
 ### Examples:
 
-Switch with label
+Switch with visible label
 
 ```html
-<ga-switch label="Enable notifications" [(checked)]="enabled" />
-<ga-switch [(ngModel)]="value" label="Dark mode" />
+<ga-switch [(checked)]="enabled">Enable notifications</ga-switch>
+<ga-switch [(ngModel)]="value">Dark mode</ga-switch>
 ```
 
 ## Tabs

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,
@@ -1271,13 +1278,14 @@ class GaInputDirective {
         this.elementRef.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaInputDirective, deps: [{ token: 'placeholder', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.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()", "attr.disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.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()", "attr.disabled": "disabled() ? \"\" : null" } }, exportAs: ["gaInput"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaInputDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[gaInput]',
+                    exportAs: 'gaInput',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -2652,13 +2660,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 +3733,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 +4031,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();
         });
@@ -4071,6 +4079,9 @@ class GaSelectComponent {
     focusListbox() {
         this.cdkListbox().focus();
     }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
     setPreviousItemActive() {
         this.setItemActive(-1);
     }
@@ -4419,7 +4430,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 +5010,8 @@ class GaDataSelectComponent {
                         if (!this.multiple()) {
                             [value] = value;
                         }
-                        this.value.set(value);
                         this._onModelChanged?.(value);
+                        this.value.set(value);
                         this.autoClose();
                     });
                 });
@@ -5055,6 +5066,9 @@ class GaDataSelectComponent {
     focusListbox() {
         this.cdkListbox().focus();
     }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
     setActiveItemAsSelected() {
         const options = this.gaOptions();
         let activeOption = options.find((option) => option.cdkOption.isActive());
@@ -5319,6 +5333,12 @@ const SWITCH_CONTROL_VALUE_ACCESSOR = {
 let nextUniqueId$2 = 0;
 class GaSwitchComponent {
     icons = { Check };
+    /** Reference to the label element for content projection detection */
+    labelElement = viewChild('labelElement', ...(ngDevMode ? [{ debugName: "labelElement" }] : []));
+    /** Signal to track if content is projected */
+    hasProjectedContent = signal(false, ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : []));
+    /** @ignore */
+    destroyRef = inject(DestroyRef);
     /** @ignore */
     formFieldConnector = inject(GaFormFieldConnector, {
         optional: true,
@@ -5336,6 +5356,9 @@ class GaSwitchComponent {
     checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : {}), alias: 'aria-invalid' });
+    /**
+     * @deprecated Use content projection instead: `<ga-switch>Label text</ga-switch>`
+     */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
     ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), alias: 'aria-labelledby' });
@@ -5364,6 +5387,22 @@ class GaSwitchComponent {
             effect(() => formFieldConnector.controlDisabled.set(this.disabledModel()));
             effect(() => formFieldConnector.controlId.set(this.inputId()));
         }
+        afterNextRender(() => {
+            const el = this.labelElement()?.nativeElement;
+            if (!el)
+                return;
+            this.updateHasProjectedContent(el);
+            const observer = new MutationObserver(() => this.updateHasProjectedContent(el));
+            observer.observe(el, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    updateHasProjectedContent(el) {
+        this.hasProjectedContent.set((el.textContent?.trim().length ?? 0) > 0);
     }
     /** @ignore */
     onInputChange(event) {
@@ -5392,7 +5431,7 @@ class GaSwitchComponent {
         this.disabledModel.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaSwitchComponent, isStandalone: true, selector: "ga-switch", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", 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 } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ga-switch--checked": "checkedModel()", "class.ga-switch--disabled": "disabledModel()", "class.ga-switch--invalid": "invalidComputed()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-errormessage": "null", "attr.aria-invalid": "null" }, classAttribute: "ga-switch" }, providers: [SWITCH_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: GaSwitchComponent, isStandalone: true, selector: "ga-switch", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", 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 } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ga-switch--checked": "checkedModel()", "class.ga-switch--disabled": "disabledModel()", "class.ga-switch--invalid": "invalidComputed()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-errormessage": "null", "attr.aria-invalid": "null" }, classAttribute: "ga-switch" }, providers: [SWITCH_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n} @else {\n  <label\n    #labelElement\n    [attr.for]=\"hasProjectedContent() ? inputId() : null\"\n    [class.ga-switch__label]=\"hasProjectedContent()\"\n    [hidden]=\"!hasProjectedContent()\"\n  >\n    <ng-content></ng-content>\n  </label>\n}\n", dependencies: [{ 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: "21.0.4", ngImport: i0, type: GaSwitchComponent, decorators: [{
             type: Component,
@@ -5408,8 +5447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
                         '[attr.aria-describedby]': 'null',
                         '[attr.aria-errormessage]': 'null',
                         '[attr.aria-invalid]': 'null',
-                    }, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], ariaErrormessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-errormessage", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+                    }, template: "<input\n  #input\n  type=\"checkbox\"\n  class=\"ga-switch__input\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [disabled]=\"disabledModel()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-switch__marker\">\n  <ga-icon\n    [icon]=\"icons.Check\"\n    class=\"ga-switch__check-icon\"\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  />\n  <span class=\"ga-switch__slider\"></span>\n</div>\n@if (label()) {\n  <label [attr.for]=\"inputId()\" class=\"ga-switch__label\">{{ label() }}</label>\n} @else {\n  <label\n    #labelElement\n    [attr.for]=\"hasProjectedContent() ? inputId() : null\"\n    [class.ga-switch__label]=\"hasProjectedContent()\"\n    [hidden]=\"!hasProjectedContent()\"\n  >\n    <ng-content></ng-content>\n  </label>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { labelElement: [{ type: i0.ViewChild, args: ['labelElement', { isSignal: true }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], ariaErrormessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-errormessage", required: false }] }], nameInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
 class GaSwitchModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: GaSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });