@vsn-ux/ngx-gaia 0.12.4 → 0.13.0

package/docs/input.md

@@ -22,7 +22,40 @@ Export: `gaInput`
 
 ## `<ga-input>`
 
-Wrapper component for inputs with prefix/suffix elements.
+Wrapper component for inputs with prefix/suffix elements. Automatically sets `aria-busy="true"` when `ga-input-loading` is present inside. Built-in suffix components include `<ga-input-clear-button>` and `<ga-input-loading>`, but any custom content can also be placed after the input as a suffix.
+
+## `<ga-input-loading>`
+
+Loading spinner for use inside `<ga-input>`.
+
+### Inputs
+
+- `announcement: string` - Screen reader announcement via `aria-label` (default: `''`)
+- `ariaLive: 'polite' | 'assertive'` - `aria-live` region behavior (default: `'polite'`)
+
+## `<ga-input-clear-button>`
+
+Clear button for use inside `<ga-input>`. Displays a CircleX icon.
+
+### Inputs
+
+- `ariaLabel: string` - Button aria-label override (default: `GaInputI18n.clearLabel`)
+
+### Outputs
+
+- `cleared: void` - Emitted when the clear button is clicked
+
+## GaInputI18n
+
+Abstract class for input internationalization.
+
+### Properties
+
+- `clearLabel: string` - Default label for the clear button (default: `'Clear'`)
+
+## Providers
+
+- `provideGaInputI18n(value: GaInputI18n | (() => GaInputI18n))` - Configure input i18n labels
 
 ## Examples
 
@@ -41,17 +74,39 @@ Input with prefix icon
 </ga-input>
 ```
 
-Input with suffix button
+Input with clear button
 
 ```html
 <ga-input>
   <input gaInput type="text" placeholder="Search" [(ngModel)]="search" />
-  <button type="button" aria-label="clear" (click)="search = ''">
-    <ga-icon [icon]="CircleXIcon" size="16" />
-  </button>
+  <ga-input-clear-button (cleared)="search = ''" />
 </ga-input>
 ```
 
+Input with loading spinner
+
+```html
+<ga-input>
+  <input gaInput type="text" placeholder="Search" [(ngModel)]="search" />
+  <ga-input-loading announcement="Searching..." />
+</ga-input>
+```
+
+Input with custom suffix
+
+```html
+<ga-input>
+  <input gaInput type="text" placeholder="0.00" />
+  <span>EUR</span>
+</ga-input>
+```
+
+Custom i18n labels
+
+```typescript
+provideGaInputI18n({ clearLabel: 'Tøm' });
+```
+
 Programmatic focus
 
 ```typescript

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

