@vsn-ux/ngx-gaia 0.8.3 → 0.8.4

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

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, input, numberAttribute, computed, Attribute, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, TemplateRef, NgZone, HostBinding, Input, DOCUMENT, effect, DestroyRef, afterNextRender, Renderer2, afterEveryRender, contentChildren, viewChild } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, TemplateRef, NgZone, HostBinding, Input, DOCUMENT, effect, DestroyRef, afterNextRender, Renderer2, afterEveryRender, contentChildren, viewChild } from '@angular/core';
 import * as i1 from 'lucide-angular';
 import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronUp, ChevronDown } from 'lucide-angular';
 import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
 import * as i1$4 from '@angular/cdk/overlay';
-import { Overlay, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import { Overlay, createBlockScrollStrategy, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject, takeUntil, map, merge, filter, Observable, isObservable } from 'rxjs';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i1$1 from '@angular/cdk/menu';
-import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger, MENU_SCROLL_STRATEGY } from '@angular/cdk/menu';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, ResolveStart } from '@angular/router';
 import * as i1$2 from '@angular/cdk/a11y';
@@ -35,6 +35,9 @@ const GA_ICON_DEFAULT_SIZE = 24;
 class GaIconComponent {
     elementRef = inject(ElementRef);
     baseFontSize = inject(GA_BASE_FONT_SIZE);
+    ariaHiddenAttr = inject(new HostAttributeToken('aria-hidden'), {
+        optional: true,
+    });
     icon = input.required();
     size = input(GA_ICON_DEFAULT_SIZE);
     color = input();
@@ -48,12 +51,12 @@ class GaIconComponent {
         }
         return size;
     });
-    constructor(ariaHiddenAttr) {
-        if (!ariaHiddenAttr) {
+    constructor() {
+        if (!this.ariaHiddenAttr) {
             this.elementRef.nativeElement.setAttribute('aria-hidden', 'true');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaIconComponent, deps: [{ token: 'aria-hidden', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaIconComponent, isStandalone: true, selector: "ga-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "style": "{ '--ga-icon-size': sizeWithDimension() }" }, classAttribute: "ga-icon" }, ngImport: i0, template: `<lucide-icon
     [name]="icon()"
     [color]="color()"
@@ -71,10 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         role: 'img',
                         '[style]': "{ '--ga-icon-size': sizeWithDimension() }",
                     }, encapsulation: ViewEncapsulation.None, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}.ga-icon lucide-icon>svg{width:var(--ga-icon-size);height:var(--ga-icon-size)}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['aria-hidden']
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class GaIconModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -542,11 +542,14 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 // Inspired by @angular/components
 let nextUniqueId$8 = 0;
 class GaCheckboxComponent {
-    tabindex;
     /** @ignore */
     _uniqueId = `ga-checkbox-${++nextUniqueId$8}`;
     /** @ignore */
     injector = inject(Injector);
+    /** @ignore */
+    tabindex = inject(new HostAttributeToken('tabindex'), {
+        optional: true,
+    });
     icons = { Minus, Check };
     /** @ignore */
     _onTouched;
@@ -594,11 +597,6 @@ class GaCheckboxComponent {
             ? this.ariaInvalid() === 'true'
             : this._invalidNgModel();
     });
-    constructor(
-    /** @ignore */
-    tabindex) {
-        this.tabindex = tabindex;
-    }
     ngDoCheck() {
         const ngControl = this.injector.get(NgControl, null, { self: true });
         if (ngControl) {
@@ -643,7 +641,7 @@ class GaCheckboxComponent {
         this._onModelChanged?.(this.checkedModel());
         this.change.emit(this.checkedModel());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaCheckboxComponent, deps: [{ token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaCheckboxComponent, isStandalone: true, selector: "ga-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nameInput: { classPropertyName: "nameInput", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.ga-checkbox--invalid": "invalid()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.aria-invalid": "null", "attr.aria-errormessage": "null" }, classAttribute: "ga-checkbox" }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<input\n  type=\"checkbox\"\n  class=\"ga-checkbox__native\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabledModel()\"\n  [required]=\"required()\"\n  [attr.value]=\"value()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-checkbox__marker\">\n  <lucide-icon\n    [img]=\"icons.Check\"\n    class=\"ga-checkbox__marker__indicator-checked\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n  <lucide-icon\n    [img]=\"icons.Minus\"\n    class=\"ga-checkbox__marker__indicator-indeterminate\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n</div>\n\n<label class=\"ga-checkbox__label\" [attr.for]=\"inputId()\"\n  ><ng-content></ng-content\n></label>\n", dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaCheckboxComponent, decorators: [{
@@ -659,10 +657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '[attr.aria-invalid]': 'null',
                         '[attr.aria-errormessage]': 'null',
                     }, template: "<input\n  type=\"checkbox\"\n  class=\"ga-checkbox__native\"\n  [attr.id]=\"inputId()\"\n  [name]=\"name()\"\n  [checked]=\"checkedModel()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabledModel()\"\n  [required]=\"required()\"\n  [attr.value]=\"value()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n<div class=\"ga-checkbox__marker\">\n  <lucide-icon\n    [img]=\"icons.Check\"\n    class=\"ga-checkbox__marker__indicator-checked\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n  <lucide-icon\n    [img]=\"icons.Minus\"\n    class=\"ga-checkbox__marker__indicator-indeterminate\"\n    [size]=\"12\"\n    [strokeWidth]=\"2\"\n    [absoluteStrokeWidth]=\"true\"\n  />\n</div>\n\n<label class=\"ga-checkbox__label\" [attr.for]=\"inputId()\"\n  ><ng-content></ng-content\n></label>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['tabindex']
-                }] }] });
+        }] });
 
 const GA_CHECKBOX_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
