@vsn-ux/ngx-gaia 0.2.2 → 0.2.4

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

@@ -1,21 +1,19 @@
 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, viewChild, contentChildren, isDevMode, afterNextRender } 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 * 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, outputToObservable } from '@angular/core/rxjs-interop';
-import { merge, map, Subject, takeUntil, firstValueFrom } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { merge, map, Subject, takeUntil } from 'rxjs';
 import * as i1$3 from '@angular/cdk/overlay';
-import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, CdkOverlayOrigin, 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);
@@ -322,11 +320,11 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 };
 // Increasing integer for generating unique ids for checkbox components.
 // Inspired by @angular/components
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 class GaCheckboxComponent {
     tabindex;
     /** @ignore */
-    _uniqueId = `ga-checkbox-${++nextUniqueId$4}`;
+    _uniqueId = `ga-checkbox-${++nextUniqueId$5}`;
     /** @ignore */
     injector = inject(Injector);
     icons = { Minus, Check };
@@ -572,8 +570,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 const GA_FORM_CONTROL = new InjectionToken('ga-form-control');
 class GaFormControlDirective {
+    _formControlId = input(undefined, {
+        alias: 'gaFormControl',
+    });
     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: "14.0.0", version: "19.1.5", type: GaFormControlDirective, isStandalone: true, selector: "[gaFormControl]", 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 } }, providers: [
             { provide: GA_FORM_CONTROL, useExisting: GaFormControlDirective },
         ], ngImport: i0 });
 }
