@vsn-ux/ngx-gaia 0.7.0 → 0.7.2

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

@@ -1,5 +1,5 @@
 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, HostBinding, effect, DestroyRef, afterNextRender, Renderer2, afterRender, contentChildren, viewChild } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, input, numberAttribute, computed, Component, ViewEncapsulation, Attribute, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, 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';
@@ -104,52 +104,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
+function GA_BUTTON_I18N_FACTORY() {
+    return new GaButtonI18nDefault();
+}
+class GaButtonI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonI18n, providedIn: 'root', useFactory: GA_BUTTON_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_BUTTON_I18N_FACTORY,
+                }]
+        }] });
+class GaButtonI18nDefault extends GaButtonI18n {
+    /** A label for the default loading state */
+    loadingLabel = 'Loading...';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonI18nDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonI18nDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaButtonI18n(value) {
+    return makeEnvironmentProviders([
+        typeof value === 'function'
+            ? { provide: GaButtonI18n, useFactory: value }
+            : { provide: GaButtonI18n, useValue: value },
+    ]);
+}
+
+class GaSpinnerComponent {
+    size = input(32, { transform: numberAttribute });
+    strokeWidth = computed(() => this.size() / 5);
+    center = computed(() => this.size() / 2);
+    radius = computed(() => (this.size() - this.strokeWidth()) / 2);
+    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: { 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()"
+      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-secondary)"
+        [attr.stroke-width]="strokeWidth()"
+        fill="none"
+      ></circle>
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-primary-70)"
+        [attr.stroke-width]="strokeWidth()"
+        stroke-linecap="round"
+        fill="none"
+        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
+        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
+      ></circle>
+    </svg>
+  `, isInline: true, 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"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-spinner', template: `
+    <svg
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-secondary)"
+        [attr.stroke-width]="strokeWidth()"
+        fill="none"
+      ></circle>
+      <circle
+        [attr.cx]="center()"
+        [attr.cy]="center()"
+        [attr.r]="radius()"
+        stroke="var(--ga-color-primary-70)"
+        [attr.stroke-width]="strokeWidth()"
+        stroke-linecap="round"
+        fill="none"
+        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
+        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
+      ></circle>
+    </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"] }]
+        }] });
+
 class GaButtonDirective {
+    i18n = inject(GaButtonI18n);
+    el = inject(ElementRef);
     variant = input.required({
         alias: 'gaButton',
     });
+    isLoading = input(false, {
+        alias: 'gaButtonLoading',
+        transform: booleanAttribute,
+    });
+    loadingLabel = input(this.i18n.loadingLabel, {
+        alias: 'gaButtonLoadingLabel',
+    });
+    disabledImplicit = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    disabled = computed(() => {
+        if (this.el.nativeElement.tagName === 'A') {
+            return null;
+        }
+        return this.isLoading() || this.disabledImplicit() ? '' : null;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaButtonDirective, isStandalone: true, selector: "button[gaButton], a[gaButton]", inputs: { variant: { classPropertyName: "variant", publicName: "gaButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.ga-button--secondary": "!variant() || variant() === 'secondary'", "class.ga-button--primary": "variant() === 'primary'", "class.ga-button--ghost": "variant() === 'ghost'", "class.ga-button--transparent": "variant() === 'transparent'" }, classAttribute: "ga-button" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaButtonDirective, isStandalone: true, selector: "button[gaButton], a[gaButton]", inputs: { variant: { classPropertyName: "variant", publicName: "gaButton", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "gaButtonLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "gaButtonLoadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledImplicit: { classPropertyName: "disabledImplicit", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-button--secondary": "!variant() || variant() === 'secondary'", "class.ga-button--primary": "variant() === 'primary'", "class.ga-button--ghost": "variant() === 'ghost'", "class.ga-button--transparent": "variant() === 'transparent'", "attr.disabled": "disabled()", "attr.aria-busy": "isLoading() ? \"true\" : null" }, classAttribute: "ga-button" }, ngImport: i0, template: `
+    @if (isLoading()) {
+      <ga-spinner size="16" />
+      <span class="ga-button__loading-label">{{ loadingLabel() }}</span>
+    } @else {
+      <ng-content />
+    }
+  `, isInline: true, styles: [".ga-button__loading-label{color:var(--ga-color-text-body);font-weight:400;font-size:calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));line-height:calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));letter-spacing:0}\n"], dependencies: [{ kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaButtonDirective, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'button[gaButton], a[gaButton]',
-                    host: {
+            args: [{ selector: 'button[gaButton], a[gaButton]', imports: [GaSpinnerComponent], template: `
+    @if (isLoading()) {
+      <ga-spinner size="16" />
+      <span class="ga-button__loading-label">{{ loadingLabel() }}</span>
+    } @else {
+      <ng-content />
+    }
+  `, encapsulation: ViewEncapsulation.None, host: {
                         class: 'ga-button',
                         '[class.ga-button--secondary]': `!variant() || variant() === 'secondary'`,
                         '[class.ga-button--primary]': `variant() === 'primary'`,
                         '[class.ga-button--ghost]': `variant() === 'ghost'`,
                         '[class.ga-button--transparent]': `variant() === 'transparent'`,
-                    },
-                    template: `<ng-content />`,
-                }]
+                        '[attr.disabled]': 'disabled()',
+                        '[attr.aria-busy]': 'isLoading() ? "true" : null',
+                    }, styles: [".ga-button__loading-label{color:var(--ga-color-text-body);font-weight:400;font-size:calc(var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1));line-height:calc(var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1));letter-spacing:0}\n"] }]
         }] });
 
 class GaIconButtonDirective {
+    i18n = inject(GaButtonI18n);
+    el = inject(ElementRef);
     icon = input.required({
         alias: 'gaIconButton',
     });
     variant = input('secondary', {
         alias: 'gaIconButtonVariant',
     });
+    isLoading = input(false, {
+        alias: 'gaIconButtonLoading',
+        transform: booleanAttribute,
+    });
+    loadingLabel = input(this.i18n.loadingLabel, {
+        alias: 'gaIconButtonLoadingLabel',
+    });
+    disabledImplicit = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    disabled = computed(() => {
+        if (this.el.nativeElement.tagName === 'A') {
+            return null;
+        }
+        return this.isLoading() || this.disabledImplicit() ? '' : null;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaIconButtonDirective, isStandalone: true, selector: "button[gaIconButton], a[gaIconButton]", inputs: { icon: { classPropertyName: "icon", publicName: "gaIconButton", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "gaIconButtonVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-button--primary": "variant() === 'primary'", "class.ga-button--secondary": "variant() === 'secondary'", "class.ga-button--ghost": "variant() === 'ghost'", "class.ga-button--transparent": "variant() === 'transparent'" }, classAttribute: "ga-button ga-button--icon-only" }, ngImport: i0, template: `
-    <ga-icon [icon]="icon()" />
-    <span class="ga-button__icon-label"><ng-content /></span>
-  `, isInline: true, styles: [".ga-button__icon-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border-width:0!important}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaIconButtonDirective, isStandalone: true, selector: "button[gaIconButton], a[gaIconButton]", inputs: { icon: { classPropertyName: "icon", publicName: "gaIconButton", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "gaIconButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "gaIconButtonLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "gaIconButtonLoadingLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledImplicit: { classPropertyName: "disabledImplicit", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-button--primary": "variant() === 'primary'", "class.ga-button--secondary": "variant() === 'secondary'", "class.ga-button--ghost": "variant() === 'ghost'", "class.ga-button--transparent": "variant() === 'transparent'", "attr.disabled": "disabled()", "attr.aria-busy": "isLoading() ? \"true\" : null" }, classAttribute: "ga-button ga-button--icon-only" }, ngImport: i0, template: `
+    @if (isLoading()) {
+      <ga-spinner size="16" />
+      <span class="ga-button__icon-label">{{ loadingLabel() }}</span>
+    } @else {
+      <ga-icon [icon]="icon()" />
+      <span class="ga-button__icon-label"><ng-content /></span>
+    }
+  `, isInline: true, styles: [".ga-button__icon-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border-width:0!important}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaIconButtonDirective, decorators: [{
             type: Component,
-            args: [{ selector: 'button[gaIconButton], a[gaIconButton]', imports: [GaIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <ga-icon [icon]="icon()" />
-    <span class="ga-button__icon-label"><ng-content /></span>
+            args: [{ selector: 'button[gaIconButton], a[gaIconButton]', imports: [GaIconModule, GaSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (isLoading()) {
+      <ga-spinner size="16" />
+      <span class="ga-button__icon-label">{{ loadingLabel() }}</span>
+    } @else {
+      <ga-icon [icon]="icon()" />
+      <span class="ga-button__icon-label"><ng-content /></span>
+    }
   `, host: {
                         class: 'ga-button ga-button--icon-only',
                         '[class.ga-button--primary]': `variant() === 'primary'`,
                         '[class.ga-button--secondary]': `variant() === 'secondary'`,
                         '[class.ga-button--ghost]': `variant() === 'ghost'`,
                         '[class.ga-button--transparent]': `variant() === 'transparent'`,
+                        '[attr.disabled]': 'disabled()',
+                        '[attr.aria-busy]': 'isLoading() ? "true" : null',
                     }, styles: [".ga-button__icon-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border-width:0!important}\n"] }]
         }] });
 
@@ -247,7 +416,7 @@ class GaAlertComponent {
         return `${progressValue}%`;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaAlertComponent, isStandalone: true, selector: "ga-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, explicitIcon: { classPropertyName: "explicitIcon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabelledBy: { classPropertyName: "progressLabelledBy", publicName: "progressLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "role": "alert" }, properties: { "class": "variantClass()" } }, queries: [{ propertyName: "title", first: true, predicate: GaAlertTitleComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-notification__icon\" />\n}\n<div class=\"ga-notification__content\">\n  @if (title()) {\n    <div class=\"ga-notification__heading\">\n      <ng-content select=\"ga-alert-title\" />\n      <ng-content select=\"ga-alert-title-actions\" />\n    </div>\n  }\n  <div class=\"ga-notification__description\">\n    <ng-content />\n  </div>\n</div>\n\n@if (hasProgress()) {\n  <div\n    role=\"progressbar\"\n    class=\"ga-notification__progress\"\n    [class.ga-notification__progress--indeterminate]=\"\n      progress() === 'indeterminate'\n    \"\n    [id]=\"progressId\"\n    [attr.aria-label]=\"progressLabel()\"\n    [attr.aria-labelledby]=\"progressLabelledBy()\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div\n      class=\"ga-notification__progress-bar\"\n      [style.width]=\"progressBarWidth()\"\n    ></div>\n  </div>\n}\n\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    [gaIconButton]=\"dismissIcon\"\n    gaIconButtonVariant=\"ghost\"\n    (click)=\"dismiss.emit()\"\n  >\n    {{ i18n.dismissLabel }}\n  </button>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: GaAlertComponent, isStandalone: true, selector: "ga-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, explicitIcon: { classPropertyName: "explicitIcon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabelledBy: { classPropertyName: "progressLabelledBy", publicName: "progressLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { attributes: { "role": "alert" }, properties: { "class": "variantClass()" } }, queries: [{ propertyName: "title", first: true, predicate: GaAlertTitleComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-notification__icon\" />\n}\n<div class=\"ga-notification__content\">\n  @if (title()) {\n    <div class=\"ga-notification__heading\">\n      <ng-content select=\"ga-alert-title\" />\n      <ng-content select=\"ga-alert-title-actions\" />\n    </div>\n  }\n  <div class=\"ga-notification__description\">\n    <ng-content />\n  </div>\n</div>\n\n@if (hasProgress()) {\n  <div\n    role=\"progressbar\"\n    class=\"ga-notification__progress\"\n    [class.ga-notification__progress--indeterminate]=\"\n      progress() === 'indeterminate'\n    \"\n    [id]=\"progressId\"\n    [attr.aria-label]=\"progressLabel()\"\n    [attr.aria-labelledby]=\"progressLabelledBy()\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div\n      class=\"ga-notification__progress-bar\"\n      [style.width]=\"progressBarWidth()\"\n    ></div>\n  </div>\n}\n\n@if (dismissible()) {\n  <button\n    type=\"button\"\n    [gaIconButton]=\"dismissIcon\"\n    gaIconButtonVariant=\"ghost\"\n    (click)=\"dismiss.emit()\"\n  >\n    {{ i18n.dismissLabel }}\n  </button>\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant", "gaIconButtonLoading", "gaIconButtonLoadingLabel", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaAlertComponent, decorators: [{
             type: Component,
@@ -1468,11 +1637,12 @@ class GaModalService {
     }
     /** @ignore */
     createOverlay() {
+        const modalStackIndex = this.activeModals().length;
         const positionStrategy = this.overlay
             .position()
             .global()
             .centerHorizontally()
-            .top('calc(4rem*var(--ga-base-scaling-factor,1))');
+            .top(`calc(4rem * var(--ga-base-scaling-factor, 1) * ${modalStackIndex + 1})`);
         const scrollStrategy = this.overlay.scrollStrategies.block();
         return this.overlay.create({
             positionStrategy,
@@ -1482,6 +1652,7 @@ class GaModalService {
             // NOTE: handled manually inside the modal component
             disposeOnNavigation: false,
             height: 'auto',
+            maxHeight: `calc(100vh - 4rem * var(--ga-base-scaling-factor, 1) * (2 + ${modalStackIndex}))`,
         });
     }
     /** @ignore */
@@ -1560,7 +1731,6 @@ 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();
@@ -1568,7 +1738,6 @@ class GaModalComponent {
     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;
@@ -1646,7 +1815,7 @@ class GaModalComponent {
         };
     }
     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 });
+    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" }, 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,
@@ -1664,7 +1833,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         '[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],
                 }]
@@ -1871,7 +2039,7 @@ class GaModalHeaderComponent {
     >
       {{ 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaIconButtonDirective, selector: "button[gaIconButton], a[gaIconButton]", inputs: ["gaIconButton", "gaIconButtonVariant", "gaIconButtonLoading", "gaIconButtonLoadingLabel", "disabled"] }, { 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,
@@ -2550,82 +2718,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class GaSpinnerComponent {
-    size = input(32, { transform: numberAttribute });
-    strokeWidth = computed(() => this.size() / 5);
-    center = computed(() => this.size() / 2);
-    radius = computed(() => (this.size() - this.strokeWidth()) / 2);
-    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: { 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()"
-      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-secondary)"
-        [attr.stroke-width]="strokeWidth()"
-        fill="none"
-      ></circle>
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-primary-70)"
-        [attr.stroke-width]="strokeWidth()"
-        stroke-linecap="round"
-        fill="none"
-        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
-        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
-      ></circle>
-    </svg>
-  `, isInline: true, 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"], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ga-spinner', template: `
-    <svg
-      [attr.width]="size()"
-      [attr.height]="size()"
-      [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-secondary)"
-        [attr.stroke-width]="strokeWidth()"
-        fill="none"
-      ></circle>
-      <circle
-        [attr.cx]="center()"
-        [attr.cy]="center()"
-        [attr.r]="radius()"
-        stroke="var(--ga-color-primary-70)"
-        [attr.stroke-width]="strokeWidth()"
-        stroke-linecap="round"
-        fill="none"
-        [attr.stroke-dasharray]="arcCircumference() + ' ' + circumference()"
-        style="transform-origin: center; animation: ga-spinner__animation 1100ms linear infinite;"
-      ></circle>
-    </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"] }]
-        }] });
-
 class GaSpinnerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaSpinnerModule, imports: [GaSpinnerComponent], exports: [GaSpinnerComponent] });
@@ -2870,5 +2962,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_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, GaButtonI18n, GaButtonI18nDefault, 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, provideGaButtonI18n, provideGaModalI18n, provideGaModalOptions };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map