@@ -1336,10 +1336,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     args: ['placeholder']
                 }] }], propDecorators: { inErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "inError", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+class GaInputLoadingComponent {
+    announcement = input('', ...(ngDevMode ? [{ debugName: "announcement" }] : []));
+    ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaInputLoadingComponent, isStandalone: true, selector: "ga-input-loading", inputs: { announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "announcement() || null", "attr.aria-live": "ariaLive()" } }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-input-loading', template: `<ga-spinner size="16" />`, imports: [GaSpinnerComponent], host: {
+                        role: 'status',
+                        '[attr.aria-label]': 'announcement() || null',
+                        '[attr.aria-live]': 'ariaLive()',
+                    }, styles: [":host{display:inline-flex}\n"] }]
+        }], propDecorators: { announcement: [{ type: i0.Input, args: [{ isSignal: true, alias: "announcement", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }] } });
+
 class GaInputComponent {
     gaInput = contentChild.required(GaInputDirective);
+    loading = contentChild(GaInputLoadingComponent, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { listeners: { "click": "gaInput().focus()" }, properties: { "class.ga-input--invalid": "gaInput().inError()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { listeners: { "click": "gaInput().focus()" }, properties: { "class.ga-input--invalid": "gaInput().inError()", "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }, { propertyName: "loading", first: true, predicate: GaInputLoadingComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputComponent, decorators: [{
             type: Component,
@@ -1351,10 +1367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     host: {
                         class: 'ga-input',
                         '[class.ga-input--invalid]': 'gaInput().inError()',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
                         '(click)': 'gaInput().focus()',
                     },
                 }]
-        }], propDecorators: { gaInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaInputDirective), { isSignal: true }] }] } });
+        }], propDecorators: { gaInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaInputDirective), { isSignal: true }] }], loading: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaInputLoadingComponent), { isSignal: true }] }] } });
 
 class GaDatepickerToggleComponent {
     icons = { CalendarDays };
@@ -1438,13 +1455,13 @@ class GaDatepickerToggleComponent {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaDatepickerToggleComponent, isStandalone: true, selector: "ga-datepicker-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.escape": "close()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div class=\"ga-datepicker\">\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaButtonDirective, selector: "button[gaButton], a[gaButton]", inputs: ["gaButton", "gaButtonLoading", "gaButtonLoadingLabel", "disabled"] }, { 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDatepickerComponent, selector: "ga-datepicker", inputs: ["value", "min", "max"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaDatepickerToggleComponent, isStandalone: true, selector: "ga-datepicker-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.escape": "close()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div\n    class=\"ga-datepicker\"\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n  >\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaButtonDirective, selector: "button[gaButton], a[gaButton]", inputs: ["gaButton", "gaButtonLoading", "gaButtonLoadingLabel", "disabled"] }, { 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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDatepickerComponent, selector: "ga-datepicker", inputs: ["value", "min", "max"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDatepickerToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-datepicker-toggle', imports: [GaIconModule, GaButtonModule, OverlayModule, GaDatepickerComponent], encapsulation: ViewEncapsulation.None, host: {
                         '(keydown.escape)': 'close()',
-                    }, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div class=\"ga-datepicker\">\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"] }]
+                    }, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div\n    class=\"ga-datepicker\"\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n  >\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"] }]
         }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: true }] }] } });
 
 function GA_DATEPICKER_PARSER_FORMATTER_FACTORY() {
@@ -2102,16 +2119,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+function GA_INPUT_I18N_FACTORY() {
+    return new GaInputI18nDefault();
+}
+class GaInputI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputI18n, providedIn: 'root', useFactory: GA_INPUT_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_INPUT_I18N_FACTORY,
+                }]
+        }] });
+class GaInputI18nDefault extends GaInputI18n {
+    /** A label for the clear button */
+    clearLabel = 'Clear';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputI18nDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputI18nDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaInputI18n(value) {
+    return makeEnvironmentProviders([
+        typeof value === 'function'
+            ? { provide: GaInputI18n, useFactory: value }
+            : { provide: GaInputI18n, useValue: value },
+    ]);
+}
+
+class GaInputClearButtonComponent {
+    i18n = inject(GaInputI18n);
+    icon = CircleX;
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    cleared = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputClearButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: GaInputClearButtonComponent, isStandalone: true, selector: "ga-input-clear-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared" }, host: { attributes: { "role": "button", "tabindex": "-1" }, listeners: { "click": "cleared.emit(); $event.stopPropagation()" }, properties: { "attr.aria-label": "ariaLabel() || i18n.clearLabel" } }, ngImport: i0, template: `<ga-icon [icon]="icon" size="16" />`, isInline: true, styles: [":host{display:flex;cursor:pointer}\n"], dependencies: [{ kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputClearButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-input-clear-button', template: `<ga-icon [icon]="icon" size="16" />`, imports: [GaIconComponent], host: {
+                        role: 'button',
+                        tabindex: '-1',
+                        '[attr.aria-label]': 'ariaLabel() || i18n.clearLabel',
+                        '(click)': 'cleared.emit(); $event.stopPropagation()',
+                    }, styles: [":host{display:flex;cursor:pointer}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
+
 class GaInputModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: GaInputModule, imports: [GaInputComponent, GaInputDirective], exports: [GaInputComponent, GaInputDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: GaInputModule, imports: [GaInputComponent,
+            GaInputDirective,
+            GaInputLoadingComponent,
+            GaInputClearButtonComponent], exports: [GaInputComponent,
+            GaInputDirective,
+            GaInputLoadingComponent,
+            GaInputClearButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputModule, imports: [GaInputClearButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaInputModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [GaInputComponent, GaInputDirective],
-                    exports: [GaInputComponent, GaInputDirective],
+                    imports: [
+                        GaInputComponent,
+                        GaInputDirective,
+                        GaInputLoadingComponent,
+                        GaInputClearButtonComponent,
+                    ],
+                    exports: [
+                        GaInputComponent,
+                        GaInputDirective,
+                        GaInputLoadingComponent,
+                        GaInputClearButtonComponent,
+                    ],
                 }]
         }] });
 
