@ethlete/cdk 2.5.2 → 2.5.4

package/fesm2022/ethlete-cdk.mjs

@@ -5,7 +5,7 @@ import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, JsonPipe, NgFor, D
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, TemplateRef, ViewContainerRef, forwardRef, ViewChild, EventEmitter, Output, Optional, Inject, SkipSelf, HostListener, ChangeDetectorRef, Renderer2, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
-import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, RuntimeError, AnimatedOverlayDirective, SelectionModel, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, scrollToElement, IS_ACTIVE_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, equal, ResizeObserverService, createFlipAnimation, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, RuntimeError, AnimatedOverlayDirective, SelectionModel, ActiveSelectionModel, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, ClickObserverService, FocusVisibleService, scrollToElement, IS_ACTIVE_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, debounceTime, filter, distinctUntilChanged, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, fromEvent, merge, take, timer, skipUntil, defer, Subscription, Observable } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -14,7 +14,7 @@ import * as i1$2 from '@angular/cdk/a11y';
 import { FocusMonitor, LiveAnnouncer, AriaDescriber, FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { FormControl, NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ENTER, SPACE, ESCAPE, TAB as TAB$1, DOWN_ARROW, UP_ARROW, PAGE_UP, PAGE_DOWN, HOME, END, A, LEFT_ARROW, RIGHT_ARROW, hasModifierKey } from '@angular/cdk/keycodes';
+import { ENTER, ESCAPE, TAB as TAB$1, A, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, PAGE_DOWN, PAGE_UP, END, HOME } from '@angular/cdk/keycodes';
 import * as i1$4 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkDialogContainer, Dialog, DialogConfig, DIALOG_SCROLL_STRATEGY_PROVIDER as DIALOG_SCROLL_STRATEGY_PROVIDER$1 } from '@angular/cdk/dialog';
@@ -3477,19 +3477,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
                 }]
         }] });
 
