@ethlete/cdk 2.5.0 → 2.5.1

package/fesm2022/ethlete-cdk.mjs

@@ -5,8 +5,8 @@ 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, clone, AnimatedOverlayDirective, 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, shareReplay, catchError, throwError, firstValueFrom, fromEvent, merge, take, timer, skipUntil, defer, Subscription, Observable } from 'rxjs';
+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 { 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';
 import { extractQuery, isQueryStateLoading, isQueryStateSuccess, isQueryStateFailure, QueryDirective } from '@ethlete/query';
@@ -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, ESCAPE, TAB as TAB$1, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, PAGE_DOWN, PAGE_UP, END, HOME, A } from '@angular/cdk/keycodes';
+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 * 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';
@@ -3415,13 +3415,30 @@ const SegmentedButtonImports = [
     SegmentedButtonGroupComponent,
 ];
 
+const SELECT_FIELD_TOKEN = new InjectionToken('ET_SELECT_FIELD_DIRECTIVE_TOKEN');
+class SelectFieldDirective {
+    constructor() {
+        this._bindings = createReactiveBindings();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: SelectFieldDirective, isStandalone: true, providers: [{ provide: SELECT_FIELD_TOKEN, useExisting: SelectFieldDirective }], exportAs: ["etSelectField"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    providers: [{ provide: SELECT_FIELD_TOKEN, useExisting: SelectFieldDirective }],
+                    exportAs: 'etSelectField',
+                }]
+        }] });
+
 class SelectFieldComponent extends DecoratedFormFieldBase {
     constructor() {
         super(...arguments);
         this.inputState = inject(InputStateService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SelectFieldComponent, isStandalone: true, selector: "et-select-field", host: { classAttribute: "et-form-field et-select-field" }, usesInheritance: true, hostDirectives: [{ directive: StaticFormFieldDirective }, { directive: WriteableInputDirective }, { directive: i0.forwardRef(function () { return DynamicFormFieldDirective; }), inputs: ["hideErrorMessage", "hideErrorMessage"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: SelectFieldComponent, isStandalone: true, selector: "et-select-field", host: { classAttribute: "et-form-field et-select-field" }, usesInheritance: true, hostDirectives: [{ directive: SelectFieldDirective }, { directive: StaticFormFieldDirective }, { directive: WriteableInputDirective }, { directive: i0.forwardRef(function () { return DynamicFormFieldDirective; }), inputs: ["hideErrorMessage", "hideErrorMessage"] }], ngImport: i0, template: `
     <ng-content select="et-label" />
     <div class="et-select-field-input">
       <ng-content />
@@ -3447,6 +3464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         class: 'et-form-field et-select-field',
                     },
                     hostDirectives: [
+                        SelectFieldDirective,
                         StaticFormFieldDirective,
                         WriteableInputDirective,
                         {
@@ -3555,32 +3573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 args: [ANIMATED_LIFECYCLE_TOKEN, { static: true }]
             }] } });
 
-class RuntimeError extends Error {
-    constructor(code, message, data = '__ET_NO_DATA__') {
-        super(formatRuntimeError(code, message));
-        this.code = code;
-        this.data = data;
-        if (data !== '__ET_NO_DATA__') {
-            try {
-                const _data = clone(data);
-                setTimeout(() => {
-                    console.error(_data);
-                }, 1);
-            }
-            catch {
-                setTimeout(() => {
-                    console.error(data);
-                }, 1);
-            }
-        }
-    }
-}
-function formatRuntimeError(code, message) {
-    // prefix code with zeros if it's less than 100
-    const codeWithZeros = code < 10 ? `00${code}` : code < 100 ? `0${code}` : code;
-    const fullCode = `ET${codeWithZeros}`;
-    return `${fullCode}${message ? ': ' + message : ''}`;
-}
 const COMBOBOX_ERRORS = {
     1: 'Expected options to be an array of objects. This is due to "bindLabel" and "bindValue" being set.',
     2: 'Expected options to be an array of primitives. This is due to "bindLabel" and "bindValue" not being set or "allowCustomValues" being set to true.',
@@ -3610,46 +3602,35 @@ const isObjectArray = (value) => {
 const isEmptyArray = (value) => {
     return Array.isArray(value) && value.length === 0;
 };
-const isObject = (value) => {
-    return typeof value === 'object' && value !== null;
-};
 const ComboboxOptionType = {
     Primitive: 'primitive',
     Object: 'object',
 };
-const ComboboxInputValueType = {
-    Single: 'single',
-    Array: 'array',
-};
-const getObjectProperty = (obj, prop) => {
-    const hasDotNotation = prop.includes('.');
-    if (!hasDotNotation)
-        return obj[prop];
-    const props = prop.split('.');
-    let value = obj;
-    for (const prop of props) {
-        if (!isObject(value))
-            return undefined;
-        value = value[prop];
-    }
-    return value;
-};
 const COMBOBOX_TOKEN = new InjectionToken('ET_COMBOBOX_TOKEN');
 class ComboboxComponent extends DecoratedInputBase {
     //#endregion
     //#region Inputs
     get options() {
-        return this._options$.value;
+        return this._selectionModel.getFilteredOptions();
     }
     set options(value) {
-        this._options$.next(value);
-    }
-    get initialValue() {
-        return this._initialValue$.value;
+        this._selectionModel.setOptions(value);
     }
     set initialValue(value) {
-        this._initialValue$.next(value);
-        this._updateSelectedOptionsViaInitialValue();
+        this._selectionModel.setSelection(value);
+    }
+    get filterInternal() {
+        return this._filterInternal$.value;
+    }
+    set filterInternal(value) {
+        const val = coerceBooleanProperty(value);
+        this._filterInternal$.next(val);
+        if (!val) {
+            this._selectionModel.setFilter('');
+        }
+        else {
+            this._selectionModel.setFilter(this._currentFilter);
+        }
     }
     get loading() {
         return this._loading$.value;
@@ -3669,23 +3650,14 @@ class ComboboxComponent extends DecoratedInputBase {
     set placeholder(value) {
         this._placeholder$.next(value);
     }
-    get multiple() {
-        return this._multiple$.value;
-    }
     set multiple(value) {
-        this._multiple$.next(coerceBooleanProperty(value));
-    }
-    get bindLabel() {
-        return this._bindLabel$.value;
+        this._selectionModel.setAllowMultiple(coerceBooleanProperty(value));
     }
     set bindLabel(value) {
-        this._bindLabel$.next(value);
-    }
-    get bindValue() {
-        return this._bindValue$.value;
+        this._selectionModel.setLabelBinding(value);
     }
     set bindValue(value) {
-        this._bindValue$.next(value);
+        this._selectionModel.setValueBinding(value);
     }
     get allowCustomValues() {
         return this._allowCustomValues$.value;
@@ -3695,9 +3667,6 @@ class ComboboxComponent extends DecoratedInputBase {
     }
     //#endregion
     //#region Members
-    get _rawSelectedOptions() {
-        return this._rawSelectedOptions$.value;
-    }
     get _currentFilter() {
         return this._currentFilter$.value;
     }
@@ -3705,67 +3674,30 @@ class ComboboxComponent extends DecoratedInputBase {
         return this._animatedOverlay.isMounted;
     }
     //#endregion
+    //#region Computes
+    //#endregion
     //#region Lifecycle
     constructor() {
         super();
         //#region Injects
         this._input = inject(INPUT_TOKEN);
         this._animatedOverlay = inject(AnimatedOverlayDirective);
-        this._options$ = new BehaviorSubject([]);
-        this.options$ = this._options$.asObservable();
-        this._initialValue$ = new BehaviorSubject(null);
+        this._selectField = inject(SELECT_FIELD_TOKEN);
+        this._filterInternal$ = new BehaviorSubject(true);
         this._loading$ = new BehaviorSubject(false);
         this.loading$ = this._loading$.asObservable();
         this._error$ = new BehaviorSubject(null);
         this._placeholder$ = new BehaviorSubject(null);
-        this._multiple$ = new BehaviorSubject(false);
-        this._bindLabel$ = new BehaviorSubject(null);
-        this._bindValue$ = new BehaviorSubject(null);
         this._allowCustomValues$ = new BehaviorSubject(false);
         //#endregion
         //#region Outputs
         this.filterChange = new EventEmitter();
-        this._rawSelectedOptions$ = new BehaviorSubject([]);
         this._currentFilter$ = new BehaviorSubject('');
         this._isOpen$ = this._animatedOverlay.isMounted$;
-        //#endregion
-        //#region Computes
-        this._allOptions$ = combineLatest([this._options$, this._rawSelectedOptions$]).pipe(map(([options, rawSelectedOptions]) => [...options, ...rawSelectedOptions]), shareReplay({ bufferSize: 1, refCount: true }));
-        this.expectedOptionType$ = combineLatest([
-            this._bindLabel$,
-            this._bindValue$,
-            this._allowCustomValues$,
-        ]).pipe(map(([bindLabel, bindValue, allowCustomValues]) => {
-            const shouldBeObjects = bindLabel && bindValue && !allowCustomValues;
-            if (shouldBeObjects) {
-                return ComboboxOptionType.Object;
-            }
-            return ComboboxOptionType.Primitive;
-        }));
-        this.expectedInputValueType$ = this._multiple$.pipe(map((multiple) => (multiple ? ComboboxInputValueType.Array : ComboboxInputValueType.Single)));
-        this.selectedOptions$ = combineLatest([
-            this._input.value$,
-            this.expectedInputValueType$,
-            this._allOptions$,
-        ]).pipe(map(([inputValue, expectedInputValueType, allOptions]) => {
-            if (expectedInputValueType === ComboboxInputValueType.Single) {
-                if (Array.isArray(inputValue)) {
-                    return [];
-                }
-                const option = this._findOptionByValue(inputValue, allOptions);
-                return [option];
-            }
-            else if (expectedInputValueType === ComboboxInputValueType.Array) {
-                if (!Array.isArray(inputValue)) {
-                    return [];
-                }
-                const options = inputValue.map((value) => this._findOptionByValue(value, allOptions)).filter((v) => !!v);
-                if (!options.length)
-                    return [];
-                return options;
-            }
-            return [];
-        }), map((options) => options.filter((v) => !!v)));
+        this._selectionModel = new SelectionModel();
+        this.selectedOptions$ = this._selectionModel.selection$;
+        this.multiple$ = this._selectionModel.allowMultiple$;
+        this.options$ = this._selectionModel.filteredOptions$;
         this._bindings.push({
             attribute: 'class.et-combobox--loading',
             observable: this._loading$,
@@ -3778,6 +3710,10 @@ class ComboboxComponent extends DecoratedInputBase {
             attribute: 'class.et-combobox--open',
             observable: this._isOpen$,
         });
+        this._selectField._bindings.push({
+            attribute: 'class.et-select-field--open',
+            observable: this._isOpen$,
+        });
     }
     ngOnInit() {
         this._initDispatchFilterChanges();
@@ -3785,42 +3721,24 @@ class ComboboxComponent extends DecoratedInputBase {
         if (isDevMode()) {
             this._debugValidateComboboxConfig();
         }
+        this._selectionModel.value$
+            .pipe(takeUntil(this._destroy$), tap((value) => {
+            this._input._updateValue(value);
+            this._setFilterFromInputValue();
+        }))
+            .subscribe();
     }
     //#endregion
     //#region Public Methods
     getOptionLabel(option) {
-        if (!this.bindLabel || !isObject(option)) {
-            return of(option);
-        }
-        return this._bindLabel$.pipe(map((label) => {
-            if (!label)
-                return option;
-            return getObjectProperty(option, label) ?? option;
-        }));
+        return this._selectionModel.getLabel$(option);
     }
     getOptionValue(option) {
-        if (!this.bindValue || !isObject(option)) {
-            return of(option);
-        }
-        return this._bindValue$.pipe(map((value) => {
-            if (!value)
-                return option;
-            return getObjectProperty(option, value) ?? option;
-        }));
+        return this._selectionModel.getValue$(option);
     }
     removeSelectedOption(option) {
+        this._selectionModel.removeSelectedOption(option);
         this.input._markAsTouched();
-        const selectedOptions = this._rawSelectedOptions;
-        const optionValue = this._getOptionValueSync(option);
-        const index = selectedOptions.findIndex((v) => {
-            const val = this._getOptionValueSync(v);
-            return val === optionValue;
-        });
-        if (index === -1)
-            return;
-        selectedOptions.splice(index, 1);
-        this._rawSelectedOptions$.next(selectedOptions);
-        this._removeOrClearInputValue(optionValue);
     }
     open() {
         // if (!this._selectBodyConfig) return;
@@ -3844,70 +3762,102 @@ class ComboboxComponent extends DecoratedInputBase {
     }
     writeValueFromOption(option) {
         this.input._markAsTouched();
-        const optionValue = this._getOptionValueSync(option);
-        if (this._findOptionByValue(optionValue, this._rawSelectedOptions)) {
-            if (this.multiple) {
-                this.removeSelectedOption(option);
-                this._removeOrClearInputValue(optionValue);
-            }
-            return;
+        if (this._selectionModel.allowMultiple) {
+            this._selectionModel.toggleSelectedOption(option);
+        }
+        else {
+            this._selectionModel.addSelectedOption(option);
         }
-        this._setOrAddToInputValue(optionValue);
-        this._addSelectedOption(option);
-        if (!this.multiple) {
+        if (!this._selectionModel.allowMultiple) {
             this.close();
             this._setFilterFromInputValue();
         }
     }
     isOptionSelected(option) {
-        return combineLatest([this._rawSelectedOptions$, this.getOptionValue(option)]).pipe(map(([selectedOptions, value]) => !!this._findOptionByValue(value, selectedOptions)));
+        return this._selectionModel.isSelected$(option);
     }
     //#endregion
     //#region Protected Methods
     processKeydownEvent(event) {
         const keyCode = event.keyCode;
         const isOpen = this._isOpen;
-        const isMultiple = this.multiple;
+        const isMultiple = this._selectionModel.allowMultiple;
         const canAddCustomValue = this.allowCustomValues;
         const value = event.target.value;
-        const hasValue = !!value;
+        const hasFilterValue = !!value;
+        const result = {};
         // The user typed a custom value and pressed enter. Add it to the selected options.
-        if (keyCode === ENTER && canAddCustomValue && hasValue) {
-            // Don't add the value if it already exists.
-            if (!this._findOptionByValue(value, this._rawSelectedOptions)) {
-                this._addSelectedOption(value);
-                this._setOrAddToInputValue(value);
+        if (keyCode === ENTER) {
+            if (canAddCustomValue && hasFilterValue) {
+                result.optionAction = { type: 'add', option: value };
             }
-            if (this.multiple) {
-                this._updateFilter('');
+            else {
+                if (isMultiple) {
+                    // TODO: Toggle the focused option
+                }
+                else {
+                    // TODO: Select the focused option
+                }
             }
-            return;
+            if (isMultiple) {
+                result.setFilter = '';
+            }
+            else {
+                result.overlayOperation = 'close';
+            }
+            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) {
-                this.close();
+                result.overlayOperation = 'close';
             }
-            else {
-                if (!isMultiple) {
-                    this._removeOrClearInputValue(null);
-                    this._updateFilter('');
-                    return;
-                }
+            else if (!isMultiple) {
+                result.setFilter = '';
+                result.optionAction = 'clear';
             }
+            return this._interpretKeyHandlerResult(result);
         }
         if (keyCode === TAB$1) {
-            this.close();
-            return;
+            result.overlayOperation = 'close';
+            return this._interpretKeyHandlerResult(result);
         }
         if (!isOpen) {
-            this.open();
+            result.overlayOperation = 'open';
         }
         if (keyCode === DOWN_ARROW) {
-            // TODO: Implement
+            result.focusAction = 'next';
         }
         if (keyCode === UP_ARROW) {
-            // TODO: Implement
+            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';
+        }
+        if (keyCode === A && event.ctrlKey && isMultiple) {
+            result.optionAction = 'toggleAll';
+            event.preventDefault();
+        }
+        return this._interpretKeyHandlerResult(result);
     }
     processInputEvent(event) {
         const value = event.target.value;
@@ -3916,10 +3866,10 @@ class ComboboxComponent extends DecoratedInputBase {
     handleBlurEvent() {
         this.input._markAsTouched();
         this.input._setShouldDisplayError(true);
-        if (this.multiple)
+        if (this._selectionModel.allowMultiple)
             return;
         if (this._currentFilter === '') {
-            this._removeOrClearInputValue(null);
+            this._selectionModel.clearSelectedOptions();
             return;
         }
         this._setFilterFromInputValue();
@@ -3928,7 +3878,7 @@ class ComboboxComponent extends DecoratedInputBase {
     //#region Private Methods
     _initDispatchFilterChanges() {
         this._currentFilter$
-            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this._destroy$), tap((v) => this.filterChange.emit(v)))
+            .pipe(skipWhile(() => this.filterInternal), debounceTime(300), distinctUntilChanged(), takeUntil(this._destroy$), tap((v) => this.filterChange.emit(v)))
             .subscribe();
     }
     _initRepositionOnValueChanges() {
@@ -3936,65 +3886,6 @@ class ComboboxComponent extends DecoratedInputBase {
             .pipe(takeUntil(this._destroy$), debounceTime(0), tap(() => this._animatedOverlay._reposition()))
             .subscribe();
     }
-    _updateSelectedOptionsViaInitialValue() {
-        if (this.initialValue !== null && this.initialValue !== undefined) {
-            if (Array.isArray(this.initialValue)) {
-                this._addSelectedOptions(this.initialValue);
-            }
-            else {
-                this._addSelectedOption(this.initialValue);
-            }
-        }
-    }
-    _addSelectedOption(option) {
-        if (this.multiple) {
-            this._rawSelectedOptions$.next([...this._rawSelectedOptions, option]);
-        }
-        else {
-            this._rawSelectedOptions$.next([option]);
-        }
-    }
-    _addSelectedOptions(options) {
-        if (!this.multiple) {
-            return;
-        }
-        this._rawSelectedOptions$.next([...this._rawSelectedOptions, ...options]);
-    }
-    _findOptionByValue(value, allOptions) {
-        const option = allOptions.find((option) => {
-            if (isObject(option) && this.bindValue) {
-                return getObjectProperty(option, this.bindValue) === value;
-            }
-            return option === value;
-        });
-        return option;
-    }
-    _setOrAddToInputValue(value) {
-        if (this.multiple) {
-            if (Array.isArray(this._input.value)) {
-                this._input._updateValue([...this._input.value, value]);
-            }
-            else {
-                this._input._updateValue([value]);
-            }
-        }
-        else {
-            this._input._updateValue(value);
-        }
-    }
-    _removeOrClearInputValue(value) {
-        if (this.multiple) {
-            if (Array.isArray(this._input.value)) {
-                this._input._updateValue(this._input.value.filter((v) => v !== value));
-            }
-            else {
-                this._input._updateValue([]);
-            }
-        }
-        else {
-            this._input._updateValue(null);
-        }
-    }
     _updateFilter(value) {
         if (this.input.nativeInputRef && this.input.nativeInputRef.element.nativeElement.value !== value) {
             this.input.nativeInputRef.element.nativeElement.value = value;
@@ -4002,52 +3893,106 @@ class ComboboxComponent extends DecoratedInputBase {
         if (this._currentFilter === value)
             return;
         this._currentFilter$.next(value);
-    }
-    _getOptionValueSync(option) {
-        if (!this.bindValue || !isObject(option)) {
-            return option;
-        }
-        return getObjectProperty(option, this.bindValue) ?? option;
-    }
-    _getOptionLabelSync(option) {
-        if (!this.bindLabel || !isObject(option)) {
-            return option;
+        if (this.filterInternal) {
+            this._selectionModel.setFilter(value);
         }
-        return getObjectProperty(option, this.bindLabel) ?? option;
     }
     _setFilterFromInputValue() {
-        if (this.multiple)
+        if (this._selectionModel.allowMultiple)
             return;
         const value = this.input.value;
         if (!value || Array.isArray(value)) {
             this._updateFilter('');
             return;
         }
-        const option = this._findOptionByValue(value, this._rawSelectedOptions);
+        const option = this._selectionModel.getOptionByValue(value);
         if (!option)
             return;
-        const label = this._getOptionLabelSync(option);
+        const label = this._selectionModel.getLabel(option);
         if (typeof label !== 'string')
             return;
         this._updateFilter(label);
     }
+    _interpretKeyHandlerResult(result) {
+        if (result.overlayOperation === 'close') {
+            this.close();
+        }
+        else if (result.overlayOperation === 'open') {
+            this.open();
+        }
+        if (result.setFilter !== undefined) {
+            this._updateFilter(result.setFilter);
+        }
+        if (result.optionAction) {
+            if (typeof result.optionAction === 'string') {
+                if (result.optionAction === 'clear') {
+                    this._selectionModel.clearSelectedOptions();
+                }
+                else if (result.optionAction === 'toggleAll') {
+                    this._selectionModel.toggleAllSelectedOptions();
+                }
+            }
+            else {
+                const { type, option } = result.optionAction;
+                if (type === 'add') {
+                    this._selectionModel.addSelectedOption(option);
+                }
+                if (type === 'remove') {
+                    this._selectionModel.removeSelectedOption(option);
+                }
+                if (type === 'toggle') {
+                    this._selectionModel.toggleSelectedOption(option);
+                }
+            }
+        }
+        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
     _debugValidateComboboxConfig(isRetry = false) {
-        this.expectedOptionType$
+        combineLatest([this._selectionModel.labelBinding$, this._selectionModel.valueBinding$, this._allowCustomValues$])
             .pipe(skip(isRetry ? 1 : 0), // Skip if retrying to avoid infinite loop
-        debounceTime(0), takeUntil(this._destroy$), tap((expectedOptionType) => {
-            if (isEmptyArray(this.options)) {
+        debounceTime(0), takeUntil(this._destroy$), map(([bindLabel, bindValue, allowCustomValues]) => {
+            const shouldBeObjects = bindLabel && bindValue && !allowCustomValues;
+            if (shouldBeObjects) {
+                return ComboboxOptionType.Object;
+            }
+            return ComboboxOptionType.Primitive;
+        }), tap((expectedOptionType) => {
+            const options = this._selectionModel.options;
+            if (isEmptyArray(options)) {
                 return;
             }
             if (expectedOptionType === ComboboxOptionType.Object) {
-                if (!isObjectArray(this.options)) {
-                    throw comboboxError(1, this.options);
+                if (!isObjectArray(options)) {
+                    throw comboboxError(1, options);
                 }
             }
             else if (expectedOptionType === ComboboxOptionType.Primitive) {
-                if (!isPrimitiveArray(this.options)) {
-                    throw comboboxError(2, this.options);
+                if (!isPrimitiveArray(options)) {
+                    throw comboboxError(2, options);
                 }
             }
         }), catchError((e) => {
@@ -4057,12 +4002,12 @@ class ComboboxComponent extends DecoratedInputBase {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", inputs: { options: "options", initialValue: "initialValue", loading: "loading", error: "error", placeholder: "placeholder", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue", allowCustomValues: "allowCustomValues" }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "et-combobox" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", inputs: { options: "options", initialValue: "initialValue", filterInternal: "filterInternal", loading: "loading", error: "error", placeholder: "placeholder", multiple: "multiple", bindLabel: "bindLabel", bindValue: "bindValue", allowCustomValues: "allowCustomValues" }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "et-combobox" }, providers: [
             {
                 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\" class=\"et-combobox-selected-options\">\n    <li *ngFor=\"let item of selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n      {{ getOptionLabel(item) | async }}\n      <span (click)=\"removeSelectedOption(item)\" class=\"et-combobox-selected-option-remove\" tabindex=\"-1\"> x </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 (click)=\"removeSelectedOption(item)\" class=\"et-combobox-selected-option-remove\" tabindex=\"-1\"> x </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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -4073,12 +4018,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", 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\" class=\"et-combobox-selected-options\">\n    <li *ngFor=\"let item of selectedOptions$ | async\" class=\"et-combobox-selected-option\">\n      {{ getOptionLabel(item) | async }}\n      <span (click)=\"removeSelectedOption(item)\" class=\"et-combobox-selected-option-remove\" tabindex=\"-1\"> x </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 (click)=\"removeSelectedOption(item)\" class=\"et-combobox-selected-option-remove\" tabindex=\"-1\"> x </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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                 type: Input,
                 args: [{ required: true }]
             }], initialValue: [{
                 type: Input
+            }], filterInternal: [{
+                type: Input
             }], loading: [{
                 type: Input
             }], error: [{
@@ -4418,6 +4365,7 @@ class SelectDirective {
         this._animatedOverlay = inject(AnimatedOverlayDirective);
         this._destroy$ = createDestroy();
         this._liveAnnouncer = inject(LiveAnnouncer);
+        this._selectField = inject(SELECT_FIELD_TOKEN);
         this.input = inject(INPUT_TOKEN);
         this._selectBodyId$ = new BehaviorSubject(null);
         this._isOpen$ = new BehaviorSubject(false);
@@ -4491,6 +4439,10 @@ class SelectDirective {
         });
         this.trackByFn = (_, item) => item.id;
         this._animatedOverlay.placement = 'bottom';
+        this._selectField._bindings.push({
+            attribute: 'class.et-select-field--open',
+            observable: this._isOpen$,
+        });
     }
     ngOnInit() {
         this._unmountSelectBodyOnDisable();
@@ -10334,5 +10286,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, RuntimeError, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECT_BODY_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, 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, formatRuntimeError, 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, isUpperBracketMatch, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideDialog, provideDialogDefaultConfig, provideSort, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
 //# sourceMappingURL=ethlete-cdk.mjs.map