@@ -2338,12 +2420,13 @@ class GaTooltipComponent {
         this.mouseLeaveSubject.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaTooltipComponent, isStandalone: true, selector: "ga-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hideTriggered: "hideTriggered" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "inlineStyle()" } }, ngImport: i0, template: "<div role=\"tooltip\" [attr.id]=\"uniqueId\" [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-start :host,.left-center :host,.left-end :host{padding-right:var(--ga-tooltip-offset)}.right-start :host,.right-center :host,.right-end :host{padding-left:var(--ga-tooltip-offset)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaTooltipComponent, isStandalone: true, selector: "ga-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hideTriggered: "hideTriggered" }, host: { attributes: { "animate.enter": "ga-animation-reveal" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "inlineStyle()" } }, ngImport: i0, template: "<div role=\"tooltip\" [attr.id]=\"uniqueId\" [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-start :host,.left-center :host,.left-end :host{padding-right:var(--ga-tooltip-offset)}.right-start :host,.right-center :host,.right-end :host{padding-left:var(--ga-tooltip-offset)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-tooltip', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.style]': 'inlineStyle()',
+                        'animate.enter': 'ga-animation-reveal',
                     }, template: "<div role=\"tooltip\" [attr.id]=\"uniqueId\" [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-start :host,.left-center :host,.left-end :host{padding-right:var(--ga-tooltip-offset)}.right-start :host,.right-center :host,.right-end :host{padding-left:var(--ga-tooltip-offset)}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hideTriggered: [{ type: i0.Output, args: ["hideTriggered"] }], handleMouseEnter: [{
                 type: HostListener,
@@ -2373,6 +2456,7 @@ class GaTooltipDirective {
     _offset = GA_TOOLTIP_DEFAULT_OFFSET;
     mouseOver = false;
     focused = false;
+    isAnimatingOut = false;
     ariaDescribedBy = signal(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
     _showControlMode = null;
     _hideControlMode = null;
@@ -2439,12 +2523,17 @@ class GaTooltipDirective {
     }
     ngOnDestroy() {
         this.clearShowTimeout();
+        this.isAnimatingOut = false;
         this.destroyed$.next();
         this.destroyed$.complete();
         this.overlayRef?.detach();
         this.overlayRef?.dispose();
     }
     show() {
+        if (this.isAnimatingOut) {
+            this.cancelDismissAnimation();
+            return;
+        }
         if (this.overlayRef?.hasAttached()) {
             return;
         }
@@ -2486,6 +2575,27 @@ class GaTooltipDirective {
         });
     }
     hide() {
+        if (!this.overlayRef?.hasAttached() || this.isAnimatingOut) {
+            return;
+        }
+        const hostEl = this.tooltipRef?.location.nativeElement;
+        if (!hostEl) {
+            this.detach();
+            return;
+        }
+        hostEl.classList.add('ga-animation-dismiss');
+        const duration = parseFloat(getComputedStyle(hostEl).animationDuration || '0');
+        if (!duration) {
+            this.detach();
+            return;
+        }
+        this.isAnimatingOut = true;
+        hostEl.addEventListener('animationend', () => this.detach(), {
+            once: true,
+        });
+    }
+    detach() {
+        this.isAnimatingOut = false;
         if (!this.overlayRef?.hasAttached()) {
             return;
         }
@@ -2496,6 +2606,11 @@ class GaTooltipDirective {
         this.tooltipRef = undefined;
         this.ariaDescribedBy.set(null);
     }
+    cancelDismissAnimation() {
+        this.isAnimatingOut = false;
+        const hostEl = this.tooltipRef?.location.nativeElement;
+        hostEl?.classList.remove('ga-animation-dismiss');
+    }
     toggle() {
         if (!this.overlayRef?.hasAttached()) {
             this.show();
@@ -2887,12 +3002,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class GaMenuComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$2.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { attributes: { "animate.enter": "ga-animation-reveal", "animate.leave": "ga-animation-dismiss" }, classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$2.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-menu', template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
                         class: 'ga-menu',
+                        'animate.enter': 'ga-animation-reveal',
+                        'animate.leave': 'ga-animation-dismiss',
                     }, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] }]
         }] });
 
@@ -3979,12 +4096,14 @@ class GaSelectDropdownComponent {
         this.elementRef.nativeElement.scrollTo(0, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.enter": "ga-animation-reveal", "animate.leave": "ga-animation-dismiss" }, classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
                         class: 'ga-dropdown ga-dropdown__content',
+                        'animate.enter': 'ga-animation-reveal',
+                        'animate.leave': 'ga-animation-dismiss',
                     }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
         }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
