@vsn-ux/ngx-gaia 0.9.13 → 0.9.15

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, forwardRef, LOCALE_ID, model, Renderer2, Attribute, untracked, HostListener, viewChild, TemplateRef, contentChildren, NgZone, HostBinding, Input, DOCUMENT, afterNextRender, afterEveryRender } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, forwardRef, LOCALE_ID, model, Renderer2, Attribute, untracked, HostListener, viewChild, TemplateRef, contentChildren, NgZone, HostBinding, Input, DOCUMENT, afterNextRender, afterEveryRender, viewChildren, isDevMode } from '@angular/core';
 import * as i1 from 'lucide-angular';
 import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronDown, ChevronUp, ChevronRight, ChevronLeft, CalendarDays, CircleX } from 'lucide-angular';
 import { NgForm, ControlContainer, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
@@ -368,7 +368,7 @@ function provideGaAlertI18n(value) {
     ]);
 }
 
-let nextUniqueId$9 = 0;
+let nextUniqueId$a = 0;
 class GaAlertComponent {
     i18n = inject(GaAlertI18n);
     dismissIcon = X;
@@ -396,7 +396,7 @@ class GaAlertComponent {
         return null;
     });
     title = contentChild(GaAlertTitleComponent);
-    progressId = `ga-alert-progress-${++nextUniqueId$9}`;
+    progressId = `ga-alert-progress-${++nextUniqueId$a}`;
     variantClass = computed(() => {
         return `ga-notification ga-notification--${this.variant()}`;
     });
@@ -657,10 +657,10 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 };
 // Increasing integer for generating unique ids for checkbox components.
 // Inspired by @angular/components
-let nextUniqueId$8 = 0;
+let nextUniqueId$9 = 0;
 class GaCheckboxComponent {
     /** @ignore */
-    _uniqueId = `ga-checkbox-${++nextUniqueId$8}`;
+    _uniqueId = `ga-checkbox-${++nextUniqueId$9}`;
     /** @ignore */
     implicitNgControlState = injectNgControlState();
     /** @ignore */
@@ -1262,9 +1262,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
             type: Injectable
         }] });
 
