@vsn-ux/ngx-gaia 0.6.0 → 0.6.1

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

@@ -1,17 +1,18 @@
 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 { 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 { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, ResolveStart } from '@angular/router';
 import * as i1$2 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 
@@ -344,11 +345,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 +684,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 +755,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 +772,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 +808,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 +902,9 @@ class GaTooltipDirective {
     get placement() {
         return this._placement;
     }
+    get ariaDescribedBy() {
+        return this.tooltipInstance?.uniqueId ?? null;
+    }
     ngOnDestroy() {
         this.destroyed$.next();
         this.destroyed$.complete();
@@ -1099,7 +1105,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 +1134,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 +1379,542 @@ 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 = [];
+    get activeModals() {
+        return this.parentModalService
+            ? this.parentModalService.activeModals
+            : this.openModalsAtThisLevel;
+    }
+    open(component, ...args) {
+        let [data] = args;
+        const overlayRef = this.createOverlay();
+        return this.attachContent(component, data, overlayRef);
+    }
+    closeAll() {
+        while (this.activeModals.length > 0) {
+            this.activeModals.pop()?.close();
+        }
+    }
+    /** @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.push(modalRef.instance);
+        modalRef.instance
+            .afterClosed({ closeOnUnsubscribe: false })
+            .subscribe(() => {
+            const index = this.activeModals.indexOf(modalRef.instance);
+            if (index > -1) {
+                this.activeModals.splice(index, 1);
+            }
+        });
+        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);
+    router = inject(Router, { optional: true });
+    globalOptions = inject(GaModalOptions, { optional: true });
+    options = this.createOptions();
+    data = inject(GA_MODAL_DATA);
+    labelledBy = signal(null);
+    describedBy = signal(null);
+    constructor() {
+        // 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'" }, classAttribute: "ga-modal" }, 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'",
+                    },
+                }]
+        }], 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.
@@ -2277,5 +2822,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