@@ -5379,7 +5498,7 @@ class GaDataSelectComponent {
                 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\n    @if (multiple() && !searchable() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\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      tabindex=\"-1\"\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() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\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  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\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    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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", "hasNoOptions"] }, { 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"] }] });
+        ], 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\n    @if (multiple() && !searchable() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\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      tabindex=\"-1\"\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() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\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  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], 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", "hasNoOptions"] }, { 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: "21.2.0", ngImport: i0, type: GaDataSelectComponent, decorators: [{
             type: Component,
@@ -5428,7 +5547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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() && (!searchValue() || multiple())) {\n    <ga-data-select-value\n      [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n    />\n\n    @if (multiple() && !searchable() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\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      tabindex=\"-1\"\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() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\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  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\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    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\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" }]
+                    }, 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\n    @if (multiple() && !searchable() && labelHidden()) {\n      <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n        {{ placeholder() }}\n      </div>\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      tabindex=\"-1\"\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() && !labelHidden() ? '' : placeholder()\"\n      [title]=\"labelHidden() ? placeholder() : ''\"\n      (keydown)=\"onInputKeyDown($event)\"\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  [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ga-data-select-dropdown\n    animate.enter=\"ga-animation-reveal\"\n    animate.leave=\"ga-animation-dismiss\"\n    [multiple]=\"multiple()\"\n    [useActiveDescendant]=\"searchable()\"\n    [navigationWrapDisabled]=\"loading()\"\n    [compareWith]=\"listboxCompareWith()\"\n    [loading]=\"loading()\"\n    [hasNoOptions]=\"hasNoOptions()\"\n    #selectDropdown\n  >\n    @if (hasNoOptions() && !loading()) {\n      <div class=\"ga-dropdown__empty\">\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: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "inError", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], customFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "customFilter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], canSelectNullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectNullable", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], withOptionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "withOptionInput", required: false }] }], valueDisplayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueDisplayLimit", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchValueChange: [{ type: i0.Output, args: ["searchValueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionsEndReached: [{ type: i0.Output, args: ["optionsEndReached"] }], dropdownElRef: [{ type: i0.ViewChild, args: ['selectDropdown', { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], gaOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => GaDataOptionComponent), { isSignal: true }] }], cdkListbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], gaDropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GaDataSelectDropdownComponent), { isSignal: true }] }], customValueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectValueDirective), { isSignal: true }] }], customOptionLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectOptionLabelDirective), { isSignal: true }] }], customOptgroupLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectOptgroupLabelDirective), { isSignal: true }] }], inputSearch: [{ type: i0.ViewChild, args: ['inputSearch', { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
@@ -6549,5 +6668,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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_DATA_SELECT_I18N_FACTORY, GA_DATA_SELECT_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_INPUT_OPTIONS, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_DEFAULT_DATEPICKER_INPUT_OPTIONS, GA_DEFAULT_TOAST_OPTIONS, 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_TABS_I18N_FACTORY, GA_TOAST_OPTIONS, 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, GaStepComponent, GaStepperComponent, GaStepperModule, GaStepperPanelDirective, GaSwitchComponent, GaSwitchModule, GaTabComponent, GaTabContentDirective, GaTabsComponent, GaTabsI18n, GaTabsI18nDefault, GaTabsModule, GaTextAreaDirective, GaTextAreaModule, GaToastComponent, GaToaster, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, GaTooltipTitleComponent, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerInputOptions, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n, provideGaTabsI18n, provideGaToastOptions };
+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_INPUT_OPTIONS, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_DEFAULT_DATEPICKER_INPUT_OPTIONS, GA_DEFAULT_TOAST_OPTIONS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_INPUT_I18N_FACTORY, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TABS_I18N_FACTORY, GA_TOAST_OPTIONS, 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, GaInputClearButtonComponent, GaInputComponent, GaInputDirective, GaInputI18n, GaInputI18nDefault, GaInputLoadingComponent, 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, GaStepComponent, GaStepperComponent, GaStepperModule, GaStepperPanelDirective, GaSwitchComponent, GaSwitchModule, GaTabComponent, GaTabContentDirective, GaTabsComponent, GaTabsI18n, GaTabsI18nDefault, GaTabsModule, GaTextAreaDirective, GaTextAreaModule, GaToastComponent, GaToaster, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, GaTooltipTitleComponent, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDataSelectI18n, provideGaDatepickerI18n, provideGaDatepickerInputOptions, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaInputI18n, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n, provideGaTabsI18n, provideGaToastOptions };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map