@vsn-ux/ngx-gaia 0.6.0 → 0.6.2

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

@@ -1,18 +1,21 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, input, numberAttribute, computed, Component, ViewEncapsulation, Attribute, NgModule, ChangeDetectionStrategy, Injectable, booleanAttribute, output, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, TemplateRef, NgZone, Input, effect, afterRender, contentChildren, viewChild } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, input, numberAttribute, computed, Component, ViewEncapsulation, Attribute, NgModule, ChangeDetectionStrategy, Injectable, booleanAttribute, output, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, TemplateRef, NgZone, Input, HostBinding, effect, DestroyRef, afterNextRender, Renderer2, afterRender, contentChildren, viewChild } from '@angular/core';
 import * as i1 from 'lucide-angular';
 import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Minus, Check, ChevronUp, ChevronDown } from 'lucide-angular';
 import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
 import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
-import * as i1$3 from '@angular/cdk/overlay';
-import { Overlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import * as i1$4 from '@angular/cdk/overlay';
+import { Overlay, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Subject, takeUntil, map, merge } from 'rxjs';
+import { Subject, takeUntil, map, merge, filter, Observable, isObservable } from 'rxjs';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i1$2 from '@angular/cdk/listbox';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, ResolveStart } from '@angular/router';
+import * as i1$2 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import * as i1$3 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 
 /**
@@ -344,11 +347,11 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
 };
 // Increasing integer for generating unique ids for checkbox components.
 // Inspired by @angular/components
-let nextUniqueId$6 = 0;
+let nextUniqueId$7 = 0;
 class GaCheckboxComponent {
     tabindex;
     /** @ignore */
-    _uniqueId = `ga-checkbox-${++nextUniqueId$6}`;
+    _uniqueId = `ga-checkbox-${++nextUniqueId$7}`;
     /** @ignore */
     injector = inject(Injector);
     icons = { Minus, Check };
@@ -683,9 +686,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 class GaInputDirective {
-    uniqueId = `ga-input-${++nextUniqueId$5}`;
+    uniqueId = `ga-input-${++nextUniqueId$6}`;
     implicitNgControl = inject(NgControl, {
         optional: true,
         self: true,
@@ -754,9 +757,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 class GaFormFieldComponent {
-    uniqueId = `ga-form-field-${++nextUniqueId$4}`;
+    uniqueId = `ga-form-field-${++nextUniqueId$5}`;
     formControl = contentChild(GA_FORM_CONTROL, { descendants: true });
     controlId = computed(() => {
         return this.formControl()?._formControlId() ?? this.uniqueId;
@@ -771,7 +774,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     }, template: "<ng-content />\n" }]
         }] });
 
