@vsn-ux/ngx-gaia 0.9.10 → 0.9.12

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Visma Software AS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -18,7 +18,7 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i1$4 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import * as i1$5 from '@angular/cdk/listbox';
-import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
+import { CdkOption, CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
 
 /**
  * Injection token that provides the base root font size in pixels.
@@ -1301,6 +1301,9 @@ class GaInputDirective {
             this.renderer.setAttribute(this.elementRef.nativeElement, 'placeholder', '');
         }
     }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, deps: [{ token: 'placeholder', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaInputDirective, isStandalone: true, selector: "[gaInput]", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class.ga-input": "!hasWrapper", "class.ga-input--invalid": "!hasWrapper && invalid()", "attr.disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1326,7 +1329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class GaInputComponent {
     gaInput = contentChild.required(GaInputDirective);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { properties: { "class.ga-input--invalid": "gaInput().invalid()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { listeners: { "click": "gaInput().focus()" }, properties: { "class.ga-input--invalid": "gaInput().invalid()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, decorators: [{
             type: Component,
@@ -1338,6 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     host: {
                         class: 'ga-input',
                         '[class.ga-input--invalid]': 'gaInput().invalid()',
+                        '(click)': 'gaInput().focus()',
                     },
                 }]
         }] });
@@ -3817,6 +3821,51 @@ function provideGaSelectI18n(value) {
     ]);
 }
 
+class GaSpinnerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule, imports: [GaSpinnerComponent], exports: [GaSpinnerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GaSpinnerComponent],
+                    exports: [GaSpinnerComponent],
+                }]
+        }] });
+
+class GaSelectDropdownSpinnerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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: "20.0.4", ngImport: i0, type: GaSelectDropdownSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-select-dropdown-spinner',
+                    template: `<ga-spinner size="16" />`,
+                    imports: [GaSpinnerModule],
+                    host: {
+                        class: 'ga-dropdown__spinner',
+                    },
+                }]
+        }] });
+
+class GaSelectDropdownComponent {
+    elementRef = inject(ElementRef);
+    loading = input(false, { transform: booleanAttribute });
+    resetScroll() {
+        this.elementRef.nativeElement.scrollTo(0, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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$5.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: "20.0.4", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
+                        class: 'ga-dropdown ga-dropdown__content',
+                    }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
+        }] });
+
 let nextUniqueId$2 = 0;
 class GaSelectComponent {
     _uniqueId = `ga-select-${++nextUniqueId$2}`;
@@ -3893,6 +3942,7 @@ class GaSelectComponent {
         read: GaOptionComponent,
     });
     cdkListbox = contentChild.required(CdkListbox);
+    gaDropdown = contentChild.required(GaSelectDropdownComponent);
     customSelectValue = contentChild(GaSelectValueComponent);
     inputSearch = viewChild('inputSearch');
     content = viewChild('ngContent', { read: ElementRef });
@@ -3940,16 +3990,21 @@ class GaSelectComponent {
             effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
         }
         effect(() => {
-            if (!this.isOpen()) {
-                return;
-            }
             const options = this.visibleOptions();
             untracked(() => {
-                const firstOption = options.find((option) => !option.cdkOption.disabled);
-                if (firstOption &&
-                    !options.some((option) => option.cdkOption.isActive())) {
-                    // if no active option, set the first enabled as active
-                    this.cdkListbox()._setActiveOption(firstOption.cdkOption);
+                if (!this.isOpen()) {
+                    return;
+                }
+                if (!options.some((option) => option.cdkOption.isActive())) {
+                    const firstOption = options.find((option) => !option.cdkOption.disabled);
+                    const selectedOption = options.find((option) => option.cdkOption.isSelected());
+                    if (selectedOption && !this.textValue()) {
+                        this.cdkListbox()._setActiveOption(selectedOption.cdkOption);
+                    }
+                    else if (firstOption) {
+                        // if no active option, set the first enabled as active
+                        this.cdkListbox()._setActiveOption(firstOption.cdkOption);
+                    }
                 }
                 this.connectedOverlay()?.overlayRef?.updatePosition();
             });
@@ -4146,12 +4201,26 @@ class GaSelectComponent {
         }
     }
     scrollActiveOptionIntoView() {
+        // NOTE: since cdkListbox is not destroyed on close,
+        // we need to reset the active option every time the overlay is opened
+        const firstEnabledOption = this.visibleOptions().find((option) => !option.cdkOption.disabled);
+        const selectedOption = this.visibleOptions().find((option) => option.cdkOption.isSelected());
+        if (selectedOption) {
+            this.cdkListbox()._setActiveOption(selectedOption.cdkOption);
+        }
+        else if (firstEnabledOption) {
+            this.cdkListbox()._setActiveOption(firstEnabledOption.cdkOption);
+        }
         afterNextRender({
             mixedReadWrite: () => {
-                const activeOption = this.gaOptions().find((option) => option.cdkOption.isActive());
+                // NOTE: since dropdown is not destroyed on close,
+                // we need to reset scroll position every time the overlay is opened
+                // to ensure consistent scroll position when reopening
+                this.gaDropdown().resetScroll();
+                const activeOption = this.visibleOptions().find((option) => option.cdkOption.isActive());
                 if (activeOption) {
                     activeOption.cdkOption.element.scrollIntoView({
-                        block: 'nearest',
+                        block: 'center',
                         inline: 'nearest',
                     });
                 }
@@ -4165,7 +4234,7 @@ class GaSelectComponent {
                 useExisting: forwardRef(() => GaSelectComponent),
                 multi: true,
             },
-        ], 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], 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-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"placeholder() || i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\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$1.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: "gaDropdown", first: true, predicate: GaSelectDropdownComponent, 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 }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], 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-controls]=\"isOpen() ? cdkListbox().id : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-label]=\"placeholder() || i18n.defaultSearchInputLabel\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\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$1.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: "20.0.4", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -4237,47 +4306,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
-class GaSpinnerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule, imports: [GaSpinnerComponent], exports: [GaSpinnerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSpinnerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [GaSpinnerComponent],
-                    exports: [GaSpinnerComponent],
-                }]
-        }] });
-
-class GaSelectDropdownSpinnerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", 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: "20.0.4", ngImport: i0, type: GaSelectDropdownSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-select-dropdown-spinner',
-                    template: `<ga-spinner size="16" />`,
-                    imports: [GaSpinnerModule],
-                    host: {
-                        class: 'ga-dropdown__spinner',
-                    },
-                }]
-        }] });
-
-class GaSelectDropdownComponent {
-    loading = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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$5.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: "20.0.4", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ga-select-dropdown', imports: [GaSelectDropdownSpinnerComponent], hostDirectives: [CdkListbox], host: {
-                        class: 'ga-dropdown ga-dropdown__content',
-                    }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
-        }] });
-
 /**
  * @internal - Internal validator provider for ga-select required validation
  */
@@ -4612,6 +4640,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+class GaChipListboxComponent {
+    cdkListbox = inject(CdkListbox, { self: true });
+    orientation = input('horizontal');
+    variant = input('default');
+    valueChange = output();
+    disabled = computed(() => this.cdkListbox.disabled);
+    constructor() {
+        effect(() => {
+            this.cdkListbox.orientation = this.orientation();
+        });
+        this.cdkListbox.valueChange
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => {
+            const value = !this.cdkListbox.multiple ? event.value[0] : event.value;
+            this.valueChange.emit(value);
+        });
+    }
+    focus() {
+        this.cdkListbox.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaChipListboxComponent, isStandalone: true, selector: "ga-chip-listbox", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "ga-chip-listbox" }, hostDirectives: [{ directive: i1$5.CdkListbox, inputs: ["cdkListboxMultiple", "multiple", "cdkListboxValue", "value", "cdkListboxDisabled", "disabled", "cdkListboxCompareWith", "compareWith"] }], ngImport: i0, template: "<ng-content />\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipListboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-chip-listbox', hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            inputs: [
+                                'cdkListboxMultiple: multiple',
+                                'cdkListboxValue: value',
+                                'cdkListboxDisabled: disabled',
+                                'cdkListboxCompareWith: compareWith',
+                            ],
+                        },
+                    ], host: {
+                        class: 'ga-chip-listbox',
+                    }, template: "<ng-content />\n" }]
+        }], ctorParameters: () => [] });
+
+class GaChipComponent {
+    cdkOption = inject(CdkOption, { self: true });
+    listbox = inject(GaChipListboxComponent);
+    _isSelected = signal(null);
+    selected = this._isSelected.asReadonly();
+    value = input.required();
+    disabled = input(false, { transform: booleanAttribute });
+    constructor() {
+        afterEveryRender({
+            read: () => {
+                // NOTE: currently there is no other reliable way to track the selected state,
+                // refactor once cdk will be based on signals or more appropriate events introduced
+                this._isSelected.set(this.cdkOption.isSelected());
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaChipComponent, isStandalone: true, selector: "ga-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-quick-filter-button--transparent": "listbox.variant() === 'transparent'", "class.ga-quick-filter-button--disabled": "disabled() || listbox.disabled()", "class.ga-quick-filter-button--selected": "selected()" }, classAttribute: "ga-quick-filter-button" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: "<ng-content />\n", dependencies: [{ kind: "ngmodule", type: CdkListboxModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-chip', imports: [CdkListboxModule], hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
+                        },
+                    ], host: {
+                        class: 'ga-quick-filter-button',
+                        '[class.ga-quick-filter-button--transparent]': "listbox.variant() === 'transparent'",
+                        '[class.ga-quick-filter-button--disabled]': 'disabled() || listbox.disabled()',
+                        '[class.ga-quick-filter-button--selected]': 'selected()',
+                    }, template: "<ng-content />\n" }]
+        }], ctorParameters: () => [] });
+
+class GaChipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaChipModule, imports: [GaChipComponent, GaChipListboxComponent], exports: [GaChipComponent, GaChipListboxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipModule, imports: [GaChipComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaChipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [GaChipComponent, GaChipListboxComponent],
+                    exports: [GaChipComponent, GaChipListboxComponent],
+                }]
+        }] });
+
 /*
  * Public API Surface of ngx-gaia
  */
@@ -4620,5 +4735,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_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, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
+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_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_FORM_ERRORS, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_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, GaChipComponent, GaChipListboxComponent, GaChipModule, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaFormErrors, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map