@vsn-ux/ngx-gaia 0.6.1 → 0.7.0

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

@@ -4,7 +4,7 @@ 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 * 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, filter, Observable, isObservable } from 'rxjs';
@@ -13,7 +13,9 @@ import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, ResolveStart } from '@angular/router';
-import * as i1$2 from '@angular/cdk/listbox';
+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';
 
 /**
@@ -195,12 +197,16 @@ function provideGaAlertI18n(value) {
     ]);
 }
 
+let nextUniqueId$8 = 0;
 class GaAlertComponent {
     i18n = inject(GaAlertI18n);
     dismissIcon = X;
     variant = input('brand');
     explicitIcon = input(undefined, { alias: 'icon' });
     dismissible = input(false, { transform: booleanAttribute });
+    progress = input();
+    progressLabel = input();
+    progressLabelledBy = input();
     dismiss = output();
     icon = computed(() => {
         if (this.explicitIcon() !== undefined) {
@@ -219,18 +225,36 @@ class GaAlertComponent {
         return null;
     });
     title = contentChild(GaAlertTitleComponent);
+    progressId = `ga-alert-progress-${++nextUniqueId$8}`;
     variantClass = computed(() => {
         return `ga-notification ga-notification--${this.variant()}`;
     });
+    hasProgress = computed(() => {
+        return this.progress() !== undefined;
+    });
+    progressValue = computed(() => {
+        const progressValue = this.progress();
+        if (progressValue === undefined || progressValue === 'indeterminate') {
+            return undefined;
+        }
+        return Math.max(0, Math.min(100, progressValue));
+    });
+    progressBarWidth = computed(() => {
+        const progressValue = this.progressValue();
+        if (progressValue === undefined) {
+            return undefined;
+        }
+        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 } }, 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 (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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-alert', imports: [GaIconModule, GaButtonModule], host: {
                         role: 'alert',
                         '[class]': `variantClass()`,
-                    }, 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 (dismissible()) {\n  <button\n    type=\"button\"\n    [gaIconButton]=\"dismissIcon\"\n    gaIconButtonVariant=\"ghost\"\n    (click)=\"dismiss.emit()\"\n  >\n    {{ i18n.dismissLabel }}\n  </button>\n}\n" }]
+                    }, 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" }]
         }] });
 
 class GaAlertTitleActionsComponent {
@@ -308,9 +332,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class GaCardComponent {
     selectable = input(false, { transform: booleanAttribute });
+    selected = input(false, { transform: booleanAttribute });
     disabled = input(false, { transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaCardComponent, isStandalone: true, selector: "ga-card", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-card--selectable": "selectable()", "class.ga-card--disabled": "disabled()" }, classAttribute: "ga-card" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaCardComponent, isStandalone: true, selector: "ga-card", inputs: { selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-card--selectable": "selectable()", "class.ga-card--selected": "selected()", "class.ga-card--disabled": "disabled()" }, classAttribute: "ga-card" }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaCardComponent, decorators: [{
             type: Component,
@@ -320,6 +345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     host: {
                         class: 'ga-card',
                         '[class.ga-card--selectable]': 'selectable()',
+                        '[class.ga-card--selected]': 'selected()',
                         '[class.ga-card--disabled]': 'disabled()',
                     },
                 }]
@@ -1396,11 +1422,12 @@ class GaModalService {
         skipSelf: true,
     });
     /** @ignore */
-    openModalsAtThisLevel = [];
+    openModalsAtThisLevel = signal([]);
     get activeModals() {
-        return this.parentModalService
-            ? this.parentModalService.activeModals
-            : this.openModalsAtThisLevel;
+        if (this.parentModalService) {
+            return this.parentModalService.activeModals;
+        }
+        return this.openModalsAtThisLevel;
     }
     open(component, ...args) {
         let [data] = args;
@@ -1408,9 +1435,12 @@ class GaModalService {
         return this.attachContent(component, data, overlayRef);
     }
     closeAll() {
-        while (this.activeModals.length > 0) {
-            this.activeModals.pop()?.close();
-        }
+        this.activeModals.update((modals) => {
+            while (modals.length > 0) {
+                modals.pop()?.close();
+            }
+            return modals;
+        });
     }
     /** @ignore */
     attachContent(component, data, overlayRef) {
@@ -1419,13 +1449,19 @@ class GaModalService {
         const modalPortal = new ComponentPortal(component, null, injector);
         const result = overlayRef.attach(modalPortal);
         modalRef.instance = result.instance;
-        this.activeModals.push(modalRef.instance);
+        this.activeModals.update((modals) => {
+            modals.push(modalRef.instance);
+            return modals;
+        });
         modalRef.instance
             .afterClosed({ closeOnUnsubscribe: false })
             .subscribe(() => {
-            const index = this.activeModals.indexOf(modalRef.instance);
+            const index = this.activeModals().indexOf(modalRef.instance);
             if (index > -1) {
-                this.activeModals.splice(index, 1);
+                this.activeModals.update((modals) => {
+                    modals.splice(index, 1);
+                    return modals;
+                });
             }
         });
         return result.instance;
@@ -1524,13 +1560,18 @@ 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({
@@ -1605,7 +1646,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'" }, classAttribute: "ga-modal" }, 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'", "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,
@@ -1623,7 +1664,9 @@ 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],
                 }]
         }], ctorParameters: () => [] });
 
@@ -2107,7 +2150,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,
@@ -2438,7 +2481,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,
@@ -2515,7 +2558,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()"
@@ -2575,6 +2618,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"] }]
         }] });
 
@@ -2610,7 +2658,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,