@vsn-ux/ngx-gaia 0.2.5 → 0.3.0

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

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, numberAttribute, Component, ViewEncapsulation, Attribute, NgModule, ChangeDetectionStrategy, Injectable, makeEnvironmentProviders, booleanAttribute, output, computed, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, InjectionToken, effect, TemplateRef, NgZone, Input, afterRender, contentChildren, viewChild } from '@angular/core';
+import { inject, ElementRef, input, numberAttribute, Component, ViewEncapsulation, Attribute, NgModule, ChangeDetectionStrategy, Injectable, makeEnvironmentProviders, booleanAttribute, output, computed, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, InjectionToken, TemplateRef, NgZone, Input, effect, afterRender, contentChildren, viewChild } from '@angular/core';
 import * as i1 from 'lucide-angular';
 import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Minus, Check, ChevronUp, ChevronDown } from 'lucide-angular';
 import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
-import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import * as i1$1 from '@angular/cdk/menu';
-import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { merge, map, Subject, takeUntil } from 'rxjs';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i1$3 from '@angular/cdk/overlay';
 import { Overlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject, takeUntil, map, merge } from 'rxjs';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import * as i1$1 from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 
@@ -573,8 +573,11 @@ class GaFormControlDirective {
     _formControlId = input(undefined, {
         alias: 'gaFormControl',
     });
+    _formControlDisabled = input(undefined, {
+        alias: 'gaFormControlDisabled',
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: GaFormControlDirective, isStandalone: true, selector: "[gaFormControl]", inputs: { _formControlId: { classPropertyName: "_formControlId", publicName: "gaFormControl", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", 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 });
 }
@@ -603,14 +606,20 @@ class GaInputDirective {
         transform: booleanAttribute,
     });
     idInput = input(undefined, { alias: 'id' });
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
     invalid = computed(() => {
         return this.invalidInput() ?? this.implicitInvalid();
     });
     id = computed(() => {
         return this.idInput() ?? this.uniqueId;
     });
+    disabled = linkedSignal(() => this.disabledInput());
     errors = this.implicitErrors.asReadonly();
     _formControlId = this.id;
+    _formControlDisabled = computed(() => this.disabled());
     ngDoCheck() {
         if (this.hasWrapper)
             return;
@@ -619,10 +628,11 @@ class GaInputDirective {
         if (implicitNgControl) {
             this.implicitInvalid.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
             this.implicitErrors.set(implicitNgControl.errors);
+            this.disabled.set(!!implicitNgControl.disabled);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", 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 } }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaInputDirective, decorators: [{
             type: Component,
@@ -669,230 +679,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     }, template: "<ng-content />\n" }]
         }] });
 