+let nextUniqueId$4 = 0;
 class GaTooltipComponent {
+    uniqueId = `ga-tooltip-${++nextUniqueId$4}`;
     mouseLeaveSubject = new Subject();
     afterMouseLeave = () => this.mouseLeaveSubject.asObservable();
     mouseOver = signal(false);
@@ -805,13 +810,13 @@ class GaTooltipComponent {
         this.mouseLeaveSubject.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaTooltipComponent, isStandalone: true, selector: "ga-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hideTriggered: "hideTriggered" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "inlineStyle()" } }, ngImport: i0, template: "<div [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-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: "19.1.5", type: GaTooltipComponent, isStandalone: true, selector: "ga-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hideTriggered: "hideTriggered" }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.style": "inlineStyle()" } }, ngImport: i0, template: "<div 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: "19.1.5", ngImport: i0, type: GaTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-tooltip', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.style]': 'inlineStyle()',
-                    }, template: "<div [class]=\"cssClass()\">\n  @if (text()) {\n    {{ text() }}\n  } @else if (template()) {\n    <ng-container\n      [ngTemplateOutlet]=\"template()\"\n      [ngTemplateOutletContext]=\"{ hide: triggerHide }\"\n    />\n  }\n</div>\n", styles: [".top-start :host,.top-center :host,.top-end :host{padding-bottom:var(--ga-tooltip-offset)}.bottom-start :host,.bottom-center :host,.bottom-end :host{padding-top:var(--ga-tooltip-offset)}.left-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"] }]
+                    }, 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: { handleMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -899,6 +904,9 @@ class GaTooltipDirective {
     get placement() {
         return this._placement;
     }
+    get ariaDescribedBy() {
+        return this.tooltipInstance?.uniqueId ?? null;
+    }
     ngOnDestroy() {
         this.destroyed$.next();
         this.destroyed$.complete();
@@ -1099,7 +1107,7 @@ class GaTooltipDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.5", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: ["gaTooltip", "content"], disabled: ["gaTooltipDisabled", "disabled", booleanAttribute], controlMode: ["gaTooltipControlMode", "controlMode"], showControlMode: ["gaTooltipShowControlMode", "showControlMode"], hideControlMode: ["gaTooltipHideControlMode", "hideControlMode"], offset: ["gaTooltipOffsetSize", "offset", numberAttribute], placement: ["gaTooltipPlacement", "placement"] }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" } }, exportAs: ["gaTooltip"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.5", type: GaTooltipDirective, isStandalone: true, selector: "[gaTooltip]", inputs: { content: ["gaTooltip", "content"], disabled: ["gaTooltipDisabled", "disabled", booleanAttribute], controlMode: ["gaTooltipControlMode", "controlMode"], showControlMode: ["gaTooltipShowControlMode", "showControlMode"], hideControlMode: ["gaTooltipHideControlMode", "hideControlMode"], offset: ["gaTooltipOffsetSize", "offset", numberAttribute], placement: ["gaTooltipPlacement", "placement"] }, host: { listeners: { "click": "handleMouseClick()", "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.aria-describedby": "this.ariaDescribedBy" } }, exportAs: ["gaTooltip"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaTooltipDirective, decorators: [{
             type: Directive,
@@ -1128,6 +1136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }], placement: [{
                 type: Input,
                 args: [{ alias: 'gaTooltipPlacement' }]
+            }], ariaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
             }], handleMouseClick: [{
                 type: HostListener,
                 args: ['click']
@@ -1370,6 +1381,559 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
+class GaModalRef {
+    instance;
+}
+
+const GA_MODAL_DATA = new InjectionToken('GaModalData');
+
+class GaModalService {
+    /** @ignore */
+    overlay = inject(Overlay);
+    /** @ignore */
+    injector = inject(Injector);
+    /** @ignore */
+    parentModalService = inject(GaModalService, {
+        optional: true,
+        skipSelf: true,
+    });
+    /** @ignore */
+    openModalsAtThisLevel = signal([]);
+    get activeModals() {
+        if (this.parentModalService) {
+            return this.parentModalService.activeModals;
+        }
+        return this.openModalsAtThisLevel;
+    }
+    open(component, ...args) {
+        let [data] = args;
+        const overlayRef = this.createOverlay();
+        return this.attachContent(component, data, overlayRef);
+    }
+    closeAll() {
+        this.activeModals.update((modals) => {
+            while (modals.length > 0) {
+                modals.pop()?.close();
+            }
+            return modals;
+        });
+    }
+    /** @ignore */
+    attachContent(component, data, overlayRef) {
+        const modalRef = new GaModalRef();
+        const injector = this.createInjector(this.injector, overlayRef, modalRef, data);
+        const modalPortal = new ComponentPortal(component, null, injector);
+        const result = overlayRef.attach(modalPortal);
+        modalRef.instance = result.instance;
+        this.activeModals.update((modals) => {
+            modals.push(modalRef.instance);
+            return modals;
+        });
+        modalRef.instance
+            .afterClosed({ closeOnUnsubscribe: false })
+            .subscribe(() => {
+            const index = this.activeModals().indexOf(modalRef.instance);
+            if (index > -1) {
+                this.activeModals.update((modals) => {
+                    modals.splice(index, 1);
+                    return modals;
+                });
+            }
+        });
+        return result.instance;
+    }
+    /** @ignore */
+    createOverlay() {
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .top('calc(4rem*var(--ga-base-scaling-factor,1))');
+        const scrollStrategy = this.overlay.scrollStrategies.block();
+        return this.overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop: true,
+            backdropClass: 'ga-modal__backdrop',
+            // NOTE: handled manually inside the modal component
+            disposeOnNavigation: false,
+            height: 'auto',
+        });
+    }
+    /** @ignore */
+    createInjector(parentInjector, overlayRef, modalRef, data) {
+        return Injector.create({
+            parent: parentInjector,
+            providers: [
+                { provide: OverlayRef, useValue: overlayRef },
+                { provide: GaModalRef, useValue: modalRef },
+                { provide: GA_MODAL_DATA, useValue: data ?? null },
+            ],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class GaModalOptions {
+    /**
+     * Defines the predefined size of the modal.
+     *
+     * @default `md`
+     */
+    size;
+    /**
+     * Defines the type of the modal:
+     *  - `none` for no icon.
+     *  - `information` for info dialog.
+     *  - `danger` for danger dialog.
+     *  - `warning` for warning dialog.
+     *  - `success` for success dialog.
+     */
+    type;
+    /**
+     * The ARIA role of the dialog element.
+     *
+     * @default `dialog`
+     */
+    role;
+    /**
+     * Defines if the modal should be closed when the escape key is pressed.
+     *
+     * @default `true`
+     */
+    closeOnEscape;
+    /**
+     * Defines if the modal should be closed when the backdrop is clicked.
+     *
+     * @default `true`
+     */
+    closeOnOutsideClick;
+    /**
+     * Defines if the modal should be closed when the route changes.
+     *
+     * @default `true`
+     */
+    closeOnNavigation;
+}
+const DEFAULT_MODAL_OPTIONS = {
+    role: 'dialog',
+    type: 'none',
+    size: 'md',
+    closeOnEscape: true,
+    closeOnOutsideClick: true,
+    closeOnNavigation: true,
+};
+function provideGaModalOptions(options) {
+    return { provide: GaModalOptions, useValue: options };
+}
+
+class GaModalComponent {
+    closeSubject = new Subject();
+    overlayRef = inject(OverlayRef);
+    destroyRef = inject(DestroyRef);
+    _modalService = inject(GaModalService);
+    router = inject(Router, { optional: true });
+    globalOptions = inject(GaModalOptions, { optional: true });
+    options = this.createOptions();
+    trapfocus = inject(CdkTrapFocus);
+    data = inject(GA_MODAL_DATA);
+    labelledBy = signal(null);
+    describedBy = signal(null);
+    modalStackIndex = computed(() => this._modalService.activeModals().length - 1);
+    constructor() {
+        this.trapfocus.enabled = true;
+        this.trapfocus.autoCapture = true;
+        // Using next render to delay the initialization, so that there is more time
+        // to set the modal options
+        afterNextRender({
+            read: () => {
+                if (this.options.closeOnNavigation) {
+                    this.router?.events
+                        .pipe(
+                    /**
+                     * Listen for `ResolveStart` to be friendly with route-guards.
+                     * i.e. don't close the modal in case a guard prevents the route change,
+                     * beneficial for pending changes check.
+                     */
+                    filter((event) => event instanceof ResolveStart), takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => this.close());
+                }
+                if (this.options.closeOnEscape) {
+                    this.overlayRef
+                        .keydownEvents()
+                        .pipe(filter((event) => event.key === 'Escape' && !hasModifierKey(event)), takeUntilDestroyed(this.destroyRef))
+                        .subscribe((event) => {
+                        event.preventDefault();
+                        this.softClose();
+                    });
+                }
+                if (this.options.closeOnOutsideClick) {
+                    this.overlayRef
+                        .backdropClick()
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => this.softClose());
+                }
+            },
+        });
+    }
+    close(result) {
+        if (!this.overlayRef.hasAttached()) {
+            return;
+        }
+        this.overlayRef.dispose();
+        this.closeSubject.next(result);
+        this.closeSubject.complete();
+    }
+    afterClosed({ closeOnUnsubscribe } = { closeOnUnsubscribe: true }) {
+        return new Observable((observer) => {
+            this.closeSubject.subscribe(observer);
+            return () => closeOnUnsubscribe && this.close();
+        });
+    }
+    /**
+     * "Soft close" hook which is called whenever the modal is being closed
+     * by "Escape" key or Backdrop click.
+     * Return true to permit closing. False - to refuse.
+     */
+    onSoftClose() {
+        return true;
+    }
+    softClose() {
+        const shouldClose = this.onSoftClose();
+        if (typeof shouldClose === 'boolean' && shouldClose) {
+            this.close();
+        }
+        if (isObservable(shouldClose)) {
+            shouldClose
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((result) => result && this.close());
+        }
+    }
+    createOptions(options) {
+        return {
+            ...DEFAULT_MODAL_OPTIONS,
+            ...this.globalOptions,
+            ...options,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'", "style.margin-top": "'calc(var(--ga-base-scaling-factor, 1)*4rem*'+modalStackIndex()+')'" }, classAttribute: "ga-modal" }, hostDirectives: [{ directive: i1$2.CdkTrapFocus }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    host: {
+                        class: 'ga-modal',
+                        '[attr.role]': 'options.role',
+                        '[attr.aria-labelledby]': 'options.labelledBy ?? labelledBy()',
+                        '[attr.aria-describedby]': 'options.describedBy ?? describedBy()',
+                        '[class.ga-modal--small]': "options.size === 'sm'",
+                        '[class.ga-modal--medium]': "options.size === 'md'",
+                        '[class.ga-modal--large]': "options.size === 'lg'",
+                        '[class.ga-modal--information]': "options.type === 'info'",
+                        '[class.ga-modal--danger]': "options.type === 'danger'",
+                        '[class.ga-modal--warning]': "options.type === 'warning'",
+                        '[class.ga-modal--success]': "options.type === 'success'",
+                        '[style.margin-top]': `'calc(var(--ga-base-scaling-factor, 1)*4rem*'+modalStackIndex()+')'`,
+                    },
+                    hostDirectives: [CdkTrapFocus],
+                }]
+        }], ctorParameters: () => [] });
+
+class GaModalCloseDirective {
+    modalRef = inject(GaModalRef);
+    modalResult = input({ alias: 'gaModalClose' });
+    onClick() {
+        this.modalRef.instance.close(this.modalResult);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.5", type: GaModalCloseDirective, isStandalone: true, selector: "[gaModalClose]", inputs: { modalResult: { classPropertyName: "modalResult", publicName: "modalResult", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaModalClose]',
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+let nextUniqueModalTitleId = 0;
+class GaModalTitleDirective {
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    modalRef = inject(GaModalRef);
+    id;
+    constructor(id) {
+        if (id) {
+            this.id = id;
+        }
+        else {
+            this.id = `gaModalTitle${nextUniqueModalTitleId++}`;
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'id', this.id);
+        }
+    }
+    ngAfterViewInit() {
+        this.modalRef.instance.labelledBy.set(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalTitleDirective, deps: [{ token: 'id', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: GaModalTitleDirective, isStandalone: true, selector: "[gaModalTitle]", host: { classAttribute: "ga-modal__title" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaModalTitle]',
+                    host: { class: 'ga-modal__title' },
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['id']
+                }] }] });
+let nextUniqueModalDescriptionId = 0;
+class GaModalDescriptionDirective {
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    modalRef = inject(GaModalRef);
+    id;
+    constructor(id) {
+        if (id) {
+            this.id = id;
+        }
+        else {
+            this.id = `gaModalDescription${nextUniqueModalDescriptionId++}`;
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'id', this.id);
+        }
+    }
+    ngAfterViewInit() {
+        this.modalRef.instance.describedBy.set(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalDescriptionDirective, deps: [{ token: 'id', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: GaModalDescriptionDirective, isStandalone: true, selector: "[gaModalDescription]", host: { classAttribute: "ga-modal__description" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gaModalDescription]',
+                    host: { class: 'ga-modal__description' },
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['id']
+                }] }] });
+
+class GaModalDescriptionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaModalDescriptionComponent, isStandalone: true, selector: "ga-modal-description", host: { classAttribute: "ga-modal__description" }, hostDirectives: [{ directive: GaModalDescriptionDirective }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-modal-description',
+                    template: `<ng-content />`,
+                    hostDirectives: [GaModalDescriptionDirective],
+                    host: {
+                        class: 'ga-modal__description',
+                    },
+                }]
+        }] });
+
+class GaModalContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaModalContentComponent, isStandalone: true, selector: "ga-modal-content", host: { classAttribute: "ga-modal__content" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-modal-content',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'ga-modal__content',
+                    },
+                }]
+        }] });
+
+class GaModalActionsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaModalActionsComponent, isStandalone: true, selector: "ga-modal-actions", host: { classAttribute: "ga-modal__actions" }, ngImport: i0, template: ` <ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-modal-actions',
+                    template: ` <ng-content />`,
+                    host: {
+                        class: 'ga-modal__actions',
+                    },
+                }]
+        }] });
+
+function GA_MODAL_I18N_FACTORY() {
+    return new GaModalI18nDefault();
+}
+class GaModalI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalI18n, providedIn: 'root', useFactory: GA_MODAL_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_MODAL_I18N_FACTORY,
+                }]
+        }] });
+class GaModalI18nDefault extends GaModalI18n {
+    /** A label for the dismiss button */
+    dismissLabel = 'Dismiss';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalI18nDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalI18nDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaModalI18n(value) {
+    return makeEnvironmentProviders([
+        typeof value === 'function'
+            ? { provide: GaModalI18n, useFactory: value }
+            : { provide: GaModalI18n, useValue: value },
+    ]);
+}
+
+class GaModalHeaderComponent {
+    icons = {
+        X,
+        Info,
+        CircleCheck,
+        TriangleAlert,
+        OctagonAlert,
+    };
+    modalRef = inject(GaModalRef);
+    i18n = inject(GaModalI18n);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaModalHeaderComponent, isStandalone: true, selector: "ga-modal-header", host: { classAttribute: "ga-modal__top-section" }, ngImport: i0, template: `
+    @if (modalRef.instance.options.type !== 'none') {
+      <div class="ga-modal__icon">
+        @switch (modalRef.instance.options.type) {
+          @case ('info') {
+            <ga-icon [icon]="icons.Info" size="48" />
+          }
+          @case ('warning') {
+            <ga-icon [icon]="icons.TriangleAlert" size="48" />
+          }
+          @case ('danger') {
+            <ga-icon [icon]="icons.OctagonAlert" size="48" />
+          }
+          @case ('success') {
+            <ga-icon [icon]="icons.CircleCheck" size="48" />
+          }
+        }
+      </div>
+    }
+    <div class="ga-modal__heading">
+      <ng-content select="[gaModalTitle]" />
+      <ng-content select="ga-modal-description" />
+    </div>
+    <button
+      type="button"
+      [gaIconButton]="icons.X"
+      gaIconButtonVariant="ghost"
+      class="ga-modal__close-icon"
+      (click)="modalRef.instance.close()"
+    >
+      {{ i18n.dismissLabel }}
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant"] }, { kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-modal-header',
+                    imports: [GaButtonModule, GaIconModule],
+                    template: `
+    @if (modalRef.instance.options.type !== 'none') {
+      <div class="ga-modal__icon">
+        @switch (modalRef.instance.options.type) {
+          @case ('info') {
+            <ga-icon [icon]="icons.Info" size="48" />
+          }
+          @case ('warning') {
+            <ga-icon [icon]="icons.TriangleAlert" size="48" />
+          }
+          @case ('danger') {
+            <ga-icon [icon]="icons.OctagonAlert" size="48" />
+          }
+          @case ('success') {
+            <ga-icon [icon]="icons.CircleCheck" size="48" />
+          }
+        }
+      </div>
+    }
+    <div class="ga-modal__heading">
+      <ng-content select="[gaModalTitle]" />
+      <ng-content select="ga-modal-description" />
+    </div>
+    <button
+      type="button"
+      [gaIconButton]="icons.X"
+      gaIconButtonVariant="ghost"
+      class="ga-modal__close-icon"
+      (click)="modalRef.instance.close()"
+    >
+      {{ i18n.dismissLabel }}
+    </button>
+  `,
+                    host: {
+                        class: 'ga-modal__top-section',
+                    },
+                }]
+        }] });
+
+class GaModalModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaModalModule, imports: [GaModalCloseDirective,
+            GaModalTitleDirective,
+            GaModalDescriptionDirective,
+            GaModalDescriptionComponent,
+            GaModalContentComponent,
+            GaModalActionsComponent,
+            GaModalHeaderComponent], exports: [GaModalCloseDirective,
+            GaModalTitleDirective,
+            GaModalDescriptionDirective,
+            GaModalDescriptionComponent,
+            GaModalContentComponent,
+            GaModalActionsComponent,
+            GaModalHeaderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalModule, imports: [GaModalHeaderComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        GaModalCloseDirective,
+                        GaModalTitleDirective,
+                        GaModalDescriptionDirective,
+                        GaModalDescriptionComponent,
+                        GaModalContentComponent,
+                        GaModalActionsComponent,
+                        GaModalHeaderComponent,
+                    ],
+                    exports: [
+                        GaModalCloseDirective,
+                        GaModalTitleDirective,
+                        GaModalDescriptionDirective,
+                        GaModalDescriptionComponent,
+                        GaModalContentComponent,
+                        GaModalActionsComponent,
+                        GaModalHeaderComponent,
+                    ],
+                }]
+        }] });
+
 /**
  * Provider Expression that allows ga-radio-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)] and ngControl.
@@ -1562,7 +2126,7 @@ class GaOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$2.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$3.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaOptionComponent, decorators: [{
             type: Component,
@@ -1893,7 +2457,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$3.CdkOverlayOrigin }], 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$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
+        ], 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 }], 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -1970,7 +2534,7 @@ class GaSpinnerComponent {
     circumference = computed(() => 2 * Math.PI * this.radius());
     arcCircumference = computed(() => this.circumference() * 0.25);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSpinnerComponent, isStandalone: true, selector: "ga-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-spinner" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSpinnerComponent, isStandalone: true, selector: "ga-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "tabindex": "-1" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.mode": "'indeterminate'" }, classAttribute: "ga-spinner" }, ngImport: i0, template: `
     <svg
       [attr.width]="size()"
       [attr.height]="size()"
@@ -2030,6 +2594,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
     </svg>
   `, encapsulation: ViewEncapsulation.None, host: {
                         class: 'ga-spinner',
+                        role: 'progressbar',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.mode]': "'indeterminate'",
+                        tabindex: '-1',
                     }, styles: [".ga-spinner{display:inline-block}@keyframes ga-spinner__animation{0%{transform:rotate(0)}31.82%{transform:rotate(90deg)}63.64%{transform:rotate(180deg)}81.82%{transform:rotate(270deg)}to{transform:rotate(360deg)}}\n"] }]
         }] });
 
@@ -2065,7 +2634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 class GaSelectDropdownComponent {
     loading = input(false, { transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$2.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-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: "19.1.5", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$3.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: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
             type: Component,
@@ -2277,5 +2846,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize, provideGaModalI18n, provideGaModalOptions };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map