@vsn-ux/ngx-gaia 0.3.1 → 0.4.1

package/README.md

@@ -26,7 +26,7 @@ ng add @vsn-ux/ngx-gaia
 1. Install this package:
 
    ```sh
-   npm i @vsn-ux/ngx-gaia
+   npm i @vsn-ux/ngx-gaia @vsn-ux/gaia-styles lucide-angular
    ```
 
 2. Import the required styles inside your global (e.g. `style.css`) file:
@@ -43,10 +43,6 @@ ng add @vsn-ux/ngx-gaia
    // @import '@vsn-ux/gaia-styles/all.css';
    ```
 
-## Icons
-
-TBA
-
 ## Browser support
 
 Follows PDAB Compatibility Policy:  

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, numberAttribute, Component, ViewEncapsulation, Attribute, NgModule, ChangeDetectionStrategy, Injectable, makeEnvironmentProviders, booleanAttribute, output, computed, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, InjectionToken, 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, effect, 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';
@@ -15,36 +15,59 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 
+/**
+ * Injection token that provides the base root font size in pixels.
+ * This token is used for accurate rem calculations when the default
+ * browser font size (16px) has been overridden by application styles.
+ * Default value is 16px if not explicitly provided.
+ */
+const GA_BASE_FONT_SIZE = new InjectionToken('ga-base-font-size', { providedIn: 'root', factory: () => 16 });
+function provideGaBaseFontSize(fontSize) {
+    return makeEnvironmentProviders([
+        { provide: GA_BASE_FONT_SIZE, useValue: fontSize },
+    ]);
+}
+
+const GA_ICON_DEFAULT_SIZE = 24;
 class GaIconComponent {
     elementRef = inject(ElementRef);
+    baseFontSize = inject(GA_BASE_FONT_SIZE);
     icon = input.required();
-    size = input();
+    size = input(GA_ICON_DEFAULT_SIZE);
     color = input();
     strokeWidth = input(undefined, { transform: numberAttribute });
+    sizeWithDimension = computed(() => {
+        const size = this.size();
+        if (typeof size === 'number' ||
+            (typeof size === 'string' && size.match(/^\d+$/))) {
+            const sizeNumber = Number(size);
+            return `${sizeNumber / this.baseFontSize}rem`;
+        }
+        return size;
+    });
     constructor(ariaHiddenAttr) {
         if (!ariaHiddenAttr) {
             this.elementRef.nativeElement.setAttribute('aria-hidden', 'true');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaIconComponent, deps: [{ token: 'aria-hidden', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaIconComponent, isStandalone: true, selector: "ga-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, classAttribute: "ga-icon" }, ngImport: i0, template: `<lucide-icon
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaIconComponent, isStandalone: true, selector: "ga-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "style": "{ '--ga-icon-size': sizeWithDimension() }" }, classAttribute: "ga-icon" }, ngImport: i0, template: `<lucide-icon
     [name]="icon()"
-    [size]="size()"
     [color]="color()"
     [strokeWidth]="strokeWidth()"
-  />`, isInline: true, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], encapsulation: i0.ViewEncapsulation.None });
+  />`, isInline: true, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}.ga-icon lucide-icon>svg{width:var(--ga-icon-size);height:var(--ga-icon-size)}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-icon', imports: [LucideAngularModule], template: `<lucide-icon
     [name]="icon()"
