@vsn-ux/ngx-gaia 0.8.7 → 0.8.8

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, forwardRef, Injector, signal, linkedSignal, Directive, model, HostListener, TemplateRef, NgZone, HostBinding, Input, DOCUMENT, effect, DestroyRef, afterNextRender, Renderer2, afterEveryRender, contentChildren, viewChild } from '@angular/core';
 import * as i1 from 'lucide-angular';
-import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronUp, ChevronDown } from 'lucide-angular';
+import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronUp, ChevronDown, CircleX } from 'lucide-angular';
 import { NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
 import * as i1$5 from '@angular/cdk/overlay';
 import { Overlay, createRepositionScrollStrategy, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
@@ -2466,9 +2466,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, template: "@if (selectComponent.multiple()) {\n  @for (option of selectComponent.selectedOptions(); track option) {\n    <div\n      class=\"ga-tag\"\n      [class.ga-tag--interactive-selected]=\"!selectComponent.disabled()\"\n      [class.ga-tag--interactive-selected-disabled]=\"selectComponent.disabled()\"\n    >\n      <span class=\"ga-tag__label\">{{ option.cdkOption.getLabel() }}</span>\n      @if (!selectComponent.disabled()) {\n        <div class=\"ga-tag__separator\"></div>\n        <ga-icon\n          [icon]=\"icons.X\"\n          size=\"16\"\n          class=\"ga-tag__icon\"\n          (click)=\"deselectOption(option); $event.stopPropagation()\"\n        />\n      }\n    </div>\n  }\n} @else {\n  {{ singleViewValue() }}\n}\n" }]
         }] });
 
+function GA_SELECT_I18N_FACTORY() {
+    return new GaSelectI18nDefault();
+}
+class GaSelectI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18n, providedIn: 'root', useFactory: GA_SELECT_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_SELECT_I18N_FACTORY,
+                }]
+        }] });
+class GaSelectI18nDefault extends GaSelectI18n {
+    /** A label for the clear button */
+    clearLabel = 'Clear';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18nDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectI18nDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaSelectI18n(value) {
+    return makeEnvironmentProviders([
+        typeof value === 'function'
+            ? { provide: GaSelectI18n, useFactory: value }
+            : { provide: GaSelectI18n, useValue: value },
+    ]);
+}
+
 let nextUniqueId$2 = 0;
 class GaSelectComponent {
     _uniqueId = `ga-select-${++nextUniqueId$2}`;
+    icons = { CircleX };
     focusedTriggerElement = null;
     _onTouched;
     _onModelChanged;
@@ -2504,6 +2536,7 @@ class GaSelectComponent {
     ];
     injector = inject(Injector);
     elementRef = inject((ElementRef));
+    i18n = inject(GaSelectI18n);
     overlayOrigin = inject(CdkOverlayOrigin);
     repositionScrollStrategy = createRepositionScrollStrategy(this.injector);
     implicitInvalid = signal(false);
@@ -2521,6 +2554,8 @@ class GaSelectComponent {
     multiple = input(false, { transform: booleanAttribute });
     compareWith = input();
     searchable = input(false, { transform: booleanAttribute });
+    clearable = input(false, { transform: booleanAttribute });
+    clearableLabel = input();
     canSelectNullable = input(false, {
         transform: booleanAttribute,
     });
@@ -2554,7 +2589,14 @@ class GaSelectComponent {
         return activeOption?.cdkOption.id;
     });
     hasValue = computed(() => {
-        return this.gaOptions().some((option) => option.selected());
+        if (!this.customSelectValue()) {
+            // When no custom value component exists, we determine if there's a value
+            // by checking selected options (which provide the display labels).
+            return this.gaOptions().some((option) => option.selected());
+        }
+        // With a custom value component, we can check the value directly
+        // which is useful for asynchronous selects, e.g. to display selected value without options
+        return this.value() !== null || this.canSelectNullable();
     });
     invalid = computed(() => {
         return this.invalidInput() ?? this.implicitInvalid();
@@ -2665,6 +2707,14 @@ class GaSelectComponent {
             this.syncValue();
         }
     }
+    clearValue() {
+        if (!this.clearable() || !this.searchable()) {
+            return;
+        }
+        this.value.set(null);
+        this._onModelChanged?.(null);
+        this.autoClose();
+    }
     onInputKeyDown(event) {
         switch (event.code) {
             case 'ArrowDown':
@@ -2686,6 +2736,11 @@ class GaSelectComponent {
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+            case 'Backspace':
+                this.clearValue();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
         }
     }
     onOverlayAttach() {
@@ -2744,7 +2799,7 @@ class GaSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaSelectComponent, isStandalone: true, selector: "ga-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textValue: "textValueChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "invalid()", "class.ga-select--empty": "!hasValue()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "cdkListbox().id", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "!searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaSelectComponent, isStandalone: true, selector: "ga-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearableLabel: { classPropertyName: "clearableLabel", publicName: "clearableLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textValue: "textValueChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()", "keydown.backspace": "clearValue(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "invalid()", "class.ga-select--empty": "!hasValue()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "cdkListbox().id", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "searchable() ? cdkListbox().id : null", "attr.aria-activedescendant": "!searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GaSelectComponent),
@@ -2754,7 +2809,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$5.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-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  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\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$5.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$5.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-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  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\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  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\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$5.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,
@@ -2800,7 +2855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '(keydown.arrowdown)': 'open(); $event.preventDefault()',
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
-                    }, 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  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
+                        '(keydown.backspace)': 'clearValue(); $event.preventDefault()',
+                    }, 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  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\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  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -3204,5 +3260,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_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, 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, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaModalI18n, provideGaModalOptions };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormFieldComponent, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, 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, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map