@vsn-ux/ngx-gaia 0.2.0 → 0.2.2

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

@@ -1,16 +1,21 @@
 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 } 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, viewChild, contentChildren, isDevMode, afterNextRender } 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 } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
 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 { Overlay } from '@angular/cdk/overlay';
+import { toSignal, outputToObservable } from '@angular/core/rxjs-interop';
+import { merge, map, Subject, takeUntil, firstValueFrom } from 'rxjs';
+import * as i1$3 from '@angular/cdk/overlay';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { NgTemplateOutlet } from '@angular/common';
+import * as i1$2 from '@angular/cdk/listbox';
+import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
+import * as i2 from '@angular/cdk/observers';
+import { ObserversModule } from '@angular/cdk/observers';
 
 class GaIconComponent {
     elementRef = inject(ElementRef);
@@ -592,7 +597,10 @@ class GaInputDirective {
     hasWrapper = inject(GaInputComponent, { optional: true });
     implicitInvalid = signal(false);
     implicitErrors = signal(null);
-    invalidInput = input(null, { transform: booleanAttribute });
+    invalidInput = input(null, {
+        alias: 'invalid',
+        transform: booleanAttribute,
+    });
     idInput = input(undefined, { alias: 'id' });
     invalid = computed(() => {
         return this.invalidInput() ?? this.implicitInvalid();
@@ -612,7 +620,7 @@ class GaInputDirective {
         }
     }
     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: "invalidInput", 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 } }, 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,
@@ -895,13 +903,13 @@ class GaTooltipComponent {
         this.mouseLeaveSubject.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaTooltipComponent, isStandalone: true, selector: "ga-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hideTriggered: "hideTriggered" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "inlineStyle()" } }, ngImport: i0, template: "<div [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-top :host,.left-center :host,.left-bottom :host{padding-right:var(--ga-tooltip-offset)}.right-top :host,.right-center :host,.right-bottom :host{padding-left:var(--ga-tooltip-offset)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaTooltipComponent, isStandalone: true, selector: "ga-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hideTriggered: "hideTriggered" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "inlineStyle()" } }, ngImport: i0, template: "<div [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-start :host,.left-center :host,.left-end :host{padding-right:var(--ga-tooltip-offset)}.right-start :host,.right-center :host,.right-end :host{padding-left:var(--ga-tooltip-offset)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-tooltip', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.style]': 'inlineStyle()',
-                    }, template: "<div [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-top :host,.left-center :host,.left-bottom :host{padding-right:var(--ga-tooltip-offset)}.right-top :host,.right-center :host,.right-bottom :host{padding-left:var(--ga-tooltip-offset)}\n"] }]
+                    }, template: "<div [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-start :host,.left-center :host,.left-end :host{padding-right:var(--ga-tooltip-offset)}.right-start :host,.right-center :host,.right-end :host{padding-left:var(--ga-tooltip-offset)}\n"] }]
         }], propDecorators: { handleMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -1118,13 +1126,14 @@ class GaTooltipDirective {
         position.withPositions(positions);
     }
     getPositions(preferredPlacement) {
+        const [position, direction] = preferredPlacement.split('-');
         let positionedOverlayY;
         let positionedOffsetY;
-        if (preferredPlacement.endsWith('start')) {
+        if (direction === 'start') {
             positionedOverlayY = 'top';
             positionedOffsetY = -24;
         }
-        else if (preferredPlacement.endsWith('end')) {
+        else if (direction === 'end') {
             positionedOverlayY = 'bottom';
             positionedOffsetY = 24;
         }
@@ -1132,19 +1141,15 @@ class GaTooltipDirective {
             positionedOverlayY = 'center';
             positionedOffsetY = 0;
         }
-        let positionedOverlayX;
         let positionedOffsetX;
-        if (preferredPlacement.endsWith('start')) {
-            positionedOverlayX = 'start';
+        if (direction === 'start') {
             positionedOffsetX = -24;
         }
-        else if (preferredPlacement.endsWith('end')) {
-            positionedOverlayX = 'end';
+        else if (direction === 'end') {
             positionedOffsetX = 24;
         }
         else {
             positionedOffsetX = 0;
-            positionedOverlayX = 'center';
         }
         const right = {
             originX: 'end',
@@ -1152,7 +1157,7 @@ class GaTooltipDirective {
             overlayX: 'start',
             overlayY: positionedOverlayY,
             offsetY: positionedOffsetY,
-            panelClass: `right-${positionedOverlayY}`,
+            panelClass: `right-${direction}`,
         };
         const left = {
             originX: 'start',
@@ -1160,31 +1165,31 @@ class GaTooltipDirective {
             overlayX: 'end',
             overlayY: positionedOverlayY,
             offsetY: positionedOffsetY,
-            panelClass: `left-${positionedOverlayY}`,
+            panelClass: `left-${direction}`,
         };
         const top = {
             originX: 'center',
             originY: 'top',
-            overlayX: positionedOverlayX,
+            overlayX: direction,
             overlayY: 'bottom',
             offsetX: positionedOffsetX,
-            panelClass: `top-${positionedOverlayX}`,
+            panelClass: `top-${direction}`,
         };
         const bottom = {
             originX: 'center',
             originY: 'bottom',
-            overlayX: positionedOverlayX,
+            overlayX: direction,
             overlayY: 'top',
             offsetX: positionedOffsetX,
-            panelClass: `bottom-${positionedOverlayX}`,
+            panelClass: `bottom-${direction}`,
         };
-        if (preferredPlacement.startsWith('right')) {
+        if (position === 'right') {
             return [right, left, bottom, top];
         }
-        else if (preferredPlacement.startsWith('left')) {
+        else if (position === 'left') {
             return [left, right, bottom, top];
         }
-        else if (preferredPlacement.startsWith('top')) {
+        else if (position === 'top') {
             return [top, bottom, right, left];
         }
         else {
@@ -1245,90 +1250,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class GaSpinnerComponent {
-    size = input(32, { transform: numberAttribute });
-    strokeWidth = computed(() => this.size() / 5);
-    center = computed(() => this.size() / 2);
-    radius = computed(() => (this.size() - this.strokeWidth()) / 2);
-    circumference = computed(() => 2 * Math.PI * this.radius());
-    arcCircumference = computed(() => this.circumference() * 0.25);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSpinnerComponent, isStandalone: true, selector: "ga-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-spinner" }, ngImport: i0, template: `
-    <svg
-      [attr.width]="size()"
-      [attr.height]="size()"
-      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-secondary)"
-        [attr.stroke-width]="strokeWidth()"
-        fill="none"
-      ></circle>
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-primary-70)"
-        [attr.stroke-width]="strokeWidth()"
-        stroke-linecap="round"
-        fill="none"
-        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
-        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
-      ></circle>
-    </svg>
-  `, isInline: true, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ga-spinner', template: `
-    <svg
-      [attr.width]="size()"
-      [attr.height]="size()"
-      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-secondary)"
-        [attr.stroke-width]="strokeWidth()"
-        fill="none"
-      ></circle>
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-primary-70)"
-        [attr.stroke-width]="strokeWidth()"
-        stroke-linecap="round"
-        fill="none"
-        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
-        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
-      ></circle>
-    </svg>
-  `, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'ga-spinner',
-                    }, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"] }]
-        }] });
-
-class GaSpinnerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, imports: [GaSpinnerComponent], exports: [GaSpinnerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [GaSpinnerComponent],
-                    exports: [GaSpinnerComponent],
-                }]
-        }] });
-
 /**
  * Provider Expression that allows ga-radio-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)] and ngControl.
@@ -1490,6 +1411,697 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
+class GaOptionComponent {
+    _isSelected = signal(false);
+    _isActive = signal(false);
+    selectComponent = inject(GaSelectComponent);
+    cdkOption = inject(CdkOption, { self: true });
+    value = input(null);
+    disabled = input(false, { transform: booleanAttribute });
+    withInput = input(false, { transform: booleanAttribute });
+    selected = computed(() => this._isSelected() &&
+        this.cdkOption.value !== undefined &&
+        this.cdkOption.value !== null &&
+        this.cdkOption.value !== '');
+    active = this._isActive.asReadonly();
+    ngDoCheck() {
+        // NOTE: currently there is no other reliable way to track the selected state,
+        // refactor once cdk will be based on signals or more appropriate events introduced
+        this._isSelected.set(this.cdkOption.isSelected());
+        this._isActive.set(this.cdkOption.isActive());
+    }
+    onClick() {
+        if (!this.cdkOption.disabled) {
+            this.selectComponent.autoClose();
+        }
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-option', imports: [GaCheckboxModule, GaRadioModule], hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: [
+                                'cdkOption: value',
+                                'cdkOptionDisabled: disabled',
+                                'cdkOptionTypeaheadLabel: typeaheadLabel',
+                            ],
+                        },
+                    ], host: {
+                        class: 'ga-dropdown__item',
+                        '[class.ga-dropdown__item--selected]': 'selected()',
+                        '[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" }]
+        }] });
+
+class GaSelectValueComponent {
+    selectComponent = inject(GaSelectComponent);
+    optionViewValue = computed(() => {
+        const options = this.selectComponent.selectedOptions();
+        if (!options.length) {
+            return null;
+        }
+        return options
+            .map((option) => option.cdkOption.element.textContent?.trim() ?? '')
+            .join(', ');
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectValueComponent, isStandalone: true, selector: "ga-select-value", ngImport: i0, template: `{{ optionViewValue() }}`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectValueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-select-value',
+                    template: `{{ optionViewValue() }}`,
+                }]
+        }] });
+
+const GA_SELECT_TRIGGER = new InjectionToken('gaSelectTrigger');
+
+class GaSelectTriggerComponent {
+    selectComponent = inject(GaSelectComponent);
+    content = viewChild('ngContent', { read: ElementRef });
+    hasCustomLabel = signal(false);
+    menuStatusIcon = computed(() => {
+        return this.selectComponent.isOpen() ? ChevronUp : ChevronDown;
+    });
+    leftIcon = input();
+    ngAfterViewInit() {
+        this.checkIfHasCustomLabel();
+    }
+    checkIfHasCustomLabel() {
+        this.hasCustomLabel.set(!!this.content()?.nativeElement.children.length);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectTriggerComponent, isStandalone: true, selector: "ga-select-trigger", inputs: { leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "selectComponent.toggle()", "keydown.arrowdown": "selectComponent.open(); $event.preventDefault()", "keydown.space": "selectComponent.open(); $event.preventDefault()", "keydown.enter": "selectComponent.open(); $event.preventDefault()" }, properties: { "class.ga-select--expanded": "selectComponent.isOpen()", "class.ga-select--disabled": "selectComponent.disabled()", "class.ga-select--invalid": "selectComponent.invalid()", "class.ga-select--empty": "!selectComponent.hasValue()", "attr.aria-expanded": "selectComponent.isOpen()", "attr.aria-controls": "selectComponent.listboxId()", "attr.aria-invalid": "selectComponent.invalid()", "attr.aria-disabled": "selectComponent.disabled()", "attr.aria-activedescendant": "selectComponent.activeDescendantId()", "attr.tabindex": "selectComponent.disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
+            {
+                provide: GA_SELECT_TRIGGER,
+                useExisting: forwardRef(() => GaSelectTriggerComponent),
+            },
+        ], viewQueries: [{ propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()\" />\n}\n@if (selectComponent.hasValue()) {\n  <div class=\"ga-select__value\">\n    <span #ngContent (cdkObserveContent)=\"checkIfHasCustomLabel()\">\n      <ng-content />\n    </span>\n    @if (!hasCustomLabel()) {\n      <ga-select-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ selectComponent.placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n", dependencies: [{ kind: "ngmodule", type: GaInputModule }, { kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaSelectValueComponent, selector: "ga-select-value" }, { kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-select-trigger', imports: [
+                        GaInputModule,
+                        GaIconModule,
+                        GaSelectValueComponent,
+                        ObserversModule,
+                    ], providers: [
+                        {
+                            provide: GA_SELECT_TRIGGER,
+                            useExisting: forwardRef(() => GaSelectTriggerComponent),
+                        },
+                    ], host: {
+                        role: 'combobox',
+                        class: 'ga-select',
+                        '[class.ga-select--expanded]': 'selectComponent.isOpen()',
+                        '[class.ga-select--disabled]': 'selectComponent.disabled()',
+                        '[class.ga-select--invalid]': 'selectComponent.invalid()',
+                        '[class.ga-select--empty]': '!selectComponent.hasValue()',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-expanded]': 'selectComponent.isOpen()',
+                        '[attr.aria-controls]': 'selectComponent.listboxId()',
+                        '[attr.aria-invalid]': 'selectComponent.invalid()',
+                        '[attr.aria-disabled]': 'selectComponent.disabled()',
+                        '[attr.aria-activedescendant]': 'selectComponent.activeDescendantId()',
+                        '[attr.tabindex]': 'selectComponent.disabled() ? -1 : 0',
+                        '(click)': 'selectComponent.toggle()',
+                        '(keydown.arrowdown)': 'selectComponent.open(); $event.preventDefault()',
+                        '(keydown.space)': 'selectComponent.open(); $event.preventDefault()',
+                        '(keydown.enter)': 'selectComponent.open(); $event.preventDefault()',
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()\" />\n}\n@if (selectComponent.hasValue()) {\n  <div class=\"ga-select__value\">\n    <span #ngContent (cdkObserveContent)=\"checkIfHasCustomLabel()\">\n      <ng-content />\n    </span>\n    @if (!hasCustomLabel()) {\n      <ga-select-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ selectComponent.placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n" }]
+        }] });
+
+class GaSelectCustomTriggerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectCustomTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectCustomTriggerComponent, isStandalone: true, selector: "ga-select-custom-trigger", providers: [
+            {
+                provide: GA_SELECT_TRIGGER,
+                useExisting: forwardRef(() => GaSelectCustomTriggerComponent),
+            },
+        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectCustomTriggerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-select-custom-trigger',
+                    template: `<ng-content></ng-content>`,
+                    providers: [
+                        {
+                            provide: GA_SELECT_TRIGGER,
+                            useExisting: forwardRef(() => GaSelectCustomTriggerComponent),
+                        },
+                    ],
+                }]
+        }] });
+
+class GaSelectComponent {
+    focusedTriggerElement = null;
+    _onTouched;
+    _onModelChanged;
+    positions = [
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ];
+    injector = inject(Injector);
+    implicitInvalid = signal(false);
+    _isOpen = signal(false);
+    value = model(null);
+    placeholder = input('');
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    invalidInput = input(null, {
+        alias: 'invalid',
+        transform: booleanAttribute,
+    });
+    multiple = input(false, { transform: booleanAttribute });
+    compareWith = input();
+    withoutAutoFocus = signal(false);
+    opened = output();
+    closed = output();
+    // TODO: if we rename this to options, it breaks, why?
+    gaOptions = contentChildren(GaOptionComponent, {
+        descendants: true,
+        read: GaOptionComponent,
+    });
+    cdkListbox = contentChild.required(CdkListbox);
+    explicitTrigger = contentChild(GA_SELECT_TRIGGER);
+    isOpen = this._isOpen.asReadonly();
+    disabled = linkedSignal(() => this.disabledInput());
+    icon = computed(() => {
+        return this._isOpen() ? ChevronUp : ChevronDown;
+    });
+    selectedOptions = computed(() => {
+        return this.gaOptions().filter((option) => option.selected());
+    });
+    activeDescendantId = computed(() => {
+        const activeOption = this.gaOptions().find((option) => option.active());
+        return activeOption?.cdkOption.id;
+    });
+    hasValue = computed(() => {
+        const value = this.value();
+        if (this.multiple()) {
+            return Array.isArray(value) && value.length > 0;
+        }
+        return value !== null && value !== undefined && value !== '';
+    });
+    invalid = computed(() => {
+        return this.invalidInput() ?? this.implicitInvalid();
+    });
+    listboxId = computed(() => this.cdkListbox().id);
+    constructor() {
+        effect(() => {
+            // if the select became disabled while open, close it
+            if (this.disabled() && this._isOpen()) {
+                this.close();
+            }
+        });
+    }
+    ngAfterContentInit() {
+        effect(() => {
+            this.cdkListbox().multiple = this.multiple();
+            this.cdkListbox().useActiveDescendant = this.withoutAutoFocus();
+            this.cdkListbox().compareWith = this.compareWith();
+            this.cdkListbox().value = this.multiple()
+                ? this.value()
+                : [this.value()];
+        }, { injector: this.injector });
+        // track value changes (pull)
+        this.cdkListbox().valueChange.subscribe(({ value }) => {
+            if (!this.multiple()) {
+                [value] = value;
+            }
+            this.value.set(value);
+            this._onModelChanged?.(value);
+            // this is needed because value could be also changed via keyboard
+            this.autoClose();
+        });
+        if (isDevMode() &&
+            this.explicitTrigger() instanceof GaSelectCustomTriggerComponent) {
+            if (this.multiple()) {
+                console.warn('<ga-select>: The `multiple` property requires custom handling when using a custom trigger component. If you have implemented the multiple selection logic in your custom trigger, you can ignore this warning. [This message is visible in dev mode only]');
+            }
+        }
+    }
+    ngDoCheck() {
+        const implicitNgControl = this.injector.get(NgControl, null);
+        // we can rely on computed because `ivalid` of NgControl is not a signal, yet
+        if (implicitNgControl) {
+            this.implicitInvalid.set(!!implicitNgControl.invalid && !!implicitNgControl.dirty);
+        }
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onModelChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
+    toggle() {
+        if (this._isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.disabled() || this._isOpen()) {
+            return Promise.resolve();
+        }
+        this._isOpen.set(true);
+        return firstValueFrom(outputToObservable(this.opened));
+    }
+    close() {
+        if (!this._isOpen()) {
+            return Promise.resolve();
+        }
+        this._isOpen.set(false);
+        return firstValueFrom(outputToObservable(this.closed));
+    }
+    autoClose() {
+        // close that was initiated by clicking the option
+        if (!this.multiple()) {
+            this.close();
+        }
+    }
+    focusListbox() {
+        this.cdkListbox().focus();
+    }
+    setPreviousItemActive() {
+        this.setItemActive(-1);
+    }
+    setNextItemActive() {
+        this.setItemActive(1);
+    }
+    setActiveItemAsSelected() {
+        const options = this.gaOptions();
+        let activeOption = options.find((option) => option.cdkOption.isActive());
+        if (!activeOption && options.length > 0) {
+            activeOption = options[0];
+        }
+        if (activeOption) {
+            const { cdkOption } = activeOption;
+            this.cdkListbox().toggle(cdkOption);
+            let { value } = this.cdkListbox();
+            if (!this.multiple()) {
+                [value] = value;
+            }
+            this.value.set(value);
+        }
+    }
+    onOverlayAttach() {
+        this._isOpen.set(true);
+        this.focusedTriggerElement = document.activeElement;
+        this.opened.emit();
+        if (!this.withoutAutoFocus()) {
+            this.focusListbox();
+        }
+    }
+    onOverlayDetach() {
+        this._isOpen.set(false);
+        this.focusedTriggerElement?.focus();
+        this._onTouched?.();
+        this.closed.emit();
+    }
+    setItemActive(direction) {
+        const options = this.gaOptions();
+        const currentIndex = options.findIndex(({ cdkOption }) => cdkOption.isActive());
+        const findNextEnabled = (startIndex) => {
+            let index = startIndex;
+            for (let i = 0; i < options.length; i++) {
+                // calculate next index with wrapping (using modulo)
+                index = (index + direction + options.length) % options.length;
+                if (!options[index].cdkOption.disabled) {
+                    return index;
+                }
+            }
+            return -1; // no enabled options found
+        };
+        const nextIndex = findNextEnabled(currentIndex);
+        if (nextIndex !== -1) {
+            this.cdkListbox()._setActiveOption(options[nextIndex].cdkOption);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectComponent, isStandalone: true, selector: "ga-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GaSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "explicitTrigger", first: true, predicate: GA_SELECT_TRIGGER, descendants: true, isSignal: true }], ngImport: i0, template: "<div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @if (explicitTrigger()) {\n    <ng-content\n      select=\"ga-select-custom-trigger, ga-select-trigger, ga-select-searchable-trigger\"\n    />\n  } @else {\n    <ga-select-trigger />\n  }\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-content\" />\n</ng-template>\n", styles: ["ga-select{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: GaSelectTriggerComponent, selector: "ga-select-trigger", inputs: ["leftIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-select', imports: [
+                        GaIconModule,
+                        GaButtonModule,
+                        OverlayModule,
+                        GaSelectTriggerComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GaSelectComponent),
+                            multi: true,
+                        },
+                    ], encapsulation: ViewEncapsulation.None, template: "<div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  @if (explicitTrigger()) {\n    <ng-content\n      select=\"ga-select-custom-trigger, ga-select-trigger, ga-select-searchable-trigger\"\n    />\n  } @else {\n    <ga-select-trigger />\n  }\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-content\" />\n</ng-template>\n", styles: ["ga-select{display:inline-block}\n"] }]
+        }], ctorParameters: () => [] });
+
+class GaOptgroupComponent {
+    label = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaOptgroupComponent, isStandalone: true, selector: "ga-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" } }, ngImport: i0, template: `
+    @if (label()) {
+      <div class="ga-dropdown__caption">{{ label() }}</div>
+    }
+    <ng-content />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptgroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-optgroup',
+                    template: `
+    @if (label()) {
+      <div class="ga-dropdown__caption">{{ label() }}</div>
+    }
+    <ng-content />
+  `,
+                    host: {
+                        role: 'group',
+                    },
+                }]
+        }] });
+
+class GaSpinnerComponent {
+    size = input(32, { transform: numberAttribute });
+    strokeWidth = computed(() => this.size() / 5);
+    center = computed(() => this.size() / 2);
+    radius = computed(() => (this.size() - this.strokeWidth()) / 2);
+    circumference = computed(() => 2 * Math.PI * this.radius());
+    arcCircumference = computed(() => this.circumference() * 0.25);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSpinnerComponent, isStandalone: true, selector: "ga-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-spinner" }, ngImport: i0, template: `
+    <svg
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-secondary)"
+        [attr.stroke-width]="strokeWidth()"
+        fill="none"
+      ></circle>
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-primary-70)"
+        [attr.stroke-width]="strokeWidth()"
+        stroke-linecap="round"
+        fill="none"
+        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
+        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
+      ></circle>
+    </svg>
+  `, isInline: true, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-spinner', template: `
+    <svg
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-secondary)"
+        [attr.stroke-width]="strokeWidth()"
+        fill="none"
+      ></circle>
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-primary-70)"
+        [attr.stroke-width]="strokeWidth()"
+        stroke-linecap="round"
+        fill="none"
+        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
+        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
+      ></circle>
+    </svg>
+  `, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ga-spinner',
+                    }, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+class GaSpinnerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, imports: [GaSpinnerComponent], exports: [GaSpinnerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GaSpinnerComponent],
+                    exports: [GaSpinnerComponent],
+                }]
+        }] });
+
+class GaSelectContentLoadingComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectContentLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectContentLoadingComponent, isStandalone: true, selector: "ga-select-content-loading", host: { classAttribute: "ga-dropdown__content-spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectContentLoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-select-content-loading',
+                    template: `<ga-spinner size="16" />`,
+                    imports: [GaSpinnerModule],
+                    host: {
+                        class: 'ga-dropdown__content-spinner',
+                    },
+                }]
+        }] });
+
+class GaSelectContentComponent {
+    loading = input(false, { transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectContentComponent, isStandalone: true, selector: "ga-select-content", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$2.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-content-loading />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectContentLoadingComponent, selector: "ga-select-content-loading" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-select-content', imports: [GaSelectContentLoadingComponent], hostDirectives: [CdkListbox], host: {
+                        class: 'ga-dropdown ga-dropdown__content',
+                    }, template: "@if (loading()) {\n  <ga-select-content-loading />\n} @else {\n  <ng-content />\n}\n" }]
+        }] });
+
+class GaSelectComboboxTriggerComponent {
+    injector = inject(Injector);
+    selectComponent = inject(GaSelectComponent);
+    content = viewChild('ngContent', { read: ElementRef });
+    inputSearch = viewChild('inputSearch');
+    hasCustomLabel = signal(false);
+    menuStatusIcon = computed(() => {
+        return this.selectComponent.isOpen() ? ChevronUp : ChevronDown;
+    });
+    textValue = model('');
+    leftIcon = input();
+    constructor() {
+        this.selectComponent.withoutAutoFocus.set(true);
+        this.selectComponent.opened.subscribe(() => {
+            afterNextRender(() => {
+                this.inputSearch().nativeElement.focus();
+            }, { injector: this.injector });
+        });
+        this.selectComponent.closed.subscribe(() => this.textValue.set(''));
+    }
+    ngAfterViewInit() {
+        this.checkIfHasCustomLabel();
+    }
+    checkIfHasCustomLabel() {
+        this.hasCustomLabel.set(!!this.content()?.nativeElement.children.length);
+    }
+    toggle() {
+        if (this.selectComponent.disabled()) {
+            return;
+        }
+        if (!this.selectComponent.isOpen()) {
+            this.open();
+        }
+        else {
+            this.selectComponent.close();
+        }
+    }
+    open() {
+        this.selectComponent.open();
+    }
+    onInputKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+                this.selectComponent.setNextItemActive();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'ArrowUp':
+                this.selectComponent.setPreviousItemActive();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'Space':
+                event.stopPropagation();
+                break;
+            case 'Enter':
+                this.selectComponent.setActiveItemAsSelected();
+                this.selectComponent.autoClose();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComboboxTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectComboboxTriggerComponent, isStandalone: true, selector: "ga-select-searchable-trigger", inputs: { textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textValue: "textValueChange" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()" }, properties: { "class.ga-select--expanded": "selectComponent.isOpen()", "class.ga-select--disabled": "selectComponent.disabled()", "class.ga-select--invalid": "selectComponent.invalid()", "class.ga-select--empty": "!selectComponent.hasValue()", "attr.aria-expanded": "selectComponent.isOpen()", "attr.aria-owns": "selectComponent.listboxId()", "attr.aria-invalid": "selectComponent.invalid()", "attr.aria-disabled": "selectComponent.disabled()", "attr.tabindex": "selectComponent.disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
+            {
+                provide: GA_SELECT_TRIGGER,
+                useExisting: forwardRef(() => GaSelectComboboxTriggerComponent),
+            },
+        ], viewQueries: [{ propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()\" />\n}\n@if (selectComponent.isOpen()) {\n  <input\n    #inputSearch\n    type=\"text\"\n    class=\"ga-select__input\"\n    aria-autocomplete=\"list\"\n    [value]=\"textValue()\"\n    (input)=\"textValue.set(inputSearch.value)\"\n    (click)=\"$event.stopPropagation()\"\n    [attr.aria-expanded]=\"selectComponent.isOpen()\"\n    [attr.aria-controls]=\"selectComponent.listboxId()\"\n    [attr.aria-activedescendant]=\"selectComponent.activeDescendantId()\"\n    [placeholder]=\"selectComponent.placeholder()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    tabindex=\"-1\"\n  />\n} @else if (selectComponent.hasValue()) {\n  <div class=\"ga-select__value\">\n    <span #ngContent (cdkObserveContent)=\"checkIfHasCustomLabel()\">\n      <ng-content />\n    </span>\n    @if (!hasCustomLabel()) {\n      <ga-select-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ selectComponent.placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n", dependencies: [{ kind: "ngmodule", type: GaInputModule }, { kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaSelectValueComponent, selector: "ga-select-value" }, { kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComboboxTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-select-searchable-trigger', imports: [
+                        GaInputModule,
+                        GaIconModule,
+                        GaSelectValueComponent,
+                        ObserversModule,
+                    ], providers: [
+                        {
+                            provide: GA_SELECT_TRIGGER,
+                            useExisting: forwardRef(() => GaSelectComboboxTriggerComponent),
+                        },
+                    ], host: {
+                        role: 'combobox',
+                        class: 'ga-select',
+                        '[class.ga-select--expanded]': 'selectComponent.isOpen()',
+                        '[class.ga-select--disabled]': 'selectComponent.disabled()',
+                        '[class.ga-select--invalid]': 'selectComponent.invalid()',
+                        '[class.ga-select--empty]': '!selectComponent.hasValue()',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-expanded]': 'selectComponent.isOpen()',
+                        '[attr.aria-owns]': 'selectComponent.listboxId()',
+                        '[attr.aria-invalid]': 'selectComponent.invalid()',
+                        '[attr.aria-disabled]': 'selectComponent.disabled()',
+                        '[attr.tabindex]': 'selectComponent.disabled() ? -1 : 0',
+                        '(click)': 'toggle()',
+                        '(keydown.arrowdown)': 'open(); $event.preventDefault()',
+                        '(keydown.space)': 'open(); $event.preventDefault()',
+                        '(keydown.enter)': 'open(); $event.preventDefault()',
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()\" />\n}\n@if (selectComponent.isOpen()) {\n  <input\n    #inputSearch\n    type=\"text\"\n    class=\"ga-select__input\"\n    aria-autocomplete=\"list\"\n    [value]=\"textValue()\"\n    (input)=\"textValue.set(inputSearch.value)\"\n    (click)=\"$event.stopPropagation()\"\n    [attr.aria-expanded]=\"selectComponent.isOpen()\"\n    [attr.aria-controls]=\"selectComponent.listboxId()\"\n    [attr.aria-activedescendant]=\"selectComponent.activeDescendantId()\"\n    [placeholder]=\"selectComponent.placeholder()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    tabindex=\"-1\"\n  />\n} @else if (selectComponent.hasValue()) {\n  <div class=\"ga-select__value\">\n    <span #ngContent (cdkObserveContent)=\"checkIfHasCustomLabel()\">\n      <ng-content />\n    </span>\n    @if (!hasCustomLabel()) {\n      <ga-select-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ selectComponent.placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n" }]
+        }], ctorParameters: () => [] });
+
+const GA_SELECT_REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => GaSelectRequiredValidator),
+    multi: true,
+};
+class GaSelectRequiredValidator extends RequiredValidator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectRequiredValidator, isStandalone: true, selector: "ga-select[required][formControlName], ga-select[required][formControl], ga-select[required][ngModel]", providers: [GA_SELECT_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectRequiredValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `ga-select[required][formControlName], ga-select[required][formControl], ga-select[required][ngModel]`,
+                    providers: [GA_SELECT_REQUIRED_VALIDATOR],
+                }]
+        }] });
+
+class GaSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, imports: [GaSelectComponent,
+            GaOptionComponent,
+            GaOptgroupComponent,
+            GaSelectContentComponent,
+            GaSelectCustomTriggerComponent,
+            GaSelectTriggerComponent,
+            GaSelectComboboxTriggerComponent,
+            GaSelectContentLoadingComponent,
+            GaSelectRequiredValidator], exports: [GaSelectComponent,
+            GaOptionComponent,
+            GaOptgroupComponent,
+            GaSelectContentComponent,
+            GaSelectCustomTriggerComponent,
+            GaSelectComboboxTriggerComponent,
+            GaSelectTriggerComponent,
+            GaSelectContentLoadingComponent,
+            GaSelectRequiredValidator] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, imports: [GaSelectComponent,
+            GaOptionComponent,
+            GaSelectTriggerComponent,
+            GaSelectComboboxTriggerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        GaSelectComponent,
+                        GaOptionComponent,
+                        GaOptgroupComponent,
+                        GaSelectContentComponent,
+                        GaSelectCustomTriggerComponent,
+                        GaSelectTriggerComponent,
+                        GaSelectComboboxTriggerComponent,
+                        GaSelectContentLoadingComponent,
+                        GaSelectRequiredValidator,
+                    ],
+                    exports: [
+                        GaSelectComponent,
+                        GaOptionComponent,
+                        GaOptgroupComponent,
+                        GaSelectContentComponent,
+                        GaSelectCustomTriggerComponent,
+                        GaSelectComboboxTriggerComponent,
+                        GaSelectTriggerComponent,
+                        GaSelectContentLoadingComponent,
+                        GaSelectRequiredValidator,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of ngx-gaia
  */
@@ -1498,5 +2110,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, GA_ALERT_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlModule, GaSpinnerComponent, GaSpinnerModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, GA_ALERT_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlModule, GaSelectComboboxTriggerComponent, GaSelectComponent, GaSelectContentComponent, GaSelectContentLoadingComponent, GaSelectCustomTriggerComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectTriggerComponent, GaSpinnerComponent, GaSpinnerModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map