-    [size]="size()"
     [color]="color()"
     [strokeWidth]="strokeWidth()"
   />`, host: {
                         class: 'ga-icon',
                         role: 'img',
-                    }, encapsulation: ViewEncapsulation.None, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}\n"] }]
+                        '[style]': "{ '--ga-icon-size': sizeWithDimension() }",
+                    }, encapsulation: ViewEncapsulation.None, styles: [".ga-icon{display:inline-block;vertical-align:middle;-webkit-user-select:none;user-select:none;width:fit-content;height:fit-content}.ga-icon lucide-icon>svg{width:var(--ga-icon-size);height:var(--ga-icon-size)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['aria-hidden']
@@ -483,19 +506,26 @@ class GaSegmentedControlComponent {
     selected = model();
     change = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSegmentedControlComponent, isStandalone: true, selector: "ga-segmented-control", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "ga-segmented-control" }, ngImport: i0, template: "<ng-content select=\"button[gaSegmentedControlButton]\"></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSegmentedControlComponent, isStandalone: true, selector: "ga-segmented-control", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "ga-segmented-control" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{
+                    selector: 'ga-segmented-control',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
                         role: 'group',
                         class: 'ga-segmented-control',
-                    }, template: "<ng-content select=\"button[gaSegmentedControlButton]\"></ng-content>\n" }]
+                    },
+                }]
         }] });
 
 class GaSegmentedControlButtonDirective {
     /** @ignore */
-    group = inject(GaSegmentedControlComponent, { host: true });
+    group = inject(GaSegmentedControlComponent, {
+        skipSelf: true,
+    });
     value = input();
     selected = computed(() => {
         return (this.value() !== undefined &&
@@ -525,16 +555,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 args: ['click']
             }] } });
 
+class GaSegmentedControlIconButtonComponent {
+    value = input.required();
+    icon = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSegmentedControlIconButtonComponent, isStandalone: true, selector: "ga-segmented-control-icon-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<button
+    class="ga-segmented-control__button--icon-only"
+    gaSegmentedControlButton
+    [value]="value()"
+  >
+    <ga-icon [icon]="icon()" size="16" />
+    <span class="ga-segmented-control__button-sr-label"><ng-content /></span>
+  </button>`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "directive", type: GaSegmentedControlButtonDirective, selector: "[gaSegmentedControlButton]", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-segmented-control-icon-button',
+                    imports: [GaIconModule, GaSegmentedControlButtonDirective],
+                    template: `<button
+    class="ga-segmented-control__button--icon-only"
+    gaSegmentedControlButton
+    [value]="value()"
+  >
+    <ga-icon [icon]="icon()" size="16" />
+    <span class="ga-segmented-control__button-sr-label"><ng-content /></span>
+  </button>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class GaSegmentedControlTextButtonComponent {
+    value = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: GaSegmentedControlTextButtonComponent, isStandalone: true, selector: "ga-segmented-control-text-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<button gaSegmentedControlButton [value]="value()">
+    <ng-content />
+  </button>`, isInline: true, dependencies: [{ kind: "directive", type: GaSegmentedControlButtonDirective, selector: "[gaSegmentedControlButton]", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlTextButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-segmented-control-text-button',
+                    imports: [GaSegmentedControlButtonDirective],
+                    template: `<button gaSegmentedControlButton [value]="value()">
+    <ng-content />
+  </button>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
 class GaSegmentedControlModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlModule, imports: [GaSegmentedControlComponent, GaSegmentedControlButtonDirective], exports: [GaSegmentedControlComponent, GaSegmentedControlButtonDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlModule, imports: [GaSegmentedControlComponent,
+            GaSegmentedControlIconButtonComponent,
+            GaSegmentedControlTextButtonComponent], exports: [GaSegmentedControlComponent,
+            GaSegmentedControlIconButtonComponent,
+            GaSegmentedControlTextButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlModule, imports: [GaSegmentedControlIconButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSegmentedControlModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [GaSegmentedControlComponent, GaSegmentedControlButtonDirective],
-                    exports: [GaSegmentedControlComponent, GaSegmentedControlButtonDirective],
+                    imports: [
+                        GaSegmentedControlComponent,
+                        GaSegmentedControlIconButtonComponent,
+                        GaSegmentedControlTextButtonComponent,
+                    ],
+                    exports: [
+                        GaSegmentedControlComponent,
+                        GaSegmentedControlIconButtonComponent,
+                        GaSegmentedControlTextButtonComponent,
+                    ],
                 }]
         }] });
 
@@ -1139,13 +1230,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class GaMenuComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:var(--ga-size-8);margin-bottom:var(--ga-size-8)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-menu', template: `<ng-content />`, hostDirectives: [CdkMenu], host: {
                         class: 'ga-menu',
-                    }, styles: [":host{margin-top:var(--ga-size-8);margin-bottom:var(--ga-size-8)}\n"] }]
+                    }, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] }]
         }] });
 
 class GaMenuItemComponent {
@@ -1937,18 +2028,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class GaSelectDropdownLoadingComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectDropdownLoadingComponent, isStandalone: true, selector: "ga-select-dropdown-loader", host: { classAttribute: "ga-dropdown__content-spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
+class GaSelectDropdownSpinnerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: GaSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-select-dropdown-spinner", host: { classAttribute: "ga-dropdown__spinner" }, ngImport: i0, template: `<ga-spinner size="16" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: GaSpinnerModule }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownSpinnerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ga-select-dropdown-loader',
+                    selector: 'ga-select-dropdown-spinner',
                     template: `<ga-spinner size="16" />`,
                     imports: [GaSpinnerModule],
                     host: {
-                        class: 'ga-dropdown__content-spinner',
+                        class: 'ga-dropdown__spinner',
                     },
                 }]
         }] });
@@ -1956,13 +2047,13 @@ 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-loader />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownLoadingComponent, selector: "ga-select-dropdown-loader" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownLoadingComponent], hostDirectives: [CdkListbox], host: {
+            args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
                         class: 'ga-dropdown ga-dropdown__content',
-                    }, template: "@if (loading()) {\n  <ga-select-dropdown-loader />\n} @else {\n  <ng-content />\n}\n" }]
+                    }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
         }] });
 
 const GA_SELECT_REQUIRED_VALIDATOR = {
@@ -1988,13 +2079,13 @@ class GaSelectModule {
             GaOptionComponent,
             GaOptgroupComponent,
             GaSelectDropdownComponent,
-            GaSelectDropdownLoadingComponent,
+            GaSelectDropdownSpinnerComponent,
             GaSelectValueComponent,
             GaSelectRequiredValidator], exports: [GaSelectComponent,
             GaOptionComponent,
             GaOptgroupComponent,
             GaSelectDropdownComponent,
-            GaSelectDropdownLoadingComponent,
+            GaSelectDropdownSpinnerComponent,
             GaSelectValueComponent,
             GaSelectRequiredValidator] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: GaSelectModule, imports: [GaSelectComponent,
@@ -2008,7 +2099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         GaOptionComponent,
                         GaOptgroupComponent,
                         GaSelectDropdownComponent,
-                        GaSelectDropdownLoadingComponent,
+                        GaSelectDropdownSpinnerComponent,
                         GaSelectValueComponent,
                         GaSelectRequiredValidator,
                     ],
@@ -2017,7 +2108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         GaOptionComponent,
                         GaOptgroupComponent,
                         GaSelectDropdownComponent,
-                        GaSelectDropdownLoadingComponent,
+                        GaSelectDropdownSpinnerComponent,
                         GaSelectValueComponent,
                         GaSelectRequiredValidator,
                     ],
@@ -2032,5 +2123,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_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, 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, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlModule, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownLoadingComponent, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n };
+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, 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, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map