@@ -587,9 +588,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-let nextUniqueId$3 = 0;
+let nextUniqueId$4 = 0;
 class GaInputDirective {
-    uniqueId = `ga-input-${++nextUniqueId$3}`;
+    uniqueId = `ga-input-${++nextUniqueId$4}`;
     implicitNgControl = inject(NgControl, {
         optional: true,
         self: true,
@@ -609,6 +610,7 @@ class GaInputDirective {
         return this.idInput() ?? this.uniqueId;
     });
     errors = this.implicitErrors.asReadonly();
+    _formControlId = this.id;
     ngDoCheck() {
         if (this.hasWrapper)
             return;
@@ -650,12 +652,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-let nextUniqueId$2 = 0;
+let nextUniqueId$3 = 0;
 class GaFormFieldComponent {
-    uniqueId = `ga-form-field-${++nextUniqueId$2}`;
-    formControl = contentChild(GA_FORM_CONTROL);
+    uniqueId = `ga-form-field-${++nextUniqueId$3}`;
+    formControl = contentChild(GA_FORM_CONTROL, { descendants: true });
     controlId = computed(() => {
-        return this.formControl()?.id() ?? this.uniqueId;
+        return this.formControl()?._formControlId() ?? this.uniqueId;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.5", type: GaFormFieldComponent, isStandalone: true, selector: "ga-form-field", host: { classAttribute: "ga-form-field" }, queries: [{ propertyName: "formControl", first: true, predicate: GA_FORM_CONTROL, descendants: true, isSignal: true }], exportAs: ["gaFormField"], ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -668,13 +670,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }] });
 
 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"
+    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 });
 }
@@ -682,7 +703,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             type: Component,
             args: [{
                     selector: 'ga-label',
-                    template: `<label [attr.for]="controlId()" class="ga-form-field__label"
+                    template: `<label
+    [attr.for]="controlId()"
+    class="ga-form-field__label"
+    (click)="focusControl()"
     ><ng-content
   /></label>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1260,10 +1284,10 @@ const RADIO_CONTROL_VALUE_ACCESSOR = {
     multi: true,
 };
 // Increasing integer for generating unique ids for radio components.
-let nextUniqueId$1 = 0;
+let nextUniqueId$2 = 0;
 class GaRadioGroupComponent {
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
-    name = input(`ga-radio-group-${nextUniqueId$1++}`);
+    name = input(`ga-radio-group-${nextUniqueId$2++}`);
     /**
      * Value for the radio-group. Should equal the value of the selected radio button if there is
      * a corresponding radio button with a matching value. If there is not such a corresponding
@@ -1322,13 +1346,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }] });
 
 // Increasing integer for generating unique ids for radio button components.
-let nextUniqueId = 0;
+let nextUniqueId$1 = 0;
 class GaRadioButtonComponent {
     tabindex;
     radioGroup = inject(GaRadioGroupComponent, {
         optional: true,
     });
-    _uniqueId = `ga-radio-button-${++nextUniqueId}`;
+    _uniqueId = `ga-radio-button-${++nextUniqueId$1}`;
     /** The value attribute of the native input element */
     value = input(null);
     inputId = input(null, { alias: 'id' });
@@ -1424,11 +1448,13 @@ class GaOptionComponent {
         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());
+    constructor() {
+        afterRender(() => {
+            // 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) {
@@ -1456,111 +1482,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         '[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" }]
-        }] });
+        }], ctorParameters: () => [] });
 
 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectValueComponent, isStandalone: true, selector: "ga-select-value", ngImport: i0, template: `<ng-content />`, 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() }}`,
+                    template: `<ng-content />`,
                 }]
         }] });
 
-const GA_SELECT_TRIGGER = new InjectionToken('gaSelectTrigger');
-
-class GaSelectTriggerComponent {
+class GaSelectDefaultValueComponent {
     selectComponent = inject(GaSelectComponent);
-    content = viewChild('ngContent', { read: ElementRef });
-    hasCustomLabel = signal(false);
-    menuStatusIcon = computed(() => {
-        return this.selectComponent.isOpen() ? ChevronUp : ChevronDown;
+    optionViewValue = computed(() => {
+        const options = this.selectComponent.selectedOptions();
+        if (!options.length) {
+            return null;
+        }
+        return options
+            .map((option) => option.cdkOption.element.textContent?.trim() ?? '')
+            .join(', ');
     });
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDefaultValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectDefaultValueComponent, isStandalone: true, selector: "ga-select-default-value", ngImport: i0, template: `{{ optionViewValue() }}`, isInline: true });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDefaultValueComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ga-select-custom-trigger',
-                    template: `<ng-content></ng-content>`,
-                    providers: [
-                        {
-                            provide: GA_SELECT_TRIGGER,
-                            useExisting: forwardRef(() => GaSelectCustomTriggerComponent),
-                        },
-                    ],
+                    selector: 'ga-select-default-value',
+                    template: `{{ optionViewValue() }}`,
                 }]
         }] });
 
+let nextUniqueId = 0;
 class GaSelectComponent {
+    _uniqueId = `ga-select-${++nextUniqueId}`;
     focusedTriggerElement = null;
     _onTouched;
     _onModelChanged;
@@ -1579,8 +1539,23 @@ class GaSelectComponent {
             overlayY: 'bottom',
             offsetY: -8,
         },
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
     ];
     injector = inject(Injector);
+    overlayOrigin = inject(CdkOverlayOrigin);
     implicitInvalid = signal(false);
     _isOpen = signal(false);
     value = model(null);
@@ -1595,19 +1570,25 @@ class GaSelectComponent {
     });
     multiple = input(false, { transform: booleanAttribute });
     compareWith = input();
-    withoutAutoFocus = signal(false);
-    opened = output();
-    closed = output();
+    searchable = input(false, { transform: booleanAttribute });
+    textValue = model('');
+    leftIcon = input();
+    idInput = input(null, { alias: 'id' });
     // 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);
+    customSelectValue = contentChild(GaSelectValueComponent);
+    inputSearch = viewChild('inputSearch');
+    content = viewChild('ngContent', { read: ElementRef });
+    id = computed(() => {
+        return this.idInput() ?? this._uniqueId;
+    });
     isOpen = this._isOpen.asReadonly();
     disabled = linkedSignal(() => this.disabledInput());
-    icon = computed(() => {
+    menuStatusIcon = computed(() => {
         return this._isOpen() ? ChevronUp : ChevronDown;
     });
     selectedOptions = computed(() => {
@@ -1627,7 +1608,7 @@ class GaSelectComponent {
     invalid = computed(() => {
         return this.invalidInput() ?? this.implicitInvalid();
     });
-    listboxId = computed(() => this.cdkListbox().id);
+    _formControlId = computed(() => this.id());
     constructor() {
         effect(() => {
             // if the select became disabled while open, close it
@@ -1639,7 +1620,7 @@ class GaSelectComponent {
     ngAfterContentInit() {
         effect(() => {
             this.cdkListbox().multiple = this.multiple();
-            this.cdkListbox().useActiveDescendant = this.withoutAutoFocus();
+            this.cdkListbox().useActiveDescendant = this.searchable();
             this.cdkListbox().compareWith = this.compareWith();
             this.cdkListbox().value = this.multiple()
                 ? this.value()
@@ -1655,12 +1636,6 @@ class GaSelectComponent {
             // 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);
@@ -1691,17 +1666,15 @@ class GaSelectComponent {
     }
     open() {
         if (this.disabled() || this._isOpen()) {
-            return Promise.resolve();
+            return;
         }
         this._isOpen.set(true);
-        return firstValueFrom(outputToObservable(this.opened));
     }
     close() {
         if (!this._isOpen()) {
-            return Promise.resolve();
+            return;
         }
         this._isOpen.set(false);
-        return firstValueFrom(outputToObservable(this.closed));
     }
     autoClose() {
         // close that was initiated by clicking the option
@@ -1734,19 +1707,44 @@ class GaSelectComponent {
             this.value.set(value);
         }
     }
+    onInputKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+                this.setNextItemActive();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'ArrowUp':
+                this.setPreviousItemActive();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'Space':
+                event.stopPropagation();
+                break;
+            case 'Enter':
+                this.setActiveItemAsSelected();
+                this.autoClose();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+        }
+    }
     onOverlayAttach() {
         this._isOpen.set(true);
         this.focusedTriggerElement = document.activeElement;
-        this.opened.emit();
-        if (!this.withoutAutoFocus()) {
+        if (this.searchable()) {
+            this.inputSearch().nativeElement.focus();
+        }
+        else {
             this.focusListbox();
         }
     }
     onOverlayDetach() {
         this._isOpen.set(false);
         this.focusedTriggerElement?.focus();
+        this.textValue.set('');
         this._onTouched?.();
-        this.closed.emit();
     }
     setItemActive(direction) {
         const options = this.gaOptions();
@@ -1768,13 +1766,17 @@ class GaSelectComponent {
         }
     }
     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: [
+    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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", 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: { "attr.id": "id()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "invalid()", "class.ga-select--empty": "!hasValue()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "cdkListbox().id", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "!searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, 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 });
+            {
+                provide: GA_FORM_CONTROL,
+                useExisting: forwardRef(() => GaSelectComponent),
+            },
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$3.CdkOverlayOrigin }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()\" />\n}\n@if (searchable() && 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]=\"isOpen()\"\n    [attr.aria-controls]=\"cdkListbox().id\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [placeholder]=\"placeholder()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    tabindex=\"-1\"\n  />\n} @else if (hasValue()) {\n  <div class=\"ga-select__value\">\n    @if (customSelectValue()) {\n      <ng-content select=\"ga-select-value\" />\n    } @else {\n      <ga-select-default-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$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: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -1782,14 +1784,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         GaIconModule,
                         GaButtonModule,
                         OverlayModule,
-                        GaSelectTriggerComponent,
-                    ], providers: [
+                        GaSelectDefaultValueComponent,
+                    ], hostDirectives: [CdkOverlayOrigin], 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"] }]
+                        {
+                            provide: GA_FORM_CONTROL,
+                            useExisting: forwardRef(() => GaSelectComponent),
+                        },
+                    ], host: {
+                        role: 'combobox',
+                        '[attr.id]': 'id()',
+                        class: 'ga-select',
+                        '[class.ga-select--expanded]': 'isOpen()',
+                        '[class.ga-select--disabled]': 'disabled()',
+                        '[class.ga-select--invalid]': 'invalid()',
+                        '[class.ga-select--empty]': '!hasValue()',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'cdkListbox().id',
+                        '[attr.aria-invalid]': 'invalid()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.aria-owns]': 'searchable() ? cdkListbox().id : null',
+                        '[attr.aria-activedescendant]': '!searchable() ? activeDescendantId() : null',
+                        '[attr.tabindex]': '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 (searchable() && 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]=\"isOpen()\"\n    [attr.aria-controls]=\"cdkListbox().id\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [placeholder]=\"placeholder()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    tabindex=\"-1\"\n  />\n} @else if (hasValue()) {\n  <div class=\"ga-select__value\">\n    @if (customSelectValue()) {\n      <ng-content select=\"ga-select-value\" />\n    } @else {\n      <ga-select-default-value />\n    }\n  </div>\n} @else {\n  <div class=\"ga-select__placeholder\">\n    {{ placeholder() }}\n  </div>\n}\n<ga-icon [icon]=\"menuStatusIcon()\" />\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -1902,14 +1928,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-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"] }] });
+class GaSelectDropdownLoadingComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectDropdownLoadingComponent, isStandalone: true, selector: "ga-select-dropdown-loader", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownLoadingComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ga-select-content-loading',
+                    selector: 'ga-select-dropdown-loader',
                     template: `<ga-spinner size="16" />`,
                     imports: [GaSpinnerModule],
                     host: {
@@ -1918,121 +1944,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class GaSelectContentComponent {
+class GaSelectDropdownComponent {
     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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", 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-dropdown-loader />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownLoadingComponent, selector: "ga-select-dropdown-loader" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-select-content', imports: [GaSelectContentLoadingComponent], hostDirectives: [CdkListbox], host: {
+            args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownLoadingComponent], hostDirectives: [CdkListbox], host: {
                         class: 'ga-dropdown ga-dropdown__content',
-                    }, template: "@if (loading()) {\n  <ga-select-content-loading />\n} @else {\n  <ng-content />\n}\n" }]
+                    }, template: "@if (loading()) {\n  <ga-select-dropdown-loader />\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),
@@ -2055,24 +1978,18 @@ class GaSelectModule {
     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,
+            GaSelectDropdownComponent,
+            GaSelectDropdownLoadingComponent,
+            GaSelectValueComponent,
             GaSelectRequiredValidator], exports: [GaSelectComponent,
             GaOptionComponent,
             GaOptgroupComponent,
-            GaSelectContentComponent,
-            GaSelectCustomTriggerComponent,
-            GaSelectComboboxTriggerComponent,
-            GaSelectTriggerComponent,
-            GaSelectContentLoadingComponent,
+            GaSelectDropdownComponent,
+            GaSelectDropdownLoadingComponent,
+            GaSelectValueComponent,
             GaSelectRequiredValidator] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, imports: [GaSelectComponent,
-            GaOptionComponent,
-            GaSelectTriggerComponent,
-            GaSelectComboboxTriggerComponent] });
+            GaOptionComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, decorators: [{
             type: NgModule,
@@ -2081,22 +1998,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         GaSelectComponent,
                         GaOptionComponent,
                         GaOptgroupComponent,
-                        GaSelectContentComponent,
-                        GaSelectCustomTriggerComponent,
-                        GaSelectTriggerComponent,
-                        GaSelectComboboxTriggerComponent,
-                        GaSelectContentLoadingComponent,
+                        GaSelectDropdownComponent,
+                        GaSelectDropdownLoadingComponent,
+                        GaSelectValueComponent,
                         GaSelectRequiredValidator,
                     ],
                     exports: [
                         GaSelectComponent,
                         GaOptionComponent,
                         GaOptgroupComponent,
-                        GaSelectContentComponent,
-                        GaSelectCustomTriggerComponent,
-                        GaSelectComboboxTriggerComponent,
-                        GaSelectTriggerComponent,
-                        GaSelectContentLoadingComponent,
+                        GaSelectDropdownComponent,
+                        GaSelectDropdownLoadingComponent,
+                        GaSelectValueComponent,
                         GaSelectRequiredValidator,
                     ],
                 }]
@@ -2110,5 +2023,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_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 };
+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, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownLoadingComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map