-class GaFieldLabelComponent {
-    document = inject(DOCUMENT);
-    formField = inject(GaFormFieldComponent);
-    for = input();
-    controlId = computed(() => {
-        return this.for() ?? this.formField.controlId();
-    });
-    controlElement = computed(() => {
-        const control = this.document.querySelector(`#${this.controlId()}`);
-        if (control instanceof HTMLElement) {
-            return control;
-        }
-        return null;
-    });
-    focusControl() {
-        const control = this.controlElement();
-        // only focus custom elements as native elements already
-        // have support for connecting label and reacting to events
-        if (control?.tagName.includes('-')) {
-            control.focus();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<label
-    [attr.for]="controlId()"
-    class="ga-form-field__label"
-    (click)="focusControl()"
-    ><ng-content
-  /></label>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-label',
-                    template: `<label
-    [attr.for]="controlId()"
-    class="ga-form-field__label"
-    (click)="focusControl()"
-    ><ng-content
-  /></label>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class GaFieldInfoComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFieldInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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: "19.1.5", ngImport: i0, type: GaFieldInfoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-info',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'ga-form-field__info',
-                    },
-                }]
-        }] });
-
-class GaFormFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule, imports: [GaFormFieldComponent,
-            GaFieldLabelComponent,
-            GaFieldInfoComponent,
-            GaFormControlDirective], exports: [GaFormFieldComponent,
-            GaFieldLabelComponent,
-            GaFieldInfoComponent,
-            GaFormControlDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        GaFormFieldComponent,
-                        GaFieldLabelComponent,
-                        GaFieldInfoComponent,
-                        GaFormControlDirective,
-                    ],
-                    exports: [
-                        GaFormFieldComponent,
-                        GaFieldLabelComponent,
-                        GaFieldInfoComponent,
-                        GaFormControlDirective,
-                    ],
-                }]
-        }] });
-
-class GaMenuComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:var(--ga-size-8);margin-bottom:var(--ga-size-8)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ga-menu', template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
-                        class: 'ga-menu',
-                    }, styles: [":host{margin-top:var(--ga-size-8);margin-bottom:var(--ga-size-8)}\n"] }]
-        }] });
-
-class GaMenuItemComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", host: { classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$1.CdkMenuItem }], ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[gaMenuItem]',
-                    template: `<ng-content />`,
-                    hostDirectives: [CdkMenuItem],
-                    host: {
-                        class: 'ga-menu__item',
-                    },
-                }]
-        }] });
-
-class GaMenuTitleComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuTitleComponent, isStandalone: true, selector: "ga-menu-title", host: { classAttribute: "ga-menu__title" }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-menu-title',
-                    template: `<ng-content />`,
-                    host: {
-                        class: 'ga-menu__title',
-                    },
-                }]
-        }] });
-
-class GaMenuTriggerDirective {
-    cdkMenuTrigger = inject(CdkMenuTrigger);
-    menuRef = input.required({
-        alias: 'gaMenuTrigger',
-    });
-    isOpen = toSignal(merge(this.cdkMenuTrigger.opened.pipe(map(() => true)), this.cdkMenuTrigger.closed.pipe(map(() => false))), { initialValue: this.cdkMenuTrigger.isOpen() });
-    constructor() {
-        effect(() => {
-            this.cdkMenuTrigger.menuTemplateRef = this.menuRef();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: GaMenuTriggerDirective, isStandalone: true, selector: "[gaMenuTrigger]", inputs: { menuRef: { classPropertyName: "menuRef", publicName: "gaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["gaMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[gaMenuTrigger]',
-                    exportAs: 'gaMenuTrigger',
-                    standalone: true,
-                    hostDirectives: [CdkMenuTrigger],
-                }]
-        }], ctorParameters: () => [] });
-
-class GaMenuSeparatorComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuSeparatorComponent, isStandalone: true, selector: "ga-menu-separator", host: { classAttribute: "ga-menu__separator" }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-menu-separator',
-                    template: `<ng-content />`,
-                    host: {
-                        class: 'ga-menu__separator',
-                    },
-                }]
-        }] });
-
-class GaMenuTriggerIconComponent {
-    menuTrigger = inject(GaMenuTriggerDirective);
-    icon = computed(() => {
-        return this.menuTrigger.isOpen() ? ChevronUp : ChevronDown;
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuTriggerIconComponent, isStandalone: true, selector: "ga-menu-trigger-icon", ngImport: i0, template: `<ga-icon [icon]="icon()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-menu-trigger-icon',
-                    imports: [GaIconModule],
-                    template: `<ga-icon [icon]="icon()" />`,
-                }]
-        }] });
-
-class GaMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, imports: [GaMenuComponent,
-            GaMenuItemComponent,
-            GaMenuTriggerDirective,
-            GaMenuSeparatorComponent,
-            GaMenuTitleComponent,
-            GaMenuTriggerIconComponent], exports: [GaMenuComponent,
-            GaMenuItemComponent,
-            GaMenuTriggerDirective,
-            GaMenuSeparatorComponent,
-            GaMenuTitleComponent,
-            GaMenuTriggerIconComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, imports: [GaMenuTriggerIconComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        GaMenuComponent,
-                        GaMenuItemComponent,
-                        GaMenuTriggerDirective,
-                        GaMenuSeparatorComponent,
-                        GaMenuTitleComponent,
-                        GaMenuTriggerIconComponent,
-                    ],
-                    exports: [
-                        GaMenuComponent,
-                        GaMenuItemComponent,
-                        GaMenuTriggerDirective,
-                        GaMenuSeparatorComponent,
-                        GaMenuTitleComponent,
-                        GaMenuTriggerIconComponent,
-                    ],
-                }]
-        }] });
-
 class GaTooltipComponent {
     mouseLeaveSubject = new Subject();
     afterMouseLeave = () => this.mouseLeaveSubject.asObservable();
@@ -1274,6 +1060,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
+class GaFieldLabelComponent {
+    document = inject(DOCUMENT);
+    formField = inject(GaFormFieldComponent);
+    for = input();
+    definition = input(null);
+    state = input();
+    controlId = computed(() => {
+        return this.for() ?? this.formField.controlId();
+    });
+    controlElement = computed(() => {
+        const control = this.document.querySelector(`#${this.controlId()}`);
+        if (control instanceof HTMLElement) {
+            return control;
+        }
+        return null;
+    });
+    focusControl() {
+        const control = this.controlElement();
+        // only focus custom elements as native elements already
+        // have support for connecting label and reacting to events
+        if (control?.tagName.includes('-')) {
+            control.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", 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: "<label\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\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: "19.1.5", ngImport: i0, type: GaFieldInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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: "19.1.5", ngImport: i0, type: GaFieldInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-info',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'ga-form-field__info',
+                    },
+                }]
+        }] });
+
+class GaFormFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule, imports: [GaFormFieldComponent,
+            GaFieldLabelComponent,
+            GaFieldInfoComponent,
+            GaFormControlDirective], exports: [GaFormFieldComponent,
+            GaFieldLabelComponent,
+            GaFieldInfoComponent,
+            GaFormControlDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        GaFormFieldComponent,
+                        GaFieldLabelComponent,
+                        GaFieldInfoComponent,
+                        GaFormControlDirective,
+                    ],
+                    exports: [
+                        GaFormFieldComponent,
+                        GaFieldLabelComponent,
+                        GaFieldInfoComponent,
+                        GaFormControlDirective,
+                    ],
+                }]
+        }] });
+
+class GaMenuComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:var(--ga-size-8);margin-bottom:var(--ga-size-8)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-menu', template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
+                        class: 'ga-menu',
+                    }, styles: [":host{margin-top:var(--ga-size-8);margin-bottom:var(--ga-size-8)}\n"] }]
+        }] });
+
+class GaMenuItemComponent {
+    icon = input(undefined, {
+        alias: 'gaMenuItemIcon',
+    });
+    description = input('', { alias: 'gaMenuItemDescription' });
+    shortcut = input('', { alias: 'gaMenuItemShortcut' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$1.CdkMenuItem }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[gaMenuItem]', imports: [GaIconModule], hostDirectives: [CdkMenuItem], host: {
+                        class: 'ga-menu__item',
+                    }, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n" }]
+        }] });
+
+class GaMenuTitleComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuTitleComponent, isStandalone: true, selector: "ga-menu-title", host: { classAttribute: "ga-menu__title" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-menu-title',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ga-menu__title',
+                    },
+                }]
+        }] });
+
+class GaMenuTriggerDirective {
+    cdkMenuTrigger = inject(CdkMenuTrigger);
+    menuRef = input.required({
+        alias: 'gaMenuTrigger',
+    });
+    isOpen = toSignal(merge(this.cdkMenuTrigger.opened.pipe(map(() => true)), this.cdkMenuTrigger.closed.pipe(map(() => false))), { initialValue: this.cdkMenuTrigger.isOpen() });
+    constructor() {
+        effect(() => {
+            this.cdkMenuTrigger.menuTemplateRef = this.menuRef();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: GaMenuTriggerDirective, isStandalone: true, selector: "[gaMenuTrigger]", inputs: { menuRef: { classPropertyName: "menuRef", publicName: "gaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["gaMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaMenuTrigger]',
+                    exportAs: 'gaMenuTrigger',
+                    standalone: true,
+                    hostDirectives: [CdkMenuTrigger],
+                }]
+        }], ctorParameters: () => [] });
+
+class GaMenuSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuSeparatorComponent, isStandalone: true, selector: "ga-menu-separator", host: { classAttribute: "ga-menu__separator" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-menu-separator',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ga-menu__separator',
+                    },
+                }]
+        }] });
+
+class GaMenuTriggerIconComponent {
+    menuTrigger = inject(GaMenuTriggerDirective);
+    icon = computed(() => {
+        return this.menuTrigger.isOpen() ? ChevronUp : ChevronDown;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuTriggerIconComponent, isStandalone: true, selector: "ga-menu-trigger-icon", ngImport: i0, template: `<ga-icon [icon]="icon()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuTriggerIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-menu-trigger-icon',
+                    imports: [GaIconModule],
+                    template: `<ga-icon [icon]="icon()" />`,
+                }]
+        }] });
+
+class GaMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, imports: [GaMenuComponent,
+            GaMenuItemComponent,
+            GaMenuTriggerDirective,
+            GaMenuSeparatorComponent,
+            GaMenuTitleComponent,
+            GaMenuTriggerIconComponent], exports: [GaMenuComponent,
+            GaMenuItemComponent,
+            GaMenuTriggerDirective,
+            GaMenuSeparatorComponent,
+            GaMenuTitleComponent,
+            GaMenuTriggerIconComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, imports: [GaMenuItemComponent,
+            GaMenuTriggerIconComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        GaMenuComponent,
+                        GaMenuItemComponent,
+                        GaMenuTriggerDirective,
+                        GaMenuSeparatorComponent,
+                        GaMenuTitleComponent,
+                        GaMenuTriggerIconComponent,
+                    ],
+                    exports: [
+                        GaMenuComponent,
+                        GaMenuItemComponent,
+                        GaMenuTriggerDirective,
+                        GaMenuSeparatorComponent,
+                        GaMenuTitleComponent,
+                        GaMenuTriggerIconComponent,
+                    ],
+                }]
+        }] });
+
 /**
  * Provider Expression that allows ga-radio-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)] and ngControl.
@@ -1462,7 +1461,7 @@ class GaOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", 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 }, 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" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$2.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<ng-content />\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: "19.1.5", 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 }, 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" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$2.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, decorators: [{
             type: Component,
@@ -1481,7 +1480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         '[class.ga-dropdown__item--disabled]': 'cdkOption.disabled',
                         '[class.ga-dropdown__item--active]': 'active() && !cdkOption.disabled',
                         '(click)': 'onClick()',
-                    }, 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<ng-content />\n" }]
+                    }, 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" }]
         }], ctorParameters: () => [] });
 
 class GaSelectValueComponent {
@@ -1611,6 +1610,7 @@ class GaSelectComponent {
         return this.invalidInput() ?? this.implicitInvalid();
     });
     _formControlId = computed(() => this.id());
+    _formControlDisabled = computed(() => this.disabled());
     constructor() {
         effect(() => {
             // if the select became disabled while open, close it