@vsn-ux/ngx-gaia 0.9.15 → 0.9.17

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

@@ -4105,6 +4105,7 @@ class GaSelectComponent {
             }
             this.cdkListbox().toggle(cdkOption);
             this.syncValue();
+            this._onModelChanged?.(this.value());
         }
     }
     onOverlayKeydown(event) {
@@ -4455,8 +4456,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n" }]
         }], ctorParameters: () => [] });
 
+function GA_DATA_SELECT_I18N_FACTORY() {
+    return new GaDataSelectI18nDefault();
+}
+class GaDataSelectI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, providedIn: 'root', useFactory: GA_DATA_SELECT_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_DATA_SELECT_I18N_FACTORY,
+                }]
+        }] });
+class GaDataSelectI18nDefault extends GaDataSelectI18n {
+    /** A label for the clear button */
+    clearLabel = 'Clear';
+    /** A label for the search input */
+    searchInputLabel = 'Search';
+    /** A label shown when there are no options to display */
+    noOptionsLabel = 'No options';
+    /** A label shown when the display limit is reached in multi-select mode */
+    displayLimitReachedLabel = (counter) => `+${counter} more`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaDataSelectI18n(value) {
+    return makeEnvironmentProviders([
+        typeof value === 'function'
+            ? { provide: GaDataSelectI18n, useFactory: value }
+            : { provide: GaDataSelectI18n, useValue: value },
+    ]);
+}
+
 class GaDataSelectValueComponent {
     selectComponent = inject(GaDataSelectComponent);
+    i18n = inject(GaDataSelectI18n);
     icons = { X };
     customValueTemplate = input();
     customValueTemplateContext = (item) => {
@@ -4494,54 +4533,30 @@ class GaDataSelectValueComponent {
             .items()
             .filter((item) => value.some((v) => this.selectComponent.compareFn()(this.selectComponent.getItemValue(item), v)));
     });
+    visibleSelectedItems = computed(() => {
+        const items = this.selectedItems();
+        const limit = this.selectComponent.valueDisplayLimit();
+        if (limit === null || limit >= items.length) {
+            return items;
+        }
+        return items.slice(0, limit);
+    });
+    hiddenItemsCount = computed(() => {
+        return this.selectedItems().length - this.visibleSelectedItems().length;
+    });
     deselectOption(value) {
         this.selectComponent.deselectValue(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataSelectValueComponent, isStandalone: true, selector: "ga-data-select-value", inputs: { customValueTemplate: { classPropertyName: "customValueTemplate", publicName: "customValueTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-select__value" }, ngImport: i0, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of selectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\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\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </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)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataSelectValueComponent, isStandalone: true, selector: "ga-data-select-value", inputs: { customValueTemplate: { classPropertyName: "customValueTemplate", publicName: "customValueTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-select__value" }, ngImport: i0, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of visibleSelectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\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\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </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)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n  @if (hiddenItemsCount() > 0) {\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\">{{\n        i18n.displayLimitReachedLabel(hiddenItemsCount())\n      }}</span>\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ga-data-select-value', imports: [GaIconModule, NgTemplateOutlet], host: {
                         class: 'ga-select__value',
-                    }, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of selectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\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\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </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)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n" }]
+                    }, template: "@if (selectComponent.multiple()) {\n  @for (\n    selectedItem of visibleSelectedItems();\n    track selectComponent.getItemValue(selectedItem)\n  ) {\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\">\n        @if (customValueTemplate(); as templateRef) {\n          <ng-container\n            [ngTemplateOutlet]=\"templateRef\"\n            [ngTemplateOutletContext]=\"customValueTemplateContext(selectedItem)\"\n          />\n        } @else {\n          {{ selectComponent.getItemLabel(selectedItem) }}\n        }\n      </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)=\"\n            deselectOption(selectComponent.getItemValue(selectedItem));\n            $event.stopPropagation()\n          \"\n        />\n      }\n    </div>\n  }\n  @if (hiddenItemsCount() > 0) {\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\">{{\n        i18n.displayLimitReachedLabel(hiddenItemsCount())\n      }}</span>\n    </div>\n  }\n} @else {\n  @if (customValueTemplate(); as templateRef) {\n    <ng-container\n      [ngTemplateOutlet]=\"templateRef\"\n      [ngTemplateOutletContext]=\"\n        customValueTemplateContext(selectComponent.selectedItem())\n      \"\n    />\n  } @else {\n    {{ singleViewValue() }}\n  }\n}\n" }]
         }] });
 
-function GA_DATA_SELECT_I18N_FACTORY() {
-    return new GaDataSelectI18nDefault();
-}
-class GaDataSelectI18n {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, providedIn: 'root', useFactory: GA_DATA_SELECT_I18N_FACTORY });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18n, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                    useFactory: GA_DATA_SELECT_I18N_FACTORY,
-                }]
-        }] });
-class GaDataSelectI18nDefault extends GaDataSelectI18n {
-    /** A label for the clear button */
-    clearLabel = 'Clear';
-    /** A label for the search input */
-    searchInputLabel = 'Search';
-    /** A label shown when there are no options to display */
-    noOptionsLabel = 'No options';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectI18nDefault, decorators: [{
-            type: Injectable
-        }] });
-function provideGaDataSelectI18n(value) {
-    return makeEnvironmentProviders([
-        typeof value === 'function'
-            ? { provide: GaDataSelectI18n, useFactory: value }
-            : { provide: GaDataSelectI18n, useValue: value },
-    ]);
-}
-
 class GaDataSelectDropdownSpinnerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectDropdownSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaDataSelectDropdownSpinnerComponent, isStandalone: true, selector: "ga-data-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"] }] });
@@ -4777,6 +4792,7 @@ class GaDataSelectComponent {
     groupBy = input();
     loading = input(false, { transform: booleanAttribute });
     withOptionInput = input(null, { transform: booleanAttribute });
+    valueDisplayLimit = input(null, { transform: numberAttribute });
     searchValueChange = output();
     opened = output();
     closed = output();
@@ -5199,7 +5215,7 @@ class GaDataSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDataSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDataSelectComponent, isStandalone: true, selector: "ga-data-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, 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 }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, customFilter: { classPropertyName: "customFilter", publicName: "customFilter", 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 }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", 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 }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, withOptionInput: { classPropertyName: "withOptionInput", publicName: "withOptionInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchValueChange: "searchValueChange", opened: "opened", closed: "closed", optionsEndReached: "optionsEndReached" }, 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": "isOpen() ? cdkListbox()?.id : null", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox()?.id : null", "attr.aria-activedescendant": "isOpen() && !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: GaDataSelectComponent, isStandalone: true, selector: "ga-data-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, 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 }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, customFilter: { classPropertyName: "customFilter", publicName: "customFilter", 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 }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", 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 }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, withOptionInput: { classPropertyName: "withOptionInput", publicName: "withOptionInput", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayLimit: { classPropertyName: "valueDisplayLimit", publicName: "valueDisplayLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchValueChange: "searchValueChange", opened: "opened", closed: "closed", optionsEndReached: "optionsEndReached" }, 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": "isOpen() ? cdkListbox()?.id : null", "attr.aria-invalid": "invalid()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox()?.id : null", "attr.aria-activedescendant": "isOpen() && !searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GaDataSelectComponent),