-let nextUniqueId$7 = 0;
+let nextUniqueId$8 = 0;
 class GaInputDirective {
-    uniqueId = `ga-input-${++nextUniqueId$7}`;
+    uniqueId = `ga-input-${++nextUniqueId$8}`;
     formFieldConnector = inject(GaFormFieldConnector, {
         optional: true,
     });
@@ -1734,8 +1734,9 @@ class GaDatepickerInputDirective {
             this.formatValue();
         }
         if (emitToNgModel) {
-            this.onNgTouchedFn?.();
             this.onNgChangeFn?.(value);
+            // NOTE: ngTouched must be called after ngChange to work with `updateOn: 'blur'` strategy
+            this.onNgTouchedFn?.();
             this.dateInput.emit(value);
             this.dateChange.emit(value);
         }
@@ -2185,7 +2186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 const GA_FORM_FIELD_ID = new InjectionToken('ga-form-field-id');
 
-let nextUniqueId$6 = 0;
+let nextUniqueId$7 = 0;
 class GaFormFieldComponent {
     uniqueId = inject(GA_FORM_FIELD_ID);
     formFieldConnector = inject(GaFormFieldConnector);
@@ -2203,7 +2204,7 @@ class GaFormFieldComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaFormFieldComponent, isStandalone: true, selector: "ga-form-field", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-form-field" }, providers: [
             {
                 provide: GA_FORM_FIELD_ID,
-                useFactory: () => `ga-form-field-${++nextUniqueId$6}`,
+                useFactory: () => `ga-form-field-${++nextUniqueId$7}`,
             },
             GaFormFieldConnector,
         ], queries: [{ propertyName: "fieldInfo", first: true, predicate: GaFieldInfoComponent, descendants: true, isSignal: true }, { propertyName: "fieldErrors", predicate: GaFieldErrorDirective, isSignal: true }], exportAs: ["gaFormField"], ngImport: i0, template: "<ng-content select=\"ga-label\" />\n<ng-content />\n<ga-field-callout />\n", dependencies: [{ kind: "component", type: GaFieldCalloutComponent, selector: "ga-field-callout" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -2215,13 +2216,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, providers: [
                         {
                             provide: GA_FORM_FIELD_ID,
-                            useFactory: () => `ga-form-field-${++nextUniqueId$6}`,
+                            useFactory: () => `ga-form-field-${++nextUniqueId$7}`,
                         },
                         GaFormFieldConnector,
                     ], template: "<ng-content select=\"ga-label\" />\n<ng-content />\n<ga-field-callout />\n" }]
         }] });
 
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 /**
  * Internal tooltip component used by the gaTooltip directive.
  * This component is not intended for direct use in templates.
@@ -2229,7 +2230,7 @@ let nextUniqueId$5 = 0;
  * @internal
  */
 class GaTooltipComponent {
-    uniqueId = `ga-tooltip-${++nextUniqueId$5}`;
+    uniqueId = `ga-tooltip-${++nextUniqueId$6}`;
     mouseLeaveSubject = new Subject();
     afterMouseLeave = () => this.mouseLeaveSubject.asObservable();
     mouseOver = signal(false);
@@ -3529,10 +3530,10 @@ const RADIO_CONTROL_VALUE_ACCESSOR = {
     multi: true,
 };
 // Increasing integer for generating unique ids for radio components.
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 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$4++}`);
+    name = input(`ga-radio-group-${nextUniqueId$5++}`);
     /**
      * 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
@@ -3591,7 +3592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 // Increasing integer for generating unique ids for radio button components.
-let nextUniqueId$3 = 0;
+let nextUniqueId$4 = 0;
 class GaRadioButtonComponent {
     radioGroup = inject(GaRadioGroupComponent, {
         optional: true,
@@ -3600,7 +3601,7 @@ class GaRadioButtonComponent {
         optional: true,
     });
     implicitNgControlState = injectNgControlState();
-    _uniqueId = `ga-radio-button-${++nextUniqueId$3}`;
+    _uniqueId = `ga-radio-button-${++nextUniqueId$4}`;
     /** The value attribute of the native input element */
     value = input(null);
     inputId = input(null, { alias: 'id' });
@@ -3805,7 +3806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class GaSelectI18nDefault extends GaSelectI18n {
     /** A label for the clear button */
     clearLabel = 'Clear';
-    /** A default label for the search input, unless placeholder is set */
+    /** A default label for the search input */
     defaultSearchInputLabel = 'Search';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18nDefault });
@@ -3866,9 +3867,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
         }] });
 
-let nextUniqueId$2 = 0;
+let nextUniqueId$3 = 0;
 class GaSelectComponent {
-    _uniqueId = `ga-select-${++nextUniqueId$2}`;
+    _uniqueId = `ga-select-${++nextUniqueId$3}`;
     icons = { CircleX };
     _onTouched;
     _onModelChanged;
@@ -3915,6 +3916,7 @@ class GaSelectComponent {
     shouldRecoverFocus = false;
     value = model(null);
     placeholder = input('');
+    searchInputLabel = input(null);
     disabledInput = input(false, {
         alias: 'disabled',
         transform: booleanAttribute,
@@ -4240,13 +4242,13 @@ class GaSelectComponent {
         }, { injector: this.injector });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearableLabel: { classPropertyName: "clearableLabel", publicName: "clearableLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", 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", opened: "opened", closed: "closed" }, 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()", "keydown.backspace": "clearValue(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "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": "isOpen() ? cdkListbox().id : null", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "isOpen() && !searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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 }, searchInputLabel: { classPropertyName: "searchInputLabel", publicName: "searchInputLabel", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearableLabel: { classPropertyName: "clearableLabel", publicName: "clearableLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", 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", opened: "opened", closed: "closed" }, 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()", "keydown.backspace": "clearValue(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "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": "isOpen() ? cdkListbox().id : null", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "isOpen() && !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: "gaDropdown", first: true, predicate: GaSelectDropdownComponent, 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"placeholder() || i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\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$1.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" }] });
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaSelectDropdownComponent, 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"searchInputLabel() ?? i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\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$1.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: "20.0.4", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -4289,7 +4291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
                         '(keydown.backspace)': 'clearValue(); $event.preventDefault()',
-                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"placeholder() || i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"searchInputLabel() ?? i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -4384,6 +4386,933 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class GaDataOptionComponent {
+    _isSelected = signal(false);
+    _isActive = signal(false);
+    selectComponent = inject(GaDataSelectComponent);
+    cdkOption = inject(CdkOption, { self: true });
+    value = input(null);
+    disabled = input(false, { transform: booleanAttribute });
+    withInput = input(this.selectComponent.multiple(), {
+        transform: booleanAttribute,
+    });
+    selected = computed(() => {
+        if (!this._isSelected()) {
+            return false;
+        }
+        if (this.cdkOption.value !== undefined &&
+            this.cdkOption.value !== null &&
+            this.cdkOption.value !== '') {
+            return true;
+        }
+        return this.selectComponent.canSelectNullable();
+    });
+    active = this._isActive.asReadonly();
+    constructor() {
+        // NOTE: this is a workaround to set the default empty value (null) for cdkOption
+        if (this.value() !== this.cdkOption.value &&
+            this.cdkOption.value === undefined) {
+            this.cdkOption.value = this.value();
+        }
+        afterEveryRender({
+            read: () => {
+                // 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());
+            },
+        });
+    }
+    autoClose(event) {
+        if (this.cdkOption.isSelected()) {
+            // if already selected, auto close
+            this.selectComponent.autoClose();
+            event?.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataOptionComponent, isStandalone: true, selector: "ga-data-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "autoClose($event);", "keydown.space": "autoClose($event);", "click": "autoClose();" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-data-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',
+                        '(keydown.enter)': 'autoClose($event);',
+                        '(keydown.space)': 'autoClose($event);',
+                        '(click)': 'autoClose();',
+                    }, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n" }]
+        }], ctorParameters: () => [] });
+
+class GaDataSelectValueComponent {
+    selectComponent = inject(GaDataSelectComponent);
+    icons = { X };
+    customValueTemplate = input();
+    customValueTemplateContext = (item) => {
+        if (!item) {
+            return { $implicit: '', value: null, item: null };
+        }
+        return {
+            $implicit: this.selectComponent.getItemLabel(item),
+            value: this.selectComponent.getItemValue(item),
+            item,
+        };
+    };
+    singleViewValue = computed(() => {
+        if (!this.selectComponent.hasValue()) {
+            return '';
+        }
+        const selectValue = this.selectComponent.value();
+        if (!this.selectComponent.bindValue()) {
+            return this.selectComponent.getItemLabel(selectValue);
+        }
+        const item = this.selectComponent
+            .items()
+            .find((item) => this.selectComponent.compareFn()(this.selectComponent.getItemValue(item), selectValue));
+        return this.selectComponent.getItemLabel(item);
+    });
+    selectedItems = computed(() => {
+        const value = this.selectComponent.value();
+        if (!this.selectComponent.hasValue() || !Array.isArray(value)) {
+            return [];
+        }
+        if (!this.selectComponent.bindValue()) {
+            return value;
+        }
+        return this.selectComponent
+            .items()
+            .filter((item) => value.some((v) => this.selectComponent.compareFn()(this.selectComponent.getItemValue(item), v)));
+    });
+    deselectOption(value) {
+        this.selectComponent.deselectValue(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataSelectValueComponent, isStandalone: true, selector: "ga-data-select-value", inputs: { customValueTemplate: { classPropertyName: "customValueTemplate", publicName: "customValueTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-select__value" }, ngImport: i0, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of selectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </span>\n      @if (!selectComponent.disabled()) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-data-select-value', imports: [GaIconModule, NgTemplateOutlet], host: {
+                        class: 'ga-select__value',
+                    }, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of selectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </span>\n      @if (!selectComponent.disabled()) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n" }]
+        }] });
+
+function GA_DATA_SELECT_I18N_FACTORY() {
+    return new GaDataSelectI18nDefault();
+}
+class GaDataSelectI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, providedIn: 'root', useFactory: GA_DATA_SELECT_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_DATA_SELECT_I18N_FACTORY,
+                }]
+        }] });
+class GaDataSelectI18nDefault extends GaDataSelectI18n {
+    /** A label for the clear button */
+    clearLabel = 'Clear';
+    /** A label for the search input */
+    searchInputLabel = 'Search';
+    /** A label shown when there are no options to display */
+    noOptionsLabel = 'No options';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaDataSelectI18n(value) {
+    return makeEnvironmentProviders([
+        typeof value === 'function'
+            ? { provide: GaDataSelectI18n, useFactory: value }
+            : { provide: GaDataSelectI18n, useValue: value },
+    ]);
+}
+
+class GaDataSelectDropdownSpinnerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaDataSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-data-select-dropdown-spinner", host: { classAttribute: "ga-dropdown__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: "20.0.4", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-data-select-dropdown-spinner',
+                    template: `<ga-spinner size="16" />`,
+                    imports: [GaSpinnerModule],
+                    host: {
+                        class: 'ga-dropdown__spinner',
+                    },
+                }]
+        }] });
+
+class GaDataSelectDropdownComponent {
+    elementRef = inject(ElementRef);
+    cdkListbox = inject(CdkListbox, { self: true });
+    loading = input(false, { transform: booleanAttribute });
+    resetScroll() {
+        this.elementRef.nativeElement.scrollTo(0, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataSelectDropdownComponent, isStandalone: true, selector: "ga-data-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox, inputs: ["cdkListboxMultiple", "multiple", "cdkListboxUseActiveDescendant", "useActiveDescendant", "cdkListboxNavigationWrapDisabled", "navigationWrapDisabled", "cdkListboxCompareWith", "compareWith"] }], ngImport: i0, template: "<ng-content />\n\n@if (loading()) {\n  <ga-data-select-dropdown-spinner />\n}\n", dependencies: [{ kind: "component", type: GaDataSelectDropdownSpinnerComponent, selector: "ga-data-select-dropdown-spinner" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-data-select-dropdown', imports: [GaDataSelectDropdownSpinnerComponent], hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            inputs: [
+                                'cdkListboxMultiple: multiple',
+                                'cdkListboxUseActiveDescendant: useActiveDescendant',
+                                'cdkListboxNavigationWrapDisabled: navigationWrapDisabled',
+                                'cdkListboxCompareWith: compareWith',
+                            ],
+                        },
+                    ], host: {
+                        class: 'ga-dropdown ga-dropdown__content',
+                    }, template: "<ng-content />\n\n@if (loading()) {\n  <ga-data-select-dropdown-spinner />\n}\n" }]
+        }] });
+
+class GaDataOptgroupComponent {
+    label = input();
+    customLabelTemplate = input();
+    customLabelContext = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataOptgroupComponent, isStandalone: true, selector: "ga-data-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, customLabelTemplate: { classPropertyName: "customLabelTemplate", publicName: "customLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, customLabelContext: { classPropertyName: "customLabelContext", publicName: "customLabelContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" } }, ngImport: i0, template: `
+    @if (customLabelTemplate(); as templateRef) {
+      <div class="ga-dropdown__caption">
+        <ng-container
+          [ngTemplateOutlet]="templateRef"
+          [ngTemplateOutletContext]="customLabelContext()"
+        />
+      </div>
+    } @else if (label()) {
+      <div class="ga-dropdown__caption">{{ label() }}</div>
+    }
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataOptgroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-data-optgroup',
+                    imports: [NgTemplateOutlet],
+                    template: `
+    @if (customLabelTemplate(); as templateRef) {
+      <div class="ga-dropdown__caption">
+        <ng-container
+          [ngTemplateOutlet]="templateRef"
+          [ngTemplateOutletContext]="customLabelContext()"
+        />
+      </div>
+    } @else if (label()) {
+      <div class="ga-dropdown__caption">{{ label() }}</div>
+    }
+    <ng-content />
+  `,
+                    host: {
+                        role: 'group',
+                    },
+                }]
+        }] });
+
+class GaDataSelectValueDirective {
+    templateRef = inject(TemplateRef, { self: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaDataSelectValueDirective, isStandalone: true, selector: "[gaDataSelectValueTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaDataSelectValueTpl]',
+                }]
+        }] });
+
+class GaDataSelectOptionLabelDirective {
+    templateRef = inject(TemplateRef, { self: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectOptionLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaDataSelectOptionLabelDirective, isStandalone: true, selector: "[gaDataSelectOptionTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectOptionLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaDataSelectOptionTpl]',
+                }]
+        }] });
+
+class GaDataSelectOptgroupLabelDirective {
+    templateRef = inject(TemplateRef, { self: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectOptgroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaDataSelectOptgroupLabelDirective, isStandalone: true, selector: "[gaDataSelectOptgroupLabelTpl]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectOptgroupLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaDataSelectOptgroupLabelTpl]',
+                }]
+        }] });
+
+class GaIntersectionTriggerComponent {
+    observer;
+    anchor = inject(ElementRef);
+    rootElement = input();
+    rootMargin = input('0px');
+    parentAsRoot = input(false, { transform: booleanAttribute });
+    trigger = output();
+    root = computed(() => {
+        return this.parentAsRoot()
+            ? this.anchor.nativeElement.parentElement
+            : this.rootElement()?.nativeElement;
+    });
+    constructor() {
+        afterNextRender(() => {
+            this.observer = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting) {
+                    this.trigger.emit();
+                }
+            }, {
+                root: this.root(),
+                rootMargin: this.rootMargin(),
+                threshold: 0,
+            });
+            this.observer.observe(this.anchor.nativeElement);
+        });
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaIntersectionTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaIntersectionTriggerComponent, isStandalone: true, selector: "ga-intersection-trigger", inputs: { rootElement: { classPropertyName: "rootElement", publicName: "rootElement", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null }, parentAsRoot: { classPropertyName: "parentAsRoot", publicName: "parentAsRoot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trigger: "trigger" }, ngImport: i0, template: ``, isInline: true, styles: [":host{height:0px;display:block;flex-shrink:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaIntersectionTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-intersection-trigger', template: ``, styles: [":host{height:0px;display:block;flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [] });
+
+let nextUniqueId$2 = 0;
+class GaDataSelectComponent {
+    _uniqueId = `ga-data-select-${++nextUniqueId$2}`;
+    icons = { CircleX };
+    _onTouched;
+    _onModelChanged;
+    positions = [
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            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);
+    elementRef = inject((ElementRef));
+    formFieldConnector = inject(GaFormFieldConnector, {
+        optional: true,
+    });
+    i18n = inject(GaDataSelectI18n);
+    overlayOrigin = inject(CdkOverlayOrigin);
+    repositionScrollStrategy = createRepositionScrollStrategy(this.injector);
+    implicitNgControlState = injectNgControlState();
+    _isOpen = signal(false);
+    shouldRecoverFocus = false;
+    searchValue = signal(null);
+    multiple = input(false, { transform: booleanAttribute });
+    value = model(null);
+    placeholder = input('');
+    disabledInput = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    invalidInput = input(null, {
+        alias: 'invalid',
+        transform: booleanAttribute,
+    });
+    compareFn = input((a, b) => a === b);
+    searchable = input(false, { transform: booleanAttribute });
+    customFilter = input(false, { transform: booleanAttribute });
+    clearable = input(false, { transform: booleanAttribute });
+    clearableLabel = input();
+    noOptionsLabel = input();
+    canSelectNullable = input(false, {
+        transform: booleanAttribute,
+    });
+    leftIcon = input();
+    idInput = input(null, { alias: 'id' });
+    items = input([]);
+    bindValue = input();
+    bindLabel = input();
+    groupBy = input();
+    loading = input(false, { transform: booleanAttribute });
+    withOptionInput = input(null, { transform: booleanAttribute });
+    searchValueChange = output();
+    opened = output();
+    closed = output();
+    optionsEndReached = output();
+    dropdownElRef = viewChild('selectDropdown', {
+        read: ElementRef,
+    });
+    gaOptions = viewChildren(GaDataOptionComponent);
+    cdkListbox = viewChild(CdkListbox);
+    gaDropdown = viewChild(GaDataSelectDropdownComponent);
+    customValueTemplate = contentChild(GaDataSelectValueDirective);
+    customOptionLabelTemplate = contentChild(GaDataSelectOptionLabelDirective);
+    customOptgroupLabelTemplate = contentChild(GaDataSelectOptgroupLabelDirective);
+    inputSearch = viewChild('inputSearch');
+    connectedOverlay = viewChild(CdkConnectedOverlay);
+    id = computed(() => {
+        return this.idInput() ?? this._uniqueId;
+    });
+    isOpen = this._isOpen.asReadonly();
+    disabled = linkedSignal(() => this.disabledInput());
+    menuStatusIcon = computed(() => {
+        return this._isOpen() ? ChevronUp : ChevronDown;
+    });
+    selectedItem = computed(() => {
+        if (!this.bindValue()) {
+            return this.value();
+        }
+        return this.items().find((item) => this.compareFn()(this.getItemValue(item), this.value()));
+    });
+    // Selected items for multi-select
+    selectedItems = computed(() => {
+        const value = this.value();
+        if (!this.hasValue() || !Array.isArray(value)) {
+            return [];
+        }
+        return this.items().filter((item) => value.some((v) => this.compareFn()(this.getItemValue(item), v)));
+    });
+    // Template context factory for option labels
+    getOptionLabelTemplateContext(item) {
+        return {
+            $implicit: this.getItemLabel(item),
+            value: this.getItemValue(item),
+            item: item,
+        };
+    }
+    // Template context factory for optgroup labels
+    getOptgroupLabelTemplateContext(group) {
+        return {
+            $implicit: group.label,
+            label: group.label,
+            items: group.items,
+        };
+    }
+    filteredItems = computed(() => {
+        const searchText = this.searchValue()?.toLowerCase() ?? '';
+        if (!searchText || !this.searchable() || this.customFilter()) {
+            return this.items();
+        }
+        return this.items().filter((item) => {
+            const label = this.getItemLabel(item);
+            return label.toLowerCase().includes(searchText);
+        });
+    });
+    // Returns selected values not in filtered items, ensuring cdkListbox maintains state during filtering
+    virtualItems = computed(() => {
+        const value = this.value();
+        if (this.bindValue() || !Array.isArray(value)) {
+            return [];
+        }
+        return value.filter((val) => {
+            return !this.filteredItems().some((item) => this.compareFn()(this.getItemValue(item), val));
+        });
+    });
+    groupedItems = computed(() => {
+        const items = this.filteredItems();
+        const groupByKey = this.groupBy();
+        if (!groupByKey) {
+            return [{ label: null, items }];
+        }
+        const groups = new Map();
+        items.forEach((item) => {
+            const groupLabel = typeof groupByKey === 'function'
+                ? groupByKey(item)
+                : this.getNestedValue(item, groupByKey);
+            if (!groups.has(groupLabel)) {
+                groups.set(groupLabel, []);
+            }
+            groups.get(groupLabel).push(item);
+        });
+        return Array.from(groups.entries()).map(([label, items]) => ({
+            label,
+            items,
+        }));
+    });
+    hasNoOptions = computed(() => {
+        return this.filteredItems().length === 0;
+    });
+    activeDescendantId = computed(() => {
+        const activeOption = this.gaOptions().find((option) => option.active());
+        return activeOption?.cdkOption.id;
+    });
+    hasValue = computed(() => {
+        const value = this.value();
+        if (!this.multiple() && (value === null || value === undefined)) {
+            return this.canSelectNullable();
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        return true;
+    });
+    invalid = computed(() => {
+        return this.invalidInput() ?? this.implicitNgControlState.inError();
+    });
+    listboxCompareWith = computed(() => {
+        return (o1, o2) => {
+            if (o1 === null || o1 === undefined || o2 === null || o2 === undefined) {
+                // for some reason cdkListbox compareWith is sometimes called with null/undefined values
+                // in that case, use strict equality to avoid null reference issues
+                return o1 === o2;
+            }
+            return this.compareFn()(o1, o2);
+        };
+    });
+    // Helper method to get the label for an item
+    getItemLabel(item) {
+        const bindLabel = this.bindLabel();
+        if (!bindLabel) {
+            return String(item);
+        }
+        return String(this.getNestedValue(item, bindLabel));
+    }
+    // Helper method to get the value for an item
+    getItemValue(item) {
+        const bindValue = this.bindValue();
+        if (!bindValue) {
+            return item;
+        }
+        if (this.searchable()) {
+            return item;
+        }
+        return this.getNestedValue(item, bindValue);
+    }
+    // Helper method to check if an item is disabled
+    getItemDisabled(item) {
+        return item?.$disabled === true;
+    }
+    // Helper method to get the typeahead label for an item
+    getItemTypeaheadLabel(item) {
+        return item?.$typeaheadLabel;
+    }
+    // Helper method to get nested property value
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((current, prop) => current?.[prop], obj);
+    }
+    constructor() {
+        effect(() => {
+            // if the select became disabled while open, close it
+            if (this.disabled() && this._isOpen()) {
+                this.close();
+            }
+        });
+        if (isDevMode()) {
+            effect(() => {
+                if (this.bindValue() && this.searchable()) {
+                    console.warn('GaDataSelectComponent: `bindValue` is ignored with `searchable` mode, value and item must be of the same type. See docs for more details.');
+                }
+            });
+        }
+        const formFieldConnector = this.formFieldConnector;
+        if (formFieldConnector) {
+            effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
+        }
+        effect(() => {
+            // emit search value changes
+            this.searchValueChange.emit(this.searchValue());
+        });
+        effect(() => {
+            // update the overlayPosition since it may change size when selecting/deselecting options
+            this.value();
+            untracked(() => {
+                if (this.multiple()) {
+                    setTimeout(() => {
+                        this.connectedOverlay()?.overlayRef?.updatePosition();
+                    });
+                }
+            });
+        });
+        effect(() => {
+            // sync cdkListbox inputs & value (push)
+            const cdkListbox = this.cdkListbox();
+            if (cdkListbox) {
+                cdkListbox.value = this.multiple()
+                    ? this.value()
+                    : [this.value()];
+            }
+        });
+        effect(() => {
+            // when options change, ensure there is an active option selected and correct overlay position
+            const options = this.gaOptions();
+            untracked(() => {
+                if (!this.isOpen()) {
+                    return;
+                }
+                if (!options.some((option) => option.cdkOption.isActive())) {
+                    const firstOption = options.find((option) => !option.cdkOption.disabled);
+                    const selectedOption = options.find((option) => option.cdkOption.isSelected());
+                    if (selectedOption && !this.searchValue()) {
+                        this.cdkListbox()?._setActiveOption(selectedOption.cdkOption);
+                    }
+                    else if (firstOption) {
+                        // if no active option, set the first enabled as active
+                        this.cdkListbox()?._setActiveOption(firstOption.cdkOption);
+                    }
+                }
+                this.connectedOverlay()?.overlayRef?.updatePosition();
+            });
+        });
+        effect(() => {
+            // sync cdkListbox value changes (pull)
+            const cdkListbox = this.cdkListbox();
+            if (cdkListbox) {
+                untracked(() => {
+                    cdkListbox.valueChange.subscribe(({ value }) => {
+                        if (!this.multiple()) {
+                            [value] = value;
+                        }
+                        this.value.set(value);
+                        this._onModelChanged?.(value);
+                        this.autoClose();
+                    });
+                });
+            }
+        });
+    }
+    ngOnInit() {
+        // initialize proper default value for multiple select
+        if (this.multiple() && this.value() === null) {
+            this.value.set([]);
+        }
+    }
+    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;
+        }
+        this._isOpen.set(true);
+    }
+    close() {
+        if (!this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(false);
+    }
+    autoClose() {
+        // close that was initiated by clicking the option
+        if (!this.multiple()) {
+            this.shouldRecoverFocus = true;
+            this.close();
+        }
+    }
+    focusListbox() {
+        this.cdkListbox().focus();
+    }
+    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;
+            if (!this.multiple() && cdkOption.isSelected()) {
+                // if single select and the active option is already selected, do nothing
+                return;
+            }
+            this.cdkListbox().toggle(cdkOption);
+            this.syncValue();
+        }
+    }
+    onOverlayKeydown(event) {
+        if (event.code === 'Escape') {
+            this.shouldRecoverFocus = true;
+        }
+        else if (event.code === 'Tab') {
+            this.close();
+        }
+    }
+    clearValue() {
+        if (!this.clearable()) {
+            return;
+        }
+        if (this.elementRef.nativeElement !== document.activeElement &&
+            this.inputSearch()?.nativeElement !== document.activeElement) {
+            this._onTouched?.();
+        }
+        const value = this.multiple() ? [] : null;
+        this.value.set(value);
+        this._onModelChanged?.(value);
+        this.autoClose();
+    }
+    onInputKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'Enter': {
+                // redirect the event to the cdkListbox
+                event.preventDefault();
+                event.stopPropagation();
+                const eventClone = new KeyboardEvent(event.type, event);
+                this.dropdownElRef()?.nativeElement.dispatchEvent(eventClone);
+                if (event.code === 'Enter' && this.isOpen()) {
+                    // if the value wasn't changed via cdkListbox valueChange, close the dropdown manually
+                    this.autoClose();
+                }
+                break;
+            }
+            case 'Space':
+                event.stopPropagation();
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            case 'Backspace':
+                if (this.searchValue() === '') {
+                    this.clearValue();
+                }
+                event.stopPropagation();
+                break;
+        }
+    }
+    onOverlayAttach() {
+        this.shouldRecoverFocus = false;
+        this._isOpen.set(true);
+        if (this.searchable()) {
+            this.inputSearch().nativeElement.focus();
+        }
+        else {
+            this.focusListbox();
+        }
+        this.searchValue.set('');
+        afterNextRender({
+            mixedReadWrite: () => {
+                if (!this.multiple()) {
+                    this.markSelectedOptionAsActive();
+                }
+                this.scrollActiveOptionIntoView();
+            },
+        }, { injector: this.injector });
+        this.opened.emit();
+    }
+    onOverlayDetach() {
+        this._isOpen.set(false);
+        if (this.inputSearch()?.nativeElement === document.activeElement ||
+            this.shouldRecoverFocus) {
+            this.elementRef.nativeElement.focus();
+        }
+        this.searchValue.set(null);
+        this._onTouched?.();
+        this.closed.emit();
+    }
+    deselectValue(value) {
+        const comboboxValue = this.value();
+        if (Array.isArray(comboboxValue)) {
+            this.value.update((v) => v.filter((item) => !this.compareFn()(item, value)));
+        }
+        else {
+            this.value.set(null);
+        }
+        this._onModelChanged?.(this.value());
+    }
+    endReached() {
+        const dropdownEl = this.dropdownElRef()?.nativeElement;
+        if (!dropdownEl) {
+            return;
+        }
+        if (dropdownEl.scrollHeight > dropdownEl.clientHeight) {
+            this.optionsEndReached.emit();
+        }
+    }
+    syncValue() {
+        let { value } = this.cdkListbox();
+        if (!this.multiple()) {
+            [value] = value;
+        }
+        this.value.set(value);
+    }
+    markSelectedOptionAsActive() {
+        const selectedOption = this.gaOptions().find((option) => option.cdkOption.isSelected());
+        if (selectedOption) {
+            this.cdkListbox()?._setActiveOption(selectedOption.cdkOption);
+        }
+    }
+    scrollActiveOptionIntoView() {
+        const activeOption = this.gaOptions().find((option) => option.cdkOption.isActive());
+        if (activeOption) {
+            activeOption.cdkOption.element.scrollIntoView({
+                block: 'center',
+                inline: 'nearest',
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataSelectComponent, isStandalone: true, selector: "ga-data-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, 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 }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, customFilter: { classPropertyName: "customFilter", publicName: "customFilter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearableLabel: { classPropertyName: "clearableLabel", publicName: "clearableLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", 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 }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, withOptionInput: { classPropertyName: "withOptionInput", publicName: "withOptionInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchValueChange: "searchValueChange", opened: "opened", closed: "closed", optionsEndReached: "optionsEndReached" }, 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()", "keydown.backspace": "clearValue(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "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": "isOpen() ? cdkListbox()?.id : null", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox()?.id : null", "attr.aria-activedescendant": "isOpen() && !searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GaDataSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__caption\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-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$1.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: GaDataSelectValueComponent, selector: "ga-data-select-value", inputs: ["customValueTemplate"] }, { kind: "component", type: GaDataSelectDropdownComponent, selector: "ga-data-select-dropdown", inputs: ["loading"] }, { kind: "component", type: GaDataOptionComponent, selector: "ga-data-option", inputs: ["value", "disabled", "withInput"] }, { kind: "component", type: GaDataOptgroupComponent, selector: "ga-data-optgroup", inputs: ["label", "customLabelTemplate", "customLabelContext"] }, { kind: "component", type: GaIntersectionTriggerComponent, selector: "ga-intersection-trigger", inputs: ["rootElement", "rootMargin", "parentAsRoot"], outputs: ["trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-data-select', imports: [
+                        GaIconModule,
+                        GaButtonModule,
+                        OverlayModule,
+                        GaDataSelectValueComponent,
+                        GaDataSelectDropdownComponent,
+                        GaDataOptionComponent,
+                        GaDataOptgroupComponent,
+                        GaIntersectionTriggerComponent,
+                        NgTemplateOutlet,
+                    ], hostDirectives: [
+                        CdkOverlayOrigin,
+                        {
+                            directive: GaLabelledByFormFieldDirective,
+                            inputs: ['aria-labelledby'],
+                        },
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GaDataSelectComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        role: 'combobox',
+                        '[attr.id]': 'id()',
+                        class: 'ga-select',
+                        '[class.ga-select--multi]': 'multiple()',
+                        '[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]': 'isOpen() ? cdkListbox()?.id : null',
+                        '[attr.aria-invalid]': 'invalid()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.aria-owns]': 'isOpen() && searchable() ? cdkListbox()?.id : null',
+                        '[attr.aria-activedescendant]': 'isOpen() && !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()',
+                        '(keydown.backspace)': 'clearValue(); $event.preventDefault()',
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"searchValue() ?? ''\"\n      (input)=\"open(); searchValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"i18n.searchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__caption\">\n        {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n      </div>\n    }\n\n    @for (group of groupedItems(); track group.label) {\n      @if (group.label) {\n        <ga-data-optgroup\n          [label]=\"group.label\"\n          [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n          [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n        >\n          @for (item of group.items; track getItemValue(item)) {\n            <ga-data-option\n              [value]=\"getItemValue(item)\"\n              [withInput]=\"withOptionInput()\"\n              [disabled]=\"getItemDisabled(item)\"\n              [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n            >\n              @if (customOptionLabelTemplate(); as labelTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                  [ngTemplateOutletContext]=\"\n                    getOptionLabelTemplateContext(item)\n                  \"\n                />\n              } @else {\n                {{ getItemLabel(item) }}\n              }\n            </ga-data-option>\n          }\n        </ga-data-optgroup>\n      } @else {\n        @for (item of group.items; track getItemValue(item)) {\n          <ga-data-option\n            [value]=\"getItemValue(item)\"\n            [withInput]=\"withOptionInput() ?? multiple()\"\n            [disabled]=\"getItemDisabled(item)\"\n            [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n          >\n            @if (customOptionLabelTemplate(); as labelTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n              />\n            } @else {\n              {{ getItemLabel(item) }}\n            }\n          </ga-data-option>\n        }\n      }\n    }\n\n    <!--\n      Virtual items: Render hidden disabled options for all selected values.\n      This ensures cdkListbox maintains state when filtering occurs - even when\n      selected values don't match the currently visible filtered options, they\n      remain valid options in the listbox, preventing state loss.\n    -->\n    @for (item of virtualItems(); track getItemValue(item)) {\n      <ga-data-option\n        [value]=\"getItemValue(item)\"\n        [withInput]=\"withOptionInput() ?? multiple()\"\n        disabled\n        hidden\n      >\n        @if (customOptionLabelTemplate(); as labelTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n          />\n        } @else {\n          {{ getItemLabel(item) }}\n        }\n      </ga-data-option>\n    }\n\n    <ga-intersection-trigger\n      parentAsRoot\n      rootMargin=\"0% 0% 20px 0%\"\n      (trigger)=\"endReached()\"\n    />\n  </ga-data-select-dropdown>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @internal - Internal validator provider for ga-data-select required validation
+ */
+const GA_DATA_SELECT_REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => GaDataSelectRequiredValidator),
+    multi: true,
+};
+/**
+ * @internal - Internal directive for ga-data-select required validation
+ */
+class GaDataSelectRequiredValidator extends RequiredValidator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaDataSelectRequiredValidator, isStandalone: true, selector: "ga-data-select[required][formControlName], ga-data-select[required][formControl], ga-data-select[required][ngModel]", providers: [GA_DATA_SELECT_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectRequiredValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: `ga-data-select[required][formControlName], ga-data-select[required][formControl], ga-data-select[required][ngModel]`,
+                    providers: [GA_DATA_SELECT_REQUIRED_VALIDATOR],
+                }]
+        }] });
+
+class GaDataSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectModule, imports: [GaDataSelectComponent,
+            GaDataSelectRequiredValidator,
+            GaDataSelectValueDirective,
+            GaDataSelectOptionLabelDirective,
+            GaDataSelectOptgroupLabelDirective], exports: [GaDataSelectComponent,
+            GaDataSelectRequiredValidator,
+            GaDataSelectValueDirective,
+            GaDataSelectOptionLabelDirective,
+            GaDataSelectOptgroupLabelDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectModule, imports: [GaDataSelectComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        GaDataSelectComponent,
+                        GaDataSelectRequiredValidator,
+                        GaDataSelectValueDirective,
+                        GaDataSelectOptionLabelDirective,
+                        GaDataSelectOptgroupLabelDirective,
+                    ],
+                    exports: [
+                        GaDataSelectComponent,
+                        GaDataSelectRequiredValidator,
+                        GaDataSelectValueDirective,
+                        GaDataSelectOptionLabelDirective,
+                        GaDataSelectOptgroupLabelDirective,
+                    ],
+                }]
+        }] });
+
 const SWITCH_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => GaSwitchComponent),
@@ -4747,5 +5676,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATA_SELECT_I18N_FACTORY, GA_DATA_SELECT_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDataSelectComponent, GaDataSelectI18n, GaDataSelectI18nDefault, GaDataSelectModule, GaDataSelectOptgroupLabelDirective, GaDataSelectOptionLabelDirective, GaDataSelectRequiredValidator, GaDataSelectValueDirective, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map