@@ -681,6 +676,7 @@ class GaCheckboxRequiredValidator extends CheckboxRequiredValidator {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaCheckboxRequiredValidator, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: `ga-checkbox[required][formControlName], ga-checkbox[required][formControl], ga-checkbox[required][ngModel]`,
                     providers: [GA_CHECKBOX_REQUIRED_VALIDATOR],
                 }]
@@ -925,6 +921,7 @@ class GaInputDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[gaInput]',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1384,11 +1381,11 @@ class GaFieldLabelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"\n    !!formField.formControl()?._formControlDisabled()\n  \"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: GaTooltipModule }, { kind: "directive", type: GaTooltipDirective, selector: "[gaTooltip]", inputs: ["gaTooltip", "gaTooltipDisabled", "gaTooltipControlMode", "gaTooltipShowControlMode", "gaTooltipHideControlMode", "gaTooltipOffsetSize", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaFieldLabelComponent, isStandalone: true, selector: "ga-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"\n    !!formField.formControl()?._formControlDisabled()\n  \"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n", dependencies: [{ kind: "ngmodule", type: GaTooltipModule }, { kind: "directive", type: GaTooltipDirective, selector: "[gaTooltip]", inputs: ["gaTooltip", "gaTooltipDisabled", "gaTooltipControlMode", "gaTooltipShowControlMode", "gaTooltipHideControlMode", "gaTooltipOffsetSize", "gaTooltipPlacement"], exportAs: ["gaTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFieldLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"\n    !!formField.formControl()?._formControlDisabled()\n  \"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
+            args: [{ selector: 'ga-label', imports: [GaTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<label\n  [attr.id]=\"uniqueId\"\n  [attr.for]=\"controlId()\"\n  class=\"ga-form-field__label\"\n  [class.ga-form-field__label--defined]=\"!!definition()\"\n  [class.ga-form-field__label--disabled]=\"\n    !!formField.formControl()?._formControlDisabled()\n  \"\n  (click)=\"focusControl()\"\n  [attr.tabindex]=\"definition() ? 0 : -1\"\n>\n  <span\n    class=\"ga-form-field__label-text\"\n    [gaTooltip]=\"definition()\"\n    gaTooltipPlacement=\"top-start\"\n    ><ng-content\n  /></span>\n  @if (state()) {\n    <span class=\"ga-form-field__label-state\">{{ state() }}</span>\n  }\n</label>\n" }]
         }] });
 
 class GaFieldInfoComponent {
@@ -1516,7 +1513,15 @@ class GaMenuTriggerDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaMenuTriggerDirective, isStandalone: true, selector: "[gaMenuTrigger]", inputs: { menuRef: { classPropertyName: "menuRef", publicName: "gaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["gaMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger, outputs: ["cdkMenuOpened", "gaMenuOpened", "cdkMenuClosed", "gaMenuClosed"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaMenuTriggerDirective, isStandalone: true, selector: "[gaMenuTrigger]", inputs: { menuRef: { classPropertyName: "menuRef", publicName: "gaMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: MENU_SCROLL_STRATEGY,
+                useFactory: () => {
+                    const injector = inject(Injector);
+                    return () => createBlockScrollStrategy(injector);
+                },
+            },
+        ], exportAs: ["gaMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger, outputs: ["cdkMenuOpened", "gaMenuOpened", "cdkMenuClosed", "gaMenuClosed"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuTriggerDirective, decorators: [{
             type: Directive,
@@ -1530,6 +1535,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                             outputs: ['cdkMenuOpened: gaMenuOpened', 'cdkMenuClosed: gaMenuClosed'],
                         },
                     ],
+                    providers: [
+                        {
+                            provide: MENU_SCROLL_STRATEGY,
+                            useFactory: () => {
+                                const injector = inject(Injector);
+                                return () => createBlockScrollStrategy(injector);
+                            },
+                        },
+                    ],
                 }]
         }], ctorParameters: () => [] });
 