+const isOptionDisabled = (opt) => {
+    if (typeof opt === 'object' && opt !== null && 'disabled' in opt) {
+        return !!opt.disabled;
+    }
+    return false;
+};
+
 const COMBOBOX_OPTION_TOKEN = new InjectionToken('ET_COMBOBOX_OPTION_TOKEN');
 class ComboboxOptionComponent {
     constructor() {
         this.combobox = inject(COMBOBOX_TOKEN);
         this._option$ = new BehaviorSubject(null);
-        this.disabled$ = this._option$.pipe(map((opt) => this._isOptionDisabled(opt)));
+        this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
         this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
+        this.active$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionActive(opt)));
         this._bindings = createReactiveBindings({
             attribute: 'class.et-combobox-option--selected',
             observable: this.selected$,
         }, {
             attribute: 'class.et-combobox-option--disabled',
             observable: this.disabled$,
+        }, {
+            attribute: 'class.et-combobox-option--active',
+            observable: this.active$,
         });
     }
     get option() {
@@ -3498,20 +3509,14 @@ class ComboboxOptionComponent {
     set option(value) {
         this._option$.next(value);
     }
-    activateOption() {
-        if (this._isOptionDisabled(this.option)) {
+    selectOption() {
+        if (isOptionDisabled(this.option)) {
             return;
         }
         this.combobox.writeValueFromOption(this.option);
     }
-    _isOptionDisabled(opt) {
-        if (typeof opt === 'object' && opt !== null && 'disabled' in opt) {
-            return !!opt.disabled;
-        }
-        return false;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ComboboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "click": "activateOption()" }, classAttribute: "et-combobox-option" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: ComboboxOptionComponent, isStandalone: true, selector: "et-combobox-option", inputs: { option: "option" }, host: { listeners: { "click": "selectOption()" }, classAttribute: "et-combobox-option" }, providers: [
             {
                 provide: COMBOBOX_OPTION_TOKEN,
                 useExisting: ComboboxOptionComponent,
@@ -3522,7 +3527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
             type: Component,
             args: [{ selector: 'et-combobox-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-combobox-option',
-                        '(click)': 'activateOption()',
+                        '(click)': 'selectOption()',
                     }, imports: [AsyncPipe], hostDirectives: [], providers: [
                         {
                             provide: COMBOBOX_OPTION_TOKEN,
@@ -3705,10 +3710,12 @@ class ComboboxComponent extends DecoratedInputBase {
         this._currentFilter$ = new BehaviorSubject('');
         this._isOpen$ = this._animatedOverlay.isMounted$;
         this._selectionModel = new SelectionModel();
+        this._activeSelectionModel = new ActiveSelectionModel();
         this.selectedOptions$ = this._selectionModel.selection$;
         this.multiple$ = this._selectionModel.allowMultiple$;
         this.options$ = this._selectionModel.filteredOptions$;
         this.rawOptions$ = this._selectionModel.options$;
+        this._activeSelectionModel.setSelectionModel(this._selectionModel);
         this._animatedOverlay.placement = 'bottom';
         this._animatedOverlay.allowedAutoPlacements = ['bottom', 'top'];
         this._bindings.push({
@@ -3759,7 +3766,7 @@ class ComboboxComponent extends DecoratedInputBase {
     }
     open() {
         // if (!this._selectBodyConfig) return;
-        if (this._isOpen || this.input.disabled)
+        if (this._isOpen || this.input.disabled || this._animatedOverlay.isMounting)
             return;
         // this._setSelectedOptionActive();
         const instance = this._animatedOverlay.mount({
@@ -3772,7 +3779,7 @@ class ComboboxComponent extends DecoratedInputBase {
         // this._selectBodyId$.next(instance.selectBody.id);
     }
     close() {
-        if (!this._isOpen)
+        if (!this._isOpen || this._animatedOverlay.isUnmounting)
             return;
         this._animatedOverlay.unmount();
         // this._selectBodyId$.next(null);
@@ -3795,10 +3802,16 @@ class ComboboxComponent extends DecoratedInputBase {
             this.close();
             this._setFilterFromInputValue();
         }
+        else {
+            this._updateFilter('');
+        }
     }
     isOptionSelected(option) {
         return this._selectionModel.isSelected$(option);
     }
+    isOptionActive(option) {
+        return this._activeSelectionModel.activeOption$.pipe(map((activeOption) => activeOption === option));
+    }
     //#endregion
     //#region Protected Methods
     processKeydownEvent(event) {
@@ -3809,17 +3822,26 @@ class ComboboxComponent extends DecoratedInputBase {
         const value = event.target.value;
         const hasFilterValue = !!value;
         const result = {};
-        // The user typed a custom value and pressed enter. Add it to the selected options.
         if (keyCode === ENTER) {
+            event.preventDefault();
+            event.stopPropagation();
+            // The user typed a custom value and pressed enter. Add it to the selected options.
+            // FIXME: Currently it is impossible to select the active option with the keyboard if canAddCustomValue is true.
+            // To fix this, the active option should also include the origin it got active from (keyboard or programmatic).
+            // The "value" changing should put the combobox into a "use the custom input on enter" mode.
+            // The "active option" changing via keyboard should put the combobox into a "use the active option on enter" mode.
             if (canAddCustomValue && hasFilterValue) {
                 result.optionAction = { type: 'add', option: value };
             }
             else {
-                if (isMultiple) {
-                    // TODO: Toggle the focused option
-                }
-                else {
-                    // TODO: Select the focused option
+                const activeOption = this._activeSelectionModel.activeOption;
+                if (activeOption) {
+                    if (isMultiple) {
+                        result.optionAction = { type: 'toggle', option: activeOption };
+                    }
+                    else {
+                        result.optionAction = { type: 'add', option: activeOption };
+                    }
                 }
             }
             if (isMultiple) {
@@ -3830,17 +3852,6 @@ class ComboboxComponent extends DecoratedInputBase {
             }
             return this._interpretKeyHandlerResult(result);
         }
-        if (keyCode === SPACE) {
-            if (isMultiple) {
-                // result.setFilter = '';
-                // TODO: Toggle the focused option
-            }
-            else {
-                result.overlayOperation = 'close';
-                // TODO: Select the focused option
-            }
-            return this._interpretKeyHandlerResult(result);
-        }
         if (keyCode === ESCAPE) {
             if (isOpen) {
                 result.overlayOperation = 'close';
@@ -3858,24 +3869,7 @@ class ComboboxComponent extends DecoratedInputBase {
         if (!isOpen) {
             result.overlayOperation = 'open';
         }
-        if (keyCode === DOWN_ARROW) {
-            result.focusAction = 'next';
-        }
-        if (keyCode === UP_ARROW) {
-            result.focusAction = 'previous';
-        }
-        if (keyCode === PAGE_UP) {
-            result.focusAction = { type: 'offset', offset: -10 };
-        }
-        if (keyCode === PAGE_DOWN) {
-            result.focusAction = { type: 'offset', offset: 10 };
-        }
-        if (keyCode === HOME) {
-            result.focusAction = 'first';
-        }
-        if (keyCode === END) {
-            result.focusAction = 'last';
-        }
+        this._activeSelectionModel.evaluateKeyboardEvent(event);
         if (keyCode === A && event.ctrlKey && isMultiple) {
             result.optionAction = 'toggleAll';
             event.preventDefault();
@@ -3889,8 +3883,10 @@ class ComboboxComponent extends DecoratedInputBase {
     handleBlurEvent() {
         this.input._markAsTouched();
         this.input._setShouldDisplayError(true);
-        if (this._selectionModel.allowMultiple)
+        if (this._selectionModel.allowMultiple) {
+            this._updateFilter('');
             return;
+        }
         if (this._currentFilter === '') {
             this._selectionModel.clearSelectedOptions();
             return;
@@ -3957,6 +3953,8 @@ class ComboboxComponent extends DecoratedInputBase {
             }
             else {
                 const { type, option } = result.optionAction;
+                if (isOptionDisabled(option))
+                    return;
                 if (type === 'add') {
                     this._selectionModel.addSelectedOption(option);
                 }
@@ -3968,29 +3966,6 @@ class ComboboxComponent extends DecoratedInputBase {
                 }
             }
         }
-        if (result.focusAction) {
-            if (typeof result.focusAction === 'string') {
-                if (result.focusAction === 'first') {
-                    // TODO: Implement
-                }
-                if (result.focusAction === 'last') {
-                    // TODO: Implement
-                }
-                if (result.focusAction === 'next') {
-                    // TODO: Implement
-                }
-                if (result.focusAction === 'previous') {
-                    // TODO: Implement
-                }
-            }
-            else {
-                const { type } = result.focusAction;
-                if (type === 'offset') {
-                    const { offset } = result.focusAction;
-                    // TODO: Implement
-                }
-            }
-        }
     }
     //#endregion
     //#region Dev mode
@@ -4030,7 +4005,7 @@ class ComboboxComponent extends DecoratedInputBase {
                 provide: COMBOBOX_TOKEN,
                 useExisting: ComboboxComponent,
             },
-        ], usesInheritance: true, hostDirectives: [{ directive: InputDirective }, { directive: i1$1.AnimatedOverlayDirective }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li *ngFor=\"let item of selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n      {{ getOptionLabel(item) | async }}\n      <span\n        (click)=\"removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n  </ul>\n\n  <input\n    (keydown)=\"processKeydownEvent($event)\"\n    (click)=\"open()\"\n    (blur)=\"handleBlurEvent()\"\n    (input)=\"processInputEvent($event)\"\n    type=\"text\"\n    etNativeInputRef\n  />\n\n  <et-chevron-icon class=\"et-combobox-chevron\" />\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n  <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[data-popper-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[data-popper-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:300px;overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid}.et-combobox-option{display:block}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, hostDirectives: [{ directive: InputDirective }, { directive: i1$1.AnimatedOverlayDirective }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li *ngFor=\"let item of selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n      {{ getOptionLabel(item) | async }}\n      <span\n        (click)=\"removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n  </ul>\n\n  <input\n    (keydown)=\"processKeydownEvent($event)\"\n    (click)=\"open()\"\n    (blur)=\"handleBlurEvent()\"\n    (input)=\"processInputEvent($event)\"\n    type=\"text\"\n    etNativeInputRef\n  />\n\n  <et-chevron-icon class=\"et-combobox-chevron\" />\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n  <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[data-popper-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[data-popper-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:300px;overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid}.et-combobox-option{display:block}:where(.et-combobox-option--active){background-color:#1e1e1e}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ChevronIconComponent, selector: "et-chevron-icon" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -4042,7 +4017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
                             provide: COMBOBOX_TOKEN,
                             useExisting: ComboboxComponent,
                         },
-                    ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li *ngFor=\"let item of selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n      {{ getOptionLabel(item) | async }}\n      <span\n        (click)=\"removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n  </ul>\n\n  <input\n    (keydown)=\"processKeydownEvent($event)\"\n    (click)=\"open()\"\n    (blur)=\"handleBlurEvent()\"\n    (input)=\"processInputEvent($event)\"\n    type=\"text\"\n    etNativeInputRef\n  />\n\n  <et-chevron-icon class=\"et-combobox-chevron\" />\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n  <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[data-popper-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[data-popper-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:300px;overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid}.et-combobox-option{display:block}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/use-track-by-function -->\n<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-combobox-wrapper\">\n  <ul *ngIf=\"multiple$ | async\" class=\"et-combobox-selected-options\">\n    <li *ngFor=\"let item of selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n      {{ getOptionLabel(item) | async }}\n      <span\n        (click)=\"removeSelectedOption(item); $event.stopPropagation()\"\n        class=\"et-combobox-selected-option-remove\"\n        tabindex=\"-1\"\n      >\n        x\n      </span>\n    </li>\n  </ul>\n\n  <input\n    (keydown)=\"processKeydownEvent($event)\"\n    (click)=\"open()\"\n    (blur)=\"handleBlurEvent()\"\n    (input)=\"processInputEvent($event)\"\n    type=\"text\"\n    etNativeInputRef\n  />\n\n  <et-chevron-icon class=\"et-combobox-chevron\" />\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n  <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[data-popper-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[data-popper-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:300px;overflow:auto}@supports (overflow: overlay){.et-combobox-body-container{overflow:overlay}}.et-combobox-body{width:100%;display:grid}.et-combobox-option{display:block}:where(.et-combobox-option--active){background-color:#1e1e1e}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10317,5 +10292,5 @@ const TABS_CONFIG = new InjectionToken('TABS_CONFIG');
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, ButtonComponent, ButtonDirective, ButtonImports, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_DIR_TOKEN, COMBOBOX_TOKEN, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, EMAIL_INPUT_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconImports, IfInputEmptyDirective, IfInputFilledDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MasonryComponent, MasonryImports, MasonryItemComponent, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationImports, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PictureDataDirective, ProgressSpinnerComponent, QueryButtonComponent, QueryButtonDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RecycleRowsDirective, RowComponent, RowDefDirective, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableImports, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, accordionAnimations, createBottomSheetConfig, createBracketConfig, createDialogConfig, createToggletipConfig, createTooltipConfig, getClosestBottomSheet, getClosestDialog, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
+export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, ButtonComponent, ButtonDirective, ButtonImports, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_DIR_TOKEN, COMBOBOX_TOKEN, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, EMAIL_INPUT_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconImports, IfInputEmptyDirective, IfInputFilledDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MasonryComponent, MasonryImports, MasonryItemComponent, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationImports, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PictureDataDirective, ProgressSpinnerComponent, QueryButtonComponent, QueryButtonDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RecycleRowsDirective, RowComponent, RowDefDirective, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableImports, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, accordionAnimations, createBottomSheetConfig, createBracketConfig, createDialogConfig, createToggletipConfig, createTooltipConfig, getClosestBottomSheet, getClosestDialog, isOptionDisabled, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
 //# sourceMappingURL=ethlete-cdk.mjs.map