@@ -1628,7 +1642,7 @@ class GaModalService {
         return this.openModalsAtThisLevel;
     }
     open(component, ...args) {
-        let [data] = args;
+        const [data] = args;
         const overlayRef = this.createOverlay();
         return this.attachContent(component, data, overlayRef);
     }
@@ -1890,10 +1904,13 @@ class GaModalTitleDirective {
     renderer = inject(Renderer2);
     elementRef = inject(ElementRef);
     modalRef = inject(GaModalRef);
+    idAttribute = inject(new HostAttributeToken('id'), {
+        optional: true,
+    });
     id;
-    constructor(id) {
-        if (id) {
-            this.id = id;
+    constructor() {
+        if (this.idAttribute) {
+            this.id = this.idAttribute;
         }
         else {
             this.id = `gaModalTitle${nextUniqueModalTitleId++}`;
@@ -1903,7 +1920,7 @@ class GaModalTitleDirective {
     ngAfterViewInit() {
         this.modalRef.instance.labelledBy.set(this.id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalTitleDirective, deps: [{ token: 'id', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaModalTitleDirective, isStandalone: true, selector: "[gaModalTitle]", host: { classAttribute: "ga-modal__title" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalTitleDirective, decorators: [{
@@ -1912,19 +1929,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     selector: '[gaModalTitle]',
                     host: { class: 'ga-modal__title' },
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['id']
-                }] }] });
+        }], ctorParameters: () => [] });
 let nextUniqueModalDescriptionId = 0;
 class GaModalDescriptionDirective {
     renderer = inject(Renderer2);
     elementRef = inject(ElementRef);
     modalRef = inject(GaModalRef);
+    idAttribute = inject(new HostAttributeToken('id'), {
+        optional: true,
+    });
     id;
-    constructor(id) {
-        if (id) {
-            this.id = id;
+    constructor() {
+        if (this.idAttribute) {
+            this.id = this.idAttribute;
         }
         else {
             this.id = `gaModalDescription${nextUniqueModalDescriptionId++}`;
@@ -1934,7 +1951,7 @@ class GaModalDescriptionDirective {
     ngAfterViewInit() {
         this.modalRef.instance.describedBy.set(this.id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalDescriptionDirective, deps: [{ token: 'id', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaModalDescriptionDirective, isStandalone: true, selector: "[gaModalDescription]", host: { classAttribute: "ga-modal__description" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalDescriptionDirective, decorators: [{
@@ -1943,25 +1960,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     selector: '[gaModalDescription]',
                     host: { class: 'ga-modal__description' },
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['id']
-                }] }] });
+        }], ctorParameters: () => [] });
 let nextUniqueModalLabelId = 0;
 class GaModalLabelDirective {
     renderer = inject(Renderer2);
     elementRef = inject(ElementRef);
+    idAttribute = inject(new HostAttributeToken('id'), {
+        optional: true,
+    });
     id;
-    constructor(id) {
-        if (id) {
-            this.id = id;
+    constructor() {
+        if (this.idAttribute) {
+            this.id = this.idAttribute;
         }
         else {
             this.id = `gaModalLabel${nextUniqueModalLabelId++}`;
             this.renderer.setAttribute(this.elementRef.nativeElement, 'id', this.id);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalLabelDirective, deps: [{ token: 'id', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaModalLabelDirective, isStandalone: true, selector: "[gaModalLabel]", host: { classAttribute: "ga-modal__label" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalLabelDirective, decorators: [{
@@ -1970,10 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     selector: '[gaModalLabel]',
                     host: { class: 'ga-modal__label' },
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['id']
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class GaModalDescriptionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2262,10 +2276,12 @@ 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;
 class GaRadioButtonComponent {
-    tabindex;
     radioGroup = inject(GaRadioGroupComponent, {
         optional: true,
     });
+    tabindex = inject(new HostAttributeToken('tabindex'), {
+        optional: true,
+    });
     _uniqueId = `ga-radio-button-${++nextUniqueId$3}`;
     /** The value attribute of the native input element */
     value = input(null);
@@ -2300,9 +2316,6 @@ class GaRadioButtonComponent {
     name = computed(() => this.radioGroup?.name() ?? this.inputName() ?? this._uniqueId);
     disabled = computed(() => this.radioGroup?.disabledModel() || this.inputDisabled());
     checked = computed(() => this.radioGroup?.valueModel() === this.value() || this.inputChecked());
-    constructor(tabindex) {
-        this.tabindex = tabindex;
-    }
     onInputChange(event) {
         // We always have to stop propagation on the change event.
         // Otherwise the change event, from the input element, will bubble up and
@@ -2317,7 +2330,7 @@ class GaRadioButtonComponent {
     onBlur() {
         this.radioGroup?.onBlur();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaRadioButtonComponent, deps: [{ token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaRadioButtonComponent, isStandalone: true, selector: "ga-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputName: { classPropertyName: "inputName", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputChecked: { classPropertyName: "inputChecked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaErrormessage: { classPropertyName: "ariaErrormessage", publicName: "aria-errormessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.ga-radio-button--invalid": "ariaInvalid()", "attr.id": "null", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "ga-radio-button" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  class=\"ga-radio-button__native\"\n  [attr.id]=\"id()\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.value]=\"value()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<div class=\"ga-radio-button__marker\"></div>\n<label class=\"ga-radio-button__label\" [attr.for]=\"id()\"\n  ><ng-content></ng-content\n></label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaRadioButtonComponent, decorators: [{
@@ -2331,10 +2344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '[attr.aria-labelledby]': 'null',
                         '[attr.aria-describedby]': 'null',
                     }, template: "<input\n  type=\"radio\"\n  class=\"ga-radio-button__native\"\n  [attr.id]=\"id()\"\n  [name]=\"name()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.tabindex]=\"tabindex\"\n  [attr.value]=\"value()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-describedby]=\"ariaDescribedby()\"\n  [attr.aria-invalid]=\"ariaInvalid()\"\n  [attr.aria-errormessage]=\"ariaErrormessage()\"\n  (change)=\"onInputChange($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<div class=\"ga-radio-button__marker\"></div>\n<label class=\"ga-radio-button__label\" [attr.for]=\"id()\"\n  ><ng-content></ng-content\n></label>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['tabindex']
-                }] }] });
+        }] });
 
 class GaRadioModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2486,6 +2496,7 @@ class GaSelectComponent {
     ];
     injector = inject(Injector);
     overlayOrigin = inject(CdkOverlayOrigin);
+    blockScrollStrategy = createBlockScrollStrategy(this.injector);
     implicitInvalid = signal(false);
     _isOpen = signal(false);
     value = model(null);
@@ -2701,7 +2712,8 @@ class GaSelectComponent {
         const currentIndex = options.findIndex(({ cdkOption }) => cdkOption.isActive());
         const findNextEnabled = (startIndex) => {
             let index = startIndex;
-            for (let i = 0; i < options.length; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            for (const _ of options) {
                 // calculate next index with wrapping (using modulo)
                 index = (index + direction + options.length) % options.length;
                 if (!options[index].cdkOption.disabled) {
@@ -2726,7 +2738,7 @@ class GaSelectComponent {
                 provide: GA_FORM_CONTROL,
                 useExisting: forwardRef(() => GaSelectComponent),
             },
-        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$4.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective }], 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-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.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: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$4.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective }], 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-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"blockScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.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,
@@ -2766,7 +2778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '(keydown.arrowdown)': 'open(); $event.preventDefault()',
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
-                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\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-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
+                    }, 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-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"blockScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -2848,6 +2860,7 @@ class GaSelectRequiredValidator extends RequiredValidator {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectRequiredValidator, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: `ga-select[required][formControlName], ga-select[required][formControl], ga-select[required][ngModel]`,
                     providers: [GA_SELECT_REQUIRED_VALIDATOR],
                 }]
@@ -3066,6 +3079,7 @@ class GaLinkDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaLinkDirective, decorators: [{
             type: Component,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'a[gaLink], button[gaLink]',
                     template: `
     @if (